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

Integracja Trustbadge

Krok 1

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

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

Krok 2

W następnym kroku będziesz potrzebować kodu Trustbadge® swojego sklepu. Podstawą Twojego osobistego kodu Trustbadge jest następujący kod integracji:

<script async 
data-desktop-y-offset="0" 
data-mobile-y-offset="0" 
data-desktop-disable-reviews="false" 
data-desktop-enable-custom="false" 
data-desktop-position="right" 
data-desktop-custom-width="156" 
data-desktop-enable-fadeout="false" 
data-disable-mobile="false" 
data-disable-trustbadge="false" 
data-mobile-custom-width="156" 
data-mobile-disable-reviews="false" 
data-mobile-enable-custom="false" 
data-mobile-position="left" 
data-mobile-enable-topbar="false" 
data-mobile-enable-fadeout="true" 
data-color-scheme="light" 
charset="UTF-8" 
src="//widgets.trustedshops.com/js/YOUR_TSID.js"> 
</script>

Znajdź następujący wiersz w kodzie integracji:

src="//widgets.trustedshops.com/js/YOUR_TSID.js">

Wymień pogrubioną sekcję YOUR_TSID na identyfikator Trusted Shops.

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.

Twój kod Trustbadge został utworzony. Jeśli nie dokonasz dalszych korekt, Trustbadge...

... pokaże Twoje zebrane opinie i – po pomyślnej certyfikacji – Twój znak jakości.

... będzie umieszczony po prawej stronie w widoku stacjonarnym, a po lewej w widoku mobilnym.

... będzie wyświetlany 54 piksele nad dolną częścią ekranu w widoku stacjonarnym, a 10 pikseli nad dolną częścią ekranu w widoku mobilnym.

Na tym etapie dostępne są dwie opcje:

Czy te ustawienia Ci odpowiadają? Następnie przejdź bezpośrednio do kolejnych kroków w tym przewodniku.
Czy chcesz wyświetlać Trustbadge w inny sposób lub zintegrować go w innym miejscu w sklepie? W takim przypadku kontynuuj konfigurację kodu Trustbadge, korzystając z tego artykułu: Jak mogę dostosować Trustbadge® do moich potrzeb? Potem wróć do tego produktu i spełnij kolejne kroki.

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

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.

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

Różnią się one w zależności od tego, czy zbierasz tylko opinie dotyczące obsługi, czy zarówno opinie o usługach, jak i o produktach w ramach Trusted Shops. Aby kontynuować, kliknij link, który pasuje do Twojej strony:

Zbieranie opinii dotyczących obsługi

Poniższe kroki opisują, jak zbierać tylko opinie dotyczące obsługi w Trusted Shops. Czy chcesz zbierać też opinie o produktach? Wykonaj kroki opisane tutaj: Zbieranie opinii o usługach i produktach

Krok 1

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”). Trustbadge będzie automatycznie otwierać na tej stronie Trustcard z ofertą Ochrony Kupującego dla zamówienia i/lub prośbą o zgodę na wysłanie przypomnienia o pozostawieniu opinii.

Aby uprościć proces aktywacji Ochrony Kupującego i zaproszenia do wystawienia opinii, niezbędne dane powinny zostać przesłane bezpośrednio z szablonu sklepu do Trustbadge, aby nie trzeba było ponownie wprowadzać ich ponownie. 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 2

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” () w menu głównym Menedżera tagów Google i kliknij przycisk „Nowa” () w obszarze „Zmienne zdefiniowane przez użytkownika”.

Teraz wprowadź nazwę () zmiennej (np. „tsCheckoutOrderNr”), a następnie kliknij opcję „Konfiguracja zmiennej” ().

Aby użyć innych nazw zmiennych, należy odpowiednio dostosować kod w kroku 3.

Następnie wybierz pozycję menu „Zmienna warstwy danych” () w menu, które się teraz otworzy.

