Shopify ストア向けに Klaviyo.js を手動でインストールする方法

このページで学べること

Shopify ストアに、Klaviyo の Active on Site トラッキング スニペット（Klaviyo のオンサイト JavaScript または Klaviyo.js とも呼ばれます）を手動でインストールする方法をご覧ください。これは、ウェブ トラフィックが非常に多い場合や、他の理由でサイトの読み込み時間が遅い場合にのみ行ってください（ただし、Klaviyo は最近 読み込み時間を改善しているため、原因ではない可能性もあります）。それ以外の場合は、Klaviyo の Shopify アプリ埋め込みを有効にすることで Klaviyo.js をインストールすることをおすすめします。

始める前に

Klaviyo.js を手動でインストールすることを選択し、以前に Klaviyo のアプリ埋め込みを介して有効にしていた場合は、まず Shopify のテーマ設定でアプリ埋め込みを無効にする必要があります。

Shopify ストアに Klaviyo.js をインストールする

1. 以下のコードスニペットをコピーしてください：

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

1. コードスニペットでは、PUBLIC_API_KEY を 6 桁の Klaviyo 公開 API キーに必ず置き換えてください。
2. ストアで お客様アカウント を有効にしている場合は、ストアへのログインに使用するメールアドレスでお客様を識別できるように、追加のスクリプトを追加してください。スクリプトの完全なセットは次のようになります：

<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. Shopify 管理画面で、[Online Store]＞[Themes] をクリックします。ドロップダウンから [Edit Code] をクリックします。
   

2. スニペットを追加するファイルを検索し、クリックしてエディターで開きます。該当ページで Klaviyo フォームとトラッキングを有効にする場合は、該当する任意のページ テンプレートにスニペットを追加できます。
3. ファイルの一番下までスクロールし、他のコードの下にスニペットを貼り付けてください。
   

4. [保存] をクリックします。

サイト上のアクティブ トラッキングをテストする

Active on Site トラッキングが正しく設定されていることをテストするには、次の手順に従ってください：

1. ウェブサイトに移動します。
2. ストアの URL の末尾に下記を追加し、example@gmail.com の部分を自分のメールアドレスに置き換えてください。
   ?utm_email=example@gmail.com

3. ページを再読み込みします。
4. Klaviyo で自分のメールアドレスを検索します。
   

まだ存在していなかった場合は Klaviyo プロファイルが作成されており、このアクティビティがアクティビティフィードでトラッキングされていることが確認できるはずです。

Klaviyo.js をインストールしたので、Active on Site トラッキング、Klaviyo サインアップフォームなどを利用できるようになります。

その他のリソース