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ę zainstalować Klaviyo.js ręcznie, a wcześniej było ono włączone za pośrednictwem osadzenia aplikacji Klaviyo, najpierw musisz wyłączyć osadzenie aplikacji w ustawieniach motywu Shopify.

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 pamiętaj, aby zastąpić PUBLIC_API_KEY swoim sześciocyfrowym publicznym kluczem API Klaviyo.
2. Jeśli włączono Konta klientów w sklepie, dodaj dodatkowy skrypt, aby identyfikować klientów na podstawie adresu e-mail używanego do logowania do sklepu. Pełny zestaw skryptów będzie wyglądać następująco:

<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. W panelu administratora Shopify kliknij Sklep internetowy > Motywy. Z listy rozwijanej kliknij Edytuj kod.
   

2. Wyszukaj pliki, do których chcesz dodać fragment kodu, i kliknij je, aby otworzyć w edytorze. Fragment kodu można dodać do dowolnych szablonów stron, na których chcesz włączyć formularze Klaviyo i śledzenie na odpowiednich stronach.
3. Przewiń na dół pliku i wklej swój fragment poniżej pozostałego kodu.
   

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ź na swoją stronę.
2. Na końcu adresu URL swojej strony głównej dodaj następujące elementy, zastępując example@gmail.com swoim adresem e-mail:
   ?utm_email=example@gmail.com.

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

Powinno być widać, że utworzono dla Ciebie profil Klaviyo (jeśli jeszcze nie istniał) i że ta aktywność została wyśledzona w Twoim kanale aktywności.

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