Jak dodać śledzenie Klaviyo na stronie za pomocą Menedżera tagów Google

Czego się dowiesz?

Dowiedz się, jak dodać do witryny snippety śledzenia na stronie Klaviyo za pomocą Menedżera tagów Google. Niektórzy właściciele witryn używają Google Tag Manager jako jednego punktu do zarządzania wszystkimi zewnętrznymi fragmentami kodu web, które muszą dodać do swojej witryny. Śledzenie na stronie Klaviyo należy do tej kategorii i można je dodawać oraz zarządzać nim za pomocą Menedżera tagów Google.

Kilka słów na początek

Konfigurowanie Menedżera tagów Google

Jeśli masz już utworzone konto Google Tag Manager i masz zainstalowany jego kontener w swojej witrynie, możesz pominąć te kroki i przejść do sekcji o tworzeniu znacznika.
1. Utwórz konto Google Tag Manager.
2. Dodaj skrypty instalacyjne do swojej witryny.

Jeśli dopiero zaczynasz korzystać z Menedżera znaczników Google, zapoznaj się z ich dokumentacją dotyczącą konfiguracji konta i dodania skryptów instalacyjnych do swojej witryny.

Tworzenie nowego znacznika

1. W obszarze roboczym Twojej witryny utwórz nowy znacznik do śledzenia Klaviyo Aktywni w witrynie. Zalecamy utworzenie osobnych znaczników i wyzwalaczy dla śledzenia Aktywni w witrynie oraz Wyświetlony produkt. Dzieje się tak, ponieważ śledzenie Wyświetlony produkt uruchomi się tylko na stronach produktów, natomiast śledzenie Aktywni w witrynie powinno uruchamiać się na każdej stronie Twojej witryny.
2. Wybierz Niestandardowy kod HTML jako typ znacznika.

3. W Klaviyo w pasku bocznym wybierz Integracje.
4. Wybierz Zarządzaj danymi > Skonfiguruj śledzenie aktywności na stronie.

Jeśli pojawi się taka prośba, wybierz Skonfiguruj ręcznie, a następnie Dalej, aby wyświetlić fragment kodu. Jeśli zamiast tego ekran konfiguracji wyświetla instrukcje dotyczące Twoich integracji e-commerce, użyj ręcznego fragmentu kodu Aktywni na stronie i zgodnie z instrukcjami zastąp w nim symbol zastępczy publicznego klucza API.

6. W Zarządcy znaczników Google wklej fragment kodu Klaviyo Active on Site do pola HTML.

7. Ustaw wyzwalacz tak, aby uruchamiał się przy wyświetleniu strony dla wszystkich stron. Dzięki temu fragment kodu Active on Site będzie uruchamiał się za każdym razem, gdy klienci wyświetlą stronę w Twojej witrynie.

8. Zapisz swój nowy znacznik. Wyświetl podgląd zmian, aby sprawdzić, czy znacznik się uruchamia, a następnie opublikuj kontener, aby włączyć śledzenie na swojej stronie. Samo zapisanie znacznika nie spowoduje jego opublikowania.

Możesz dodać fragment Viewed Product tą samą metodą. Użyj fragmentu dla swojej platformy e-commerce z przewodnika śledzenia Viewed Product. Zmodyfikuj wyzwalacz, aby uruchamiał się tylko na stronach ze szczegółami produktu. W niektórych witrynach można to osiągnąć, ograniczając wyzwalacz tak, aby uruchamiał się tylko na stronach, na których adres URL zawiera słowo "product". Sprawdź, czy Twoja reguła pasuje tylko do stron ze szczegółami produktu, a następnie zapisz, podejrzyj i opublikuj znacznik.

Testowanie śledzenia aktywności na stronie

1. Przejdź do swojej witryny.
2. Dodaj na końcu adresu URL:

?utm_email=klaviyogreen@gmail.com

Zastąp "klaviyogreen@gmail.com" własnym adresem e-mail przed wczytaniem adresu URL. Jeśli adres URL zawiera już ?, zamiast tego dopisz &utm_email=your-email@example.com. Umieść parametr przed dowolnym fragmentem #, a następnie naciśnij Enter, aby ponownie wczytać stronę.

