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, możesz pominąć te kroki i przejść do sekcji dotyczącej tworzenia 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 wyzwalacz dla śledzenia Klaviyo Aktywni w witrynie. Zalecamy utworzenie osobnego wyzwalacza dla śledzenia Aktywni w witrynie i Wyświetlono produkt. Wynika to z tego, że śledzenie Wyświetlono produkt będzie uruchamiać się tylko na stronach produktów, natomiast śledzenie Aktywni w witrynie powinno uruchamiać się na każdej stronie witryny.
2. Wybierz Niestandardowy HTML jako typ znacznika.

3. Aby znaleźć fragment Active on Site w Klaviyo, kliknij menu konta i wybierz Integracje.
4. Następnie kliknij przycisk Skonfiguruj śledzenie aktywności na stronie w prawym górnym rogu.

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 nowy znacznik. To kończy dodawanie fragmentu kodu śledzenia Aktywni w witrynie za pomocą Google Tag Manager.

Możesz dodać fragment kodu Viewed Product, korzystając z tej samej metody. Zmodyfikuj wyzwalacz, aby uruchamiał się tylko na stronach zawierających Twoje produkty. W niektórych witrynach można to zrobić, ograniczając wyzwalacz tak, aby uruchamiał się tylko na stronach, których adres URL zawiera słowo „product”.

Testowanie śledzenia aktywności na stronie

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

?utm_email=klaviyogreen@gmail.com

Możesz zastąpić "klaviyogreen@gmail.com" własnym adresem e-mail. Naciśnij Enter, aby odświeżyć stronę.

3. Następnie na koncie Klaviyo przejdź do Pulpit > Kanał aktywności. Jeśli śledzenie na stronie jest zainstalowane poprawnie, u góry kanału aktywności zobaczysz nowe zdarzenie Active on Site z adresu e-mail wpisanego w powyższym parametrze URL.

Jeśli masz problem z uruchomieniem zdarzenia Viewed Product, upewnij się, że znaczniki są skonfigurowane tak, aby uruchamiały się w określonej kolejności. Zawsze należy dopilnować, aby fragment Active on Site uruchamiał się przed fragmentem Viewed Product.

Jeśli podczas próby zapisania któregokolwiek z fragmentów kodu śledzenia w Google Tag Manager pojawi się błąd, trzeba będzie wkleić fragmenty kodu bezpośrednio w witrynie.

Korzystanie z zarządcy znaczników Google w Shopify

W przypadku Shopify zamiast używać Zarządcy znaczników Google zachęcamy do włączenia śledzenia onsite w Klaviyo za pomocą osadzenia aplikacji Klaviyo w Shopify. Osadzenie aplikacji umożliwia śledzenie zarówno aktywni on Site, jak i Viewed Product, pod warunkiem że jest włączone i że ustawienie Viewed Product jest zaznaczone na stronie ustawień integracje. Nasza integracje z Shopify umożliwia też Submitted Search, Viewed Collection i Added to Cart za pomocą ustawienia Track behavioral events.

Jeśli zamiast tego chcesz dodać śledzenie w witrynie przez Google Tag Manager, upewnij się, że najpierw wyłączysz osadzanie aplikacji. Następnie użyj poniższego fragmentu kodu.

„Kolekcje” nie są dostępne przez AJAX API Shopify, więc zamiast tego w poniższym fragmencie kodu przechwytywane są znaczniki produktów Shopify (znaczniki).

<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 || [];
product_handle = location.href.split( '/' ).pop().split( '?' )[0];
fetch('/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.Categories,
    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>