Jak ręcznie zainstalować Klaviyo.js dla sklepów Shopify

Czego się dowiesz?

Dowiedz się, jak ręcznie zainstalować fragment kodu śledzenia Active on Site Klaviyo, znany również jako lokalny kod JavaScript Klaviyo lub Klaviyo.js, w sklepie Shopify. Zrób to tylko wtedy, gdy masz bardzo duży ruch w witrynie lub strona z innego powodu ładuje się wolno (chociaż Klaviyo niedawno poprawiło czasy ładowania, więc może nie być przyczyną). W przeciwnym razie zalecamy zainstalowanie Klaviyo.js poprzez włączenie osadzenia aplikacji Shopify Klaviyo.

Kilka słów na początek

Jeśli zdecydujesz się ręcznie zainstalować Klaviyo.js i wcześniej było ono włączone przez osadzenie aplikacji Klaviyo, najpierw wyłącz osadzenie aplikacji w ustawieniach motywu Shopify i zapisz zmianę.

Zainstaluj Klaviyo.js w swoim sklepie Shopify

1. Skopiuj poniższy wycinek kodu źródłowego:

<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

1. W wycinku kodu źródłowego koniecznie zamień PUBLIC_API_KEY na swój 6-znakowy publiczny klucz API Klaviyo (identyfikator witryny).
2. Jeśli włączyłeś(-aś) konta klientów w swoim sklepie, użyj pełnego zestawu skryptów poniżej zamiast pierwszego fragmentu, aby identyfikować zalogowanych klientów po ich adresie e-mail. W tej wersji też zastąp PUBLIC_API_KEY swoim publicznym kluczem API:

<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>
<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">
//Customer accounts
var klaviyo = window.klaviyo || [];
if ("{{ customer.email }}") {klaviyo.identify({"$email" : "{{ customer.email }}"})};
</script>

1. Otwórz edytor kodu motywu Shopify, korzystając z instrukcji Shopify dotyczących edytowania kodu motywu.

2. Otwórz szablon Liquid lub sekcję na stronach, na których chcesz używać formularzy Klaviyo i śledzenia. Jeśli strona korzysta z szablonu JSON, dodaj fragment kodu do sekcji Liquid, do której odwołuje się ten szablon, a nie do pliku JSON. Więcej szczegółów zawiera dokumentacja szablonu JSON Shopify.
3. Wklej swój fragment kodu poniżej istniejącego HTML-a w pliku Liquid, poza wszelkimi blokami {% schema %}, {% javascript %} lub {% stylesheet %}. Uwzględnij Klaviyo.js tylko raz na każdej stronie.

4. Kliknij Zapisz.

Przetestuj śledzenie Aktywni na stronie

Aby sprawdzić, czy śledzenie Aktywni na stronie jest prawidłowo skonfigurowane, wykonaj następujące kroki:

1. Przejdź do strony w swoim sklepie, na której zainstalowałeś fragment kodu. Jeśli Twój sklep wymaga zgody na śledzenie Twojej wizyty, udziel jej przed rozpoczęciem testów.
2. Na tej stronie dodaj na końcu adresu URL następujący element, zastępując example@gmail.com swoim adresem e-mail:
   ?utm_email=example@gmail.com
   
   Jeśli adres URL zawiera już znak zapytania (?), zamiast tego dopisz &utm_email=example@gmail.com, używając swojego adresu e-mail.

3. Odśwież stronę.
4. Wyszukaj swój adres e-mail w Klaviyo i otwórz swój profil.
   

Powinien pojawić się profil Klaviyo powiązany z Twoim adresem e-mail (zostanie utworzony, jeśli wcześniej nie istniał). W jego dzienniku aktywności poszukaj zdarzenia aktywne na stronie dotyczącego Twojej wizyty testowej.

Teraz, gdy zainstalowano Klaviyo.js, będzie można korzystać ze śledzenia Active on Site, formularzy rejestracyjnych Klaviyo i nie tylko.

Dodatkowe źródła