Korzystanie z Trusted Shops z Menedżerem tagów Google

Krok 1:

Przejdź do administracji konta w Menedżerze tagów Google i wybierz element menu „Tagi” (01_16x16.png) w głównym obszarze nawigacji po lewej stronie ekranu. W wyświetlonym przeglądzie kliknij przycisk „Nowy” (02_16x16.png).

Tags_Neu_pl.png

Najpierw wprowadź nazwę (01_16x16.png) nowego tagu (np. „Trustbadge”). Następnie kliknij przycisk „Konfiguracja tagu” (02_16x16.png). Otworzy się kolejne menu. W tym menu wybierz opcję „Niestandardowy kod HTML” (03_16x16.png).

NeuesTag_Benutzerdefiniertes-HTML_pl.png

Krok 2:

W następnym kroku będziesz potrzebować kodu Trustbadge® swojego sklepu. Możesz go wygenerować, wpisując adres URL sklepu lub identyfikator Trusted Shops w poniższym polu. 

Identyfikator Trusted Shops (zaczynający się od X...) znajdziesz w swoim panelu administracyjnym w części backend My Trusted Shops. Aby go odnaleźć, w pierwszej kolejności zaloguj się do My Trusted Shops klikając tutaj. Po zalogowaniu się zostaniesz przeniesiony bezpośrednio do panelu administracyjnego. W prawej kolumnie panelu wyświetlone są Twoje sklepy zarejestrowane w Trusted Shops wraz z odpowiednimi identyfikatorami Trusted Shops.

Skopiuj cały kod Trustbadge i wróć do Menedżera tagów Google. Wklej kod w polu wprowadzania danych „HTML” (01_16x16.png) i zaznacz pole „Obsługuj instrukcję document.write” (02_16x16.png). Następnie kliknij pole „Reguly” (03_16x16.png).

NeuesTag_Code-einf_gen_pl.png

W kolejnym kroku zdefiniujesz, na których stronach Twojego sklepu ma się pojawiać nowo utworzony tag zawierający Trustbadge. Wybierz opcję „All Pages”. Nastąpi powrót do przeglądu tagów. Kliknij przycisk „Zapisz” w prawym górnym rogu.

Trigger_AllPages_pl.png

Trustbadge będzie wtedy dostępny na każdej stronie Twojego sklepu, także na stronie z potwierdzeniem zamówienia.

Krok 3:

Trustbadge potrzebuje drobnej pomocy, aby wysyłać klientom prośby o opinie i móc zaoferować Ochronę Kupującego, gdy już zakończysz certyfikację. Musisz ustawić element DIV, aby umożliwić rozpoznawanie strony z potwierdzeniem zamówienia („strony z podziękowaniem”). Wówczas Trustbadge będzie automatycznie otwierać na tej stronie Trustcard z ofertą Ochrony Kupującego na zamówienie i/lub prośbą o zgodę na wysłanie przypomnienia o pozostawieniu opinii.

Aby maksymalnie ułatwić kupującym proces zakupu i nie prosić ich o ponowne wpisywanie swoich danych, dane potrzebne do aktywacji Ochrony Kupującego i prośby o opinię powinny zostać przesłane bezpośrednio z szablonu sklepu do Trustbadge. Menedżer tagów Google może uzyskać dostęp do wszystkich danych potrzebnych do aktywacji Ochrony Kupującego Trusted Shops, jeśli dodasz dodatkowy obiekt JavaScript, obiekt DataLayer, do kodu Menedżera tagów Google na stronie z potwierdzeniem zamówienia.

W tym celu będziesz potrzebować następującego kodu.

<script>
   dataLayer.push({     ts_checkout: {       'tsCheckoutOrderNr': '2020-05-21-001',      'tsCheckoutBuyerEmail': 'my-customer@mail.test',        'tsCheckoutOrderAmount': 4005.95           'tsCheckoutOrderCurrency': 'PLN',       'tsCheckoutOrderPaymentType':'ADVANCED PAYMENT',        
}}); </script>

Zanim jednak będzie można go użyć w Menedżerze tagów Google, należy najpierw zastąpić przykładowe wartości zawarte w kodzie odpowiednimi zmiennymi, aby dane były uzupełniane dynamicznie. Aby Ci w tym pomóc, wyjaśnimy tutaj pokrótce ich funkcję.

