ShopifyにPageSenseスニペットをインストールする

ShopifyにPageSenseスニペットをインストールする

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

あなたがShopifyを使用している場合、自分のオンラインストアを作成し、商品を全世界に販売するプラットフォームで、簡単にPageSenseのスニペットコードをShopifyのウェブサイトに追加できます。これにより、手間のかかるコードの手動追加なしに訪問者のデータを数回のクリックで追跡できます。 PageSenseコードを正常にインストールした後は、ヒートマップ、セッションレコーディング、A/Bテスト、ファネル分析など、PageSenseが提供する様々なサービスを使用して、ウェブページを最適化し、実験を実施することができます。さらに、PageSenseはGoogle分析などの従来の分析ツールとの統合も可能で、ウェブサイトのパフォーマンスについてより包括的な洞察を得ることができます。

Notes

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

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

1. ウェブブラウザ上であなたのZoho PageSense アカウントにアクセスし、スニペットタブをクリックし、コピーをクリックしてプロジェクトのコードを複製します。


2. Shopifyアカウントにhttps://取引先。Shopify。com/store-ログインする'にサインインし、オンラインストアをクリックした後、画面左側にあるテーマをクリックします。



3. それぞれのカスタマイズボタンでもっとをクリックし、編集コードを選択します。



4. 「レイアウト」の下でtheme。liquidを選択し、ページでタグを検索します。

5. コピーしたPageSenseのコードスニペットを手順1の直前に貼り付けます。


Notesメモ:一部のテーマはタグ {/head}, [/header] などの変更版を使用することがあります。[/head]これらはすべて同じ機能を持ちます。
6. 完了したら、ページの右上隅にある「保存」をクリックします。

7. PageSenseコードスニペットがWebサイトで検証された後、Zoho PageSenseで実験を作成したり、Webサイトのメトリクスを追跡したりすることができます。

Shopifyサイトの決済ページにPageSenseコードをインストールする方法

1. 上記をクリックし、「設定>顧客処理>カスタムピクセルを追加。



2. サイトのトラッキングを開始するために、カスタムピクセルに次のコードを挿入します。
  1. const pageSenseScript = ドキュメント。createElement('script');
  2. pageSenseScript。種類 = 'text/javascript';
  3. // 以下のスニペットURLを置き換えます
  4. pageSenseScript。src = '';
  5. ドキュメント。head。appendChild(pageSenseScript);
Info
を下記の PageSenseトラッキングスニペットに置き換えます。Shopifyサイトの追跡を希望する関連プロジェクトから差し込んでください。
  1. // 決済イベントの追跡のために
  2. 分析。サブスクリプション管理('checkout_started', (event) => {
  3. // ここで購入イベントの追跡のためのカスタムゴールコードを使用します
  4. window。pagesense = window。pagesense || [];
  5. window。pagesense。push(['trackEvent', '<決済する-EVENT>']);
  6. });
Info
<決済する-EVENT>を目標のイベント名に置き換えてください。
  1. // 購入イベントと売上目標の追跡のため
  2. 分析。サブスクリプション管理('checkout_completed', (event) => {
  3. const 決済する = event。data。決済する;
  4. const checkoutTotalPrice = 決済する。totalPrice?.金額;
  5. // 売上目標のコードを使用し、以下の<売上-GOAL-ID>を置き換えてください
  6. window。pagesense = window。pagesense || [];
  7. window。pagesense。push(['trackRevenue', '<売上-GOAL-ID>', (checkoutTotalPrice * 100)]);
Info
<売上-GOAL-ID>を売上目標IDに置き換えてください。
これは売上目標IDのサンプルスクリーンショットです:

Info情報: スクリプトが正しく機能しているか確認するために、ブラウザのキャッシュをクリアしてください。
確認メッセージは、Webページのローディングに10秒以上かかる場合、ブラウザーウィンドウに表示されないことに注意してください。しかし、このような場合でも、PageSenseのコード断片のステータスはバックエンドで成功し、あなたのWebサイト上の訪問者のデータを追跡する準備が整っています。

サイト上のコードの存在を手動で確認する方法：
1. 上部の プロジェクト設定をクリックし、プロジェクト情報 タブに移動し、ページに表示されるプロジェクトキーをコピーします。

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

3. 次に、ネットワークタブをクリックし、表示されたフィルターのテキストボックス内にプロジェクトキーを貼り付けます。これは下の図に示されています。

4. プロジェクトキーを入力した後、ページを更新します。キーは下の図のように、最初の位置でJavaScriptとして表示されるはずです。

このガイドが皆さんの作業を簡単にすることを願っています。さらなる明確化が必要な場合や質問がある場合は、いつでもお気軽にメールをサポート@zohopagesense。comにお送りください。