Wprowadź nazwę zmiennej warstwy danych, którą chcesz odczytać w polu wprowadzania „Nazwa zmiennej warstwy danych” (). 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” (), aby utworzyć zmienną.

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 poniższej listy, aby nazwać zmienne Menedżera tagów Google w oparciu o nazwy zmiennych warstwy danych:

Nazwa zmiennej Google Tag Manager	Nazwa zmiennej warstwy danych
tsCheckoutOrderNr	ts_checkout.tsCheckoutOrderNr
tsCheckoutOrderAmount	ts_checkout.tsCheckoutOrderAmount
tsCheckoutBuyerEmail	ts_checkout.tsCheckoutBuyerEmail
tsCheckoutOrderPaymentType	ts_checkout.tsCheckoutOrderPaymentType
tsCheckoutOrderCurrency	ts_checkout.tsCheckoutOrderCurrency

Krok 3

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

Następnie określ nazwę nowego tagu (np. „Trustcard”) (), a następnie kliknij przycisk „Konfiguracja tagu” (). Teraz wybierz pozycję menu „Niestandardowy kod HTML” ().

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

<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);

if ("undefined" !== typeof trustbadge) {
trustbadge.remove();
trustbadge.reInitialize();
}
</script>

Aktywuj ponownie funkcję „Obsługuj instrukcję document.write” (), zaznaczając odpowiednie pole wyboru. Następnie kliknij na „Reguły” ().

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świetlenie strony - Element DOM dostępny” () jako typ wyzwalacza. Tag Trustcard nie powinien być wyświetlany na wszystkich stronach. Dlatego musisz wybrać opcję „Niektóre zdarzenia DOM Ready” (). Następnie możesz zdefiniować regułę (). Za pomocą dwóch menu rozwijanych, określ „Page URL” i „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” ().

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

Zbieranie opinii o usługach i produktach

Poniższe kroki opisują, jak zbierać opinie o usługach i produktach za pomocą Trusted Shops. Czy chcesz zbierać tylko opinie dotyczące obsługi? Wykonaj kroki opisane tutaj: Zbieranie opinii dotyczących obsługi

Krok 1

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', 
    'tsCheckoutProducts': [{
      'tsCheckoutProductUrl': 'http://www.shop.url/product1_page.html',
       'tsCheckoutProductImageUrl': 'http://www.shop.url/image1.png',
       'tsCheckoutProductName': 'Product Name 1',
       'tsCheckoutProductSKU': '0123456789',
       'tsCheckoutProductGTIN': '0123456789',
       'tsCheckoutProductBrand': 'Mega Corp.',
     },
     {
       'tsCheckoutProductUrl': 'http://www.shop.url/product2_page.html',
       'tsCheckoutProductImageUrl': 'http://www.shop.url/image2.png',
       'tsCheckoutProductName': 'Product Name 2',
       'tsCheckoutProductSKU': '987654321',
       'tsCheckoutProductGTIN': '987654321',
       'tsCheckoutProductBrand': 'Mega Corp.',
     }
   ]
  }});
</script>

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

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

'tsCheckoutOrderAmount': 4005.95,

'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',

'tsCheckoutProducts'

Ten parametr zawiera podsumowanie danych, które są niezbędne do zbierania opinii o produktach.

'tsCheckoutProductUrl': 'http://www.shop.url/product1_page.html',

Ten parametr służy do przekazania pełnego linku do strony zawierającej szczegóły na temat produktu.

'tsCheckoutProductImageUrl': 'http://www.shop.url/image1.png',

Ten parametr pozwala na przekazanie adresu URL zdjęcia produktu. Jest ono widoczne w kwestionariuszu opinii i ułatwia zapamiętanie produktu. Zalecamy wysyłanie odpowiednich adresów URL, ponieważ zgodnie z naszym doświadczeniem konwersja jest wówczas znacznie wyższa.

'tsCheckoutProductName': 'Product Name 1',

Ten parametr przesyła nazwę produktu.

'tsCheckoutProductSKU': '0123456789',

Ten parametr służy do przekazania kodu SKU (Stock Keeping Unit) — numeru produktu nadanego przez Twój sklep.

