ShopifyへのPageSenseスニペットの設置

ShopifyへのPageSenseスニペットの設置

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

オンラインストアを開設して世界中に商品を販売できるeコマースプラットフォーム「Shopify」を使用している場合、コードを手動で追加することなく、数回クリックするだけでShopifyのWebサイトにPageSenseのコードスニペットを追加し、訪問者データの追跡を開始できます。PageSenseのコードを正常にインストールすると、ヒートマップ、セッション録画データ、A/Bテスト、ファネル分析など、PageSenseが提供するさまざまなサービスを通じてテストを実施し、Webページを最適化できます。また、PageSenseはGoogle アナリティクスなどの従来の分析ツールとも連携できるため、Webサイトのパフォーマンスについて、より詳細な分析情報を得られます。

Notes

重要：Shopifyでは、チェックアウトでのサードパーティースクリプトの使用が許可されていません。PageSenseのコードをインストールした場合、ストアフロントと注文確認ページのみ追跡できます。

ShopifyのすべてのページにZoho PageSenseのコードをインストールするには

1. WebブラウザーでZoho PageSenseアカウントを開き、上部バーの［コードスニペット］タブをクリックして、［コピー］をクリックし、プロジェクトのコードをコピーします。


2. Shopifyアカウント「https://accounts.shopify.com/store-login」にログインし、左側のペインで［オンラインストア］、［テーマ］の順にクリックします。



3. ページの［カスタマイズ］ボタンの横にある［その他のオプション］をクリックし、［コードを編集］を選択します。



4. ［レイアウト］で［theme.liquid］を選択し、ページ内で</head>タグを検索します。

5. 上記の手順1でコピーしたPageSenseのコードスニペットを、</head>タグの直前に貼り付けます。


Notesメモ：テーマによっては、{/head}、[/header]、または[/head]の別のバリエーションが使用されます。いずれも同じように機能します。
6. 完了したら、ページの右上にある［保存］をクリックします。

7. Webサイト上でPageSenseのコードスニペットが検証されると、Zoho PageSenseでテストを作成し、Webサイトの指標を追跡できるようになります。

ShopifyサイトのチェックアウトページにPageSenseのコードをインストールするには

1. ［設定］→［顧客イベント］→［カスタムピクセルを追加］の順にクリックします。



2. サイトの追跡を開始するには、以下のコードをカスタムピクセル内に追加します。
  1. const pageSenseScript = document.createElement('script');
  2. pageSenseScript.type = 'text/javascript';
  3. // 以下のコードスニペットURLを置き換えます
  4. pageSenseScript.src = '<SNIPPET_SRC>';
  5. document.head.appendChild(pageSenseScript);
Info
<SNIPPET_SRC>を、Shopifyサイトの追跡に使用する関連プロジェクトのPageSense追跡用コードスニペットに置き換えます。
  1. // チェックアウトイベントを追跡する場合
  2. analytics.subscribe('checkout_started', (event) => {
  3. // 購入イベントを追跡するカスタム目標コードをこちらに入力します
  4. window.pagesense = window.pagesense || [];
  5. window.pagesense.push(['trackEvent', '<CHECKOUT-EVENT>']);
  6. });
Info
<CHECKOUT-EVENT>を目標のイベント名に置き換えます。
  1. // 購入イベントと売上目標を追跡する場合
  2. analytics.subscribe('checkout_completed', (event) => {
  3. const checkout = event.data.checkout;
  4. const checkoutTotalPrice = checkout.totalPrice?.amount;
  5. // 売上目標コードを使用し、以下のREVENUE-GOAL-IDを置き換えます
  6. window.pagesense = window.pagesense || [];
  7. window.pagesense.push(['trackRevenue', '<REVENUE-GOAL-ID>', (checkoutTotalPrice * 100)]);
Info
<REVENUE-GOAL-ID>を売上目標IDに置き換えます。
売上目標IDのサンプル画像は次のとおりです。

Info情報：スクリプトが正しく動作するように、ブラウザーのキャッシュをクリアしてください。
Webページの読み込みに10秒以上かかる場合、ブラウザー画面に検証メッセージは表示されません。ただし、この場合でもバックエンドではPageSenseコードスニペットのステータスが「成功」となり、Webサイトの訪問者データを追跡できる状態になります。

サイト上のコードを手動で検証するには
1. 上部バーの［プロジェクト設定］をクリックし、［プロジェクト情報］タブに移動して、ページに表示されているプロジェクトキーをコピーします。

2. Webサイトをブラウザーで開き、ページを右クリックして、メニューから［検証］を選択します。

3. 次に、［ネットワーク］タブをクリックし、図のように［フィルター］テキストボックスにプロジェクトキーを貼り付けます。

4. プロジェクトキーを入力してページを更新すると、以下のように該当するJavaScriptが先頭に表示されます。

このドキュメントが、作業をスムーズに進めるためのお役に立てば幸いです。詳しい説明が必要な場合や質問がある場合は、いつでもメールアドレスsupport@zohopagesense.comまでお気軽にお問い合わせください。