3. W Klaviyo przejdź do Analytics > Metryki, wybierz Aktywni na stronie i otwórz kanał aktywności. Znajdź zdarzenie powiązane z adresem e-mail, którego użyłeś w adresie URL.

4. Jeśli dodasz śledzenie Viewed Product, odwiedź stronę szczegółów produktu w tej samej przeglądarce. W Klaviyo otwórz Analytics > metryki, wybierz Viewed Product i sprawdź Activity feed, aby zobaczyć swoje zdarzenie testowe i szczegóły produktu.

Jeśli masz problem z uruchomieniem zdarzenia Viewed Product, upewnij się, że twoje znaczniki są skonfigurowane tak, aby uruchamiały się w określonej kolejności. Zawsze chcesz, aby fragment kodu aktywni on Site uruchamiał się przed fragmentem kodu Viewed Product. Postępuj zgodnie z instrukcjami Google dotyczącymi sekwencjonowania znaczników, aby ustawić kolejność.

Jeśli Google znacznik zarządca zgłasza błąd podczas zapisywania fragmentu kodu, sprawdź kod pod kątem wymagań Google dotyczących niestandardowego kodu HTML. Jeśli nie możesz rozwiązać tego błędu, zamiast tego możesz zainstalować fragmenty kodu bezpośrednio w swojej witrynie.

Korzystanie z zarządcy znaczników Google w Shopify

W przypadku Shopify zamiast korzystać z Google znacznik zarządca zachęcamy do włączenia śledzenia onsite w Klaviyo przez osadzenie aplikacji Klaviyo w Shopify. Osadzenie aplikacji umożliwia śledzenie zarówno aktywni on Site, jak i Viewed Product, pod warunkiem że osadzenie aplikacji jest włączone oraz że w ustawieniach integracje jest zaznaczone ustawienie Dodaj śledzenie Viewed Product do mojej witryny. Nasze integracje Shopify umożliwiają też Submitted Search, Viewed Collection oraz Added to Cart za pomocą ustawienia Śledź zdarzenia behawioralne.

Jeśli zamiast tego chcesz dodać śledzenie na stronie za pomocą Google znacznika zarządcy, najpierw wyłącz przełącznikiem osadzenie aplikacji. Skonfiguruj znacznik aktywni on Site z powyższych kroków, aby wczytać Klaviyo.js na wszystkich stronach. Następnie dodaj poniższy fragment kodu jako osobny znacznik Viewed Product, który uruchamia się tylko na stronach szczegółów produktu, po znaczniku bazowym. Ten fragment kodu nie wczytuje samego Klaviyo.js. Zapisz, wyświetl podgląd i opublikuj oba znaczniki, a następnie ukończ oba powyższe testy śledzenia.

Użyty poniżej punkt końcowy produktu Shopify zwraca znaczniki produktu, a nie przynależność do kolekcji, więc fragment kodu przechwytuje Tags zamiast kolekcji.

<script type="text/javascript"> 
//Initialize the Klaviyo object on page load
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>
<script type="text/javascript">
//Viewed Product
var klaviyo = window.klaviyo || [];
var product_handle = location.pathname.replace(/\/$/, '').split('/').pop();
fetch(window.Shopify.routes.root + 'products/' + product_handle + '.js').then(function(response){return response.json()})
.then(function(product){
  var item = {
    Name: product.title,
    ProductID: product.id,
    Tags: product.tags,
    ImageURL: "https:"+product.featured_image,
    URL: location.href.split( '/' )[0] + '//' + location.href.split( '/' )[2]+product.url,
    Brand: product.vendor,
    Price: product.price/100,
    CompareAtPrice: product.compare_at_price_max/100
  };
  klaviyo.track("Viewed Product", item);
  klaviyo.trackViewedItem({
    Title: item.Name,
    ItemId: item.ProductID,
    Tags: item.Tags,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    Metadata: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  });
// If you would like to add the Added to Cart snippet as well, place that here without its script tags
})
.catch(function(e){
  console.log('Klaviyo could not track Viewed Product. Please contact Klaviyo Support for assistance.')
});
</script>

Dodatkowe źródła