'tsCheckoutOrderNr': '2020-05-21-001',

Ten parametr przesyła numer zamówienia. Jest to wymagane w celu przypisania przesłanej opinii do konkretnego procesu składania zamówienia. Jeśli numer zamówienia nie jest dostępny, można również przekazać znacznik czasu dla danego zamówienia, o ile to odniesienie jest jednoznaczne.

'tsCheckoutBuyerEmail': 'my-customer@mail.test',

Ten parametr przekazuje adres e-mail klienta. Jest to wymagane, aby wysłać klientowi zaproszenie do wystawienia opinii kilka dni po złożeniu zamówienia lub wysłać e-mail z potwierdzeniem zawartej Ochrony Kupującego.

'tsCheckoutOrderAmount': 4005.95,

Ten parametr przekazuje całkowitą kwotę zamówienia. Jak widać na przykładzie 4005.95, separatorem dziesiętnym jest kropka, a kwota jest podawana z dokładnością do dwóch miejsc po przecinku.

'tsCheckoutOrderCurrency': 'PLN',

Ten parametr przenosi kod waluty zamówienia zgodnie z normą ISO 4217. Jeśli oferujesz tylko jedną walutę, wartość tę można zakodować na stałe.

'tsCheckoutOrderPaymentType': 'ADVANCED PAYMENT',

Ten parametr przekazuje informację o stosowanej metodzie płatności. Wystarczy prosty ciąg tekstowy. Jeśli metoda płatności nie jest już dostępna po zakończeniu zamówienia, słowo OTHER można zakodować na stałe jako wartość tego parametru.

Ponieważ elementy powinny przekazywać dynamiczne szczegóły zamówienia, powyższy przykładowy kod nie powinien być wklejany na stronie z potwierdzeniem zamówienia bez modyfikacji. Zamiast tego wartość każdego przesyłanego parametru zaznaczonego pogrubioną czcionką należy zastąpić odpowiadającymi im zmiennymi w języku programowania używanym przez system sklepu. Na przykład w języku programowania PHP przesyłanie adresu e-mail mogłoby wyglądać tak:

'tsCheckoutBuyerEmail': '?php echo $customer_email; ?'

$customer_email odpowiada adresowi e-mail klienta w systemie sklepu. Dokładną definicję używanych zmiennych należy sprawdzić w dokumentacji systemu sklepu, ponieważ zmienne różnią się w zależności od systemu. W związku z tym nie możemy podać żadnych ogólnych informacji na ten temat.

Po przygotowaniu powyższego kodu należy go skopiować. Następnie należy go umieścić w szablonie strony z potwierdzeniem zamówienia w swoim sklepie.

Czynności te spowodują przesłanie danych z określonego zamówienia do obiektu DataLayer.

Krok 4:

Dzięki zmiennym definiowanym przez użytkownika, Menedżer tagów Google oferuje opcję udostępniania danych z warstwy danych. Aby to zrobić, wybierz pozycję menu „Zmienne” (01_16x16.png) w menu głównym Menedżera tagów Google i kliknij przycisk „Nowa” (02_16x16.png) w obszarze „Zmienne zdefiniowane przez użytkownika”.

Variablen_pl.png

Teraz wprowadź nazwę (01_16x16.png) zmiennej (np. „tsCheckoutOrderNr”), a następnie kliknij opcję „Konfiguracja zmiennej” (02_16x16.png). Następnie wybierz pozycję menu „Zmienna warstwy danych” (03_16x16.png) w menu, które się teraz otworzy.

NeueVariable_Variablekonfigurieren_pl.png

Wprowadź nazwę zmiennej warstwy danych, którą chcesz odczytać w polu wprowadzania „Nazwa zmiennej warstwy danych” (01_16x16.png). W naszym przykładzie chcemy odczytać wartość z parametru numeru zamówienia. Dlatego użyjemy „ts_Checkout.tsCheckoutOrderNr” jako nazwy. Następnie kliknij polecenie „Zapisz” (02_16x16.png), aby utworzyć zmienną.

Datenschichtvariable_Konfiguration_pl.png

