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 Public APIキー（サイトID）に必ず置き換えてください。
2. ストアで顧客アカウントを有効にしている場合は、ログイン済みの顧客をメールアドレスで識別するために、最初のスニペットではなく、以下のスクリプト一式を使用してください。このバージョンのPUBLIC_API_KEYも、公開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. テーマコードを編集するためのShopifyの手順に従って、Shopifyテーマのコードエディタを開いてください。

2. Klaviyoフォームとトラッキングを追加したいページのLiquidテンプレートまたはセクションを開きます。ページでJSONテンプレートを使用している場合は、スニペットをJSONファイルではなく、そのテンプレートで参照されているLiquidセクションに追加してください。詳しくはShopifyのJSONテンプレートドキュメントをご覧ください。
3. Liquidファイル内の既存のHTMLの下に、{% schema %}、{% javascript %}、または{% stylesheet %}ブロックの外側にスニペットを貼り付けてください。各ページにはKlaviyo.jsを1回だけ含めてください。

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

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

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

1. スニペットをインストールしたストア内のページに移動してください。ストアで訪問に対するトラッキングの同意が必要な場合は、テスト前に同意してください。
2. そのページで、example@gmail.comをメールアドレスに置き換えたうえで、URLの末尾に以下を追加してください。
   ?utm_email=example@gmail.com
   
   URLにすでにクエスチョンマーク（？）が含まれている場合は、代わりに&utm_email=example@gmail.comを、メールアドレスを使用して追加してください。

3. ページを再読み込みします。
4. Klaviyoでメールアドレスを検索し、プロファイルを開いてください。
   

メールアドレスに対応するKlaviyoプロファイルが表示されるはずです（まだ存在しない場合は作成されます）。アクティビティログで、テスト訪問のサイトの訪問イベントを探してください。

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

その他のリソース