'tsCheckoutProductGTIN': '0123456789',

Ten parametr odpowiada za przekazanie globalnego numeru jednostki handlowej (GTIN). Numer GTIN jednoznacznie identyfikuje produkt na całym świecie, więc jego przesłanie bardzo ułatwia Google przypisanie zebranych przez Ciebie opinii do właściwego produktu. Dlatego też użycie tego parametru jest wymagane, jeśli korzystasz z integracji z Google i prowadzisz kampanie przy użyciu Zakupów Google i Google Ads.

'tsCheckoutProductBrand': 'Mega Corp.',

Ten parametr przenosi markę produktu. Pomaga on — podobnie jak numer GTIN — jednoznacznie zidentyfikować produkty i poprawnie przekazać zebrane oceny do Google.

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

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 2

Teraz wprowadź nazwę () zmiennej (np. „tsCheckoutOrderNr”), a następnie kliknij opcję „Konfiguracja zmiennej” ().

Aby użyć innych nazw zmiennych, należy odpowiednio dostosować kod w kroku 3.

Następnie wybierz pozycję menu „Zmienna warstwy danych” () w menu, które się teraz otworzy.

Nazwa zmiennej Google Tag Manager	Nazwa zmiennej warstwy danych
tsCheckoutOrderNr	ts_checkout.tsCheckoutOrderNr
tsCheckoutOrderAmount	ts_checkout.tsCheckoutOrderAmount
tsCheckoutBuyerEmail	ts_checkout.tsCheckoutBuyerEmail
tsCheckoutOrderPaymentType	ts_checkout.tsCheckoutOrderPaymentType
tsCheckoutOrderCurrency	ts_checkout.tsCheckoutOrderCurrency
tsCheckoutProducts	ts_checkout.tsCheckoutProducts

Krok 3

Następnie określ nazwę nowego tagu (np. „Trustcard”) (), a następnie kliknij przycisk „Konfiguracja tagu” (). Teraz wybierz pozycję menu „Niestandardowy kod HTML” ().

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

<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>';

var list = {{tsCheckoutProducts}}
list.forEach(function perProduct(product) {
  strOut += '<span class="tsCheckoutProductItem">';
  strOut += '<span class="tsCheckoutProductUrl">' + product.tsCheckoutProductUrl + '</span>';
  strOut += '<span class="tsCheckoutProductImageUrl">' + product.tsCheckoutProductImageUrl + '</span>';
  strOut += '<span class="tsCheckoutProductName">' + product.tsCheckoutProductName + '</span>';
  strOut += '<span class="tsCheckoutProductSKU">' + product.tsCheckoutProductSKU + '</span>';
  strOut += '<span class="tsCheckoutProductGTIN">' + product.tsCheckoutProductGTIN + '</span>';
  strOut += '<span class="tsCheckoutProductBrand">' + product.tsCheckoutProductBrand + '</span>';
  strOut += '</span>';
});

strOut += '</div>';

document.write(strOut);

if ("undefined" !== typeof trustbadge) {
  trustbadge.remove();
  trustbadge.reInitialize();
}
</script>

Aktywuj ponownie funkcję „Obsługuj instrukcję document.write” (), zaznaczając odpowiednie pole wyboru. Następnie kliknij na „Reguły” ().

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

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

Integracja Trustbadge

Krok 1

Krok 2

Zbieranie opinii dotyczących obsługi

Krok 1

Krok 2

Krok 3

Zbieranie opinii o usługach i produktach

Krok 1

Krok 2

Krok 3

Spis treści

Pytania lub prośby o funkcje?

Jesteśmy tutaj, aby pomóc!

Integracja Trustbadge

Krok 1

Krok 2

Zbieranie opinii dotyczących obsługi

Krok 1

Krok 2

Krok 3

Zbieranie opinii o usługach i produktach

Krok 1

Krok 2

Krok 3

Powiązane artykuły

Spis treści

Pytania lub prośby o funkcje?

Jesteśmy tutaj, aby pomóc!