Właśnie udało Ci się udostępnić dane z parametru numeru zamówienia. Powtórz ten krok dla pozostałych parametrów. Użyj następujących bloków tekstu jako nazw zmiennych warstwy danych:

  • ts_Checkout.tsCheckoutOrderAmount
  • ts_Checkout.tsCheckoutBuyerEmail
  • ts_Checkout.tsCheckoutOrderPaymentType
  • ts_Checkout.tsCheckoutOrderCurrency

Krok 5:

Teraz możesz używać zmiennych zdefiniowanych w poprzednim kroku w tagach i renderować Checkout-DIV. Najpierw wybierz pozycję menu „Tagi” (01_16x16.png) w menu głównym i kliknij przycisk „Nowy” (02_16x16.png). 

Tags_Neu2_pl.png

Następnie określ nazwę nowego tagu (np. „Trustcard”) (01_16x16.png), a następnie kliknij przycisk „Konfiguracja tagu” (02_16x16.png). Teraz wybierz pozycję menu „Niestandardowy kod HTML” (03_16x16.png) jak w kroku 1.

NeuesTag2_Benutzerdefiniertes-HTML_pl.png

Skopiuj następujący kod HTML i wklej go w polu wprowadzania „HTML” (01_16x16.png)

<script>
var strOut = ''; strOut += '<div id="trustedShopsCheckout" style="display: none;">'; strOut += '<span id="tsCheckoutOrderNr">' + {{tsCheckoutOrderNr}} + '</span>'; strOut += '<span id="tsCheckoutBuyerEmail">' + {{tsCheckoutBuyerEmail}} + '</span>'; strOut += '<span id="tsCheckoutOrderAmount">' + {{tsCheckoutOrderAmount}} + '</span>'; strOut += '<span id="tsCheckoutOrderCurrency">' + {{tsCheckoutOrderCurrency}} + '</span>'; strOut += '<span id="tsCheckoutOrderPaymentType">' + {{tsCheckoutOrderPaymentType}} + '</span>'; strOut += '</div>'; document.write(strOut); </script>

Aktywuj ponownie funkcję „Obsługuj instrukcję document.write” (02_16x16.png), zaznaczając odpowiednie pole wyboru. Następnie kliknij opcję „Ustawienia zaawansowane” (03_16x16.png).

Trustcard_Konfiguration_pl.png

Aby proces ten przebiegał sprawnie, istotną kwestią jest, aby tworzony tag był wyświetlany na stronie z potwierdzeniem zamówienia przed tagiem Trustbadge. Możesz to teraz skonfigurować za pomocą ustawień zaawansowanych. Najpierw kliknij przycisk „Sekwencjonowanie tagów” (01_16x16.png), aby otworzyć dalsze opcje wyboru. Następnie aktywuj wybór „Uruchom tag po uruchomieniu tagu (Trustcard)” (02_16x16.png) i wybierz tag „Trustbadge” utworzony w kroku 1 jako plik „Tag czyszczenia” (03_16x16.png).

Tag-Reihenfolge_pl.png

Następnie kliknij na „Reguly”. Aby mieć pewność, że tag Trustcard, który zamierzasz utworzyć, rzeczywiście będzie się pojawiać tylko na stronie z potwierdzeniem zamówienia, niezbędna będzie konfiguracja nowego wyzwalacza. W tym celu kliknij znak „+”. Wybierz „Wyświetlenia strony” (01_16x16.png) jako typ wyzwalacza. Tag Trustcard nie powinien być wyświetlany na wszystkich stronach. Dlatego musisz wybrać opcję „Niektóre wyświetlenia strony” (02_16x16.png). Następnie możesz zdefiniować regułę (03_16x16.png). Za pomocą dwóch menu rozwijanych, określ „Page URL”„zawiera” jako pierwsze składniki Twojej reguły. Teraz wpisz w polu wprowadzania część adresu URL strony z potwierdzeniem zamówienia, za pomocą której Menedżer tagów Google będzie mógł poprawnie zidentyfikować stronę z potwierdzeniem zamówienia i uruchomić na niej tag Trustcard. Następnie kliknij „Zapisz” (04_16x16.png).

NeuerTrigger_Konfiguration_pl.png

Nastąpi powrót do przeglądu tagów. Tu również kliknij polecenie „Zapisz”, aby zakończyć tworzenie tagu Trustcard.


Czy ten artykuł był pomocny?

Liczba użytkowników, którzy uważają ten artykuł za przydatny: 1 z 1