GTMを介してZoho PageSenseのカスタムイベントを実装する

GTMを介してZoho PageSenseのカスタムイベントを実装する

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


PageSenseのカスタムイベント機能を使用すると、クリックやページビューに限定されないウェブサイト上の訪問者のアクションを追跡・記録することができます。これは、イベントやタスクの成功時に新しい目的地ページURLや確認ページURLが生成されないウェブページでのユーザーの相互作用を追跡することが主な目的です。です。
たとえば、ウェブサイトには、お問い合わせフォームがありますが、フォームの送信後に訪問者を個別の確認ページに送らない場合があります。この場合、PageSenseでカスタムイベントを実装して、フォームの成功した送信を追跡することができます。単にボタンのクリックだけでなく、このフォームの成功した送信を追跡することができます。また、サイトには複数のステップからなるサインアップフォームが添付されていますが、残念ながらページのURLは変わりません。この場合、フォームが正常に送信されたかどうかを追跡するために、カスタムイベントを実装することができます。

Zoho PageSenseとの統合にGTMを使用している場合、GTMで個別のタグとトリガー条件を設定することで、ウェブサイト上でさまざまなPageSenseカスタムイベントやユーザーのインタラクションを簡単に追加して追跡することができます。特定のカスタムイベントタグがGTMでトリガーされるたびに、それに対応するPageSenseカスタムイベントが実行され、実験レポートに成功したコンバージョンが記録されます。

カスタムイベントがトリガーされるすべてのウェブページに、PageSenseのトラッキングスニペットを追加してください。

GTMにPageSenseカスタムイベントコードを追加するには:

1. Google Tag Managerのアカウントにログインします。左のペインに移動し、Tagsをクリックし、Newボタンを右上隅にクリックします。

2. 無題の変数フィールドに、トラッキングしたいカスタムイベントに関連するタグ名を入力します。
例えば、ショッピングサイトの「カートに追加」ボタンをクリックした場合に、固有の確認ページのURLやチェックアウトページに移動しない場合でも、そのクリックをトラッキングしたいとします。その場合、「カートに追加 - PageSenseカスタムイベント」と呼びます。



3.
タグの設定アイコンをクリックし、カスタムHTMLをタグの種類として選択します。


4. 以下に示すように、PageSenseで生成されたカスタムイベントコードスニペットをHTMLウィンドウ内にコピー&ペーストします。

以下は、PageSenseで生成されたコードの例であり、ページ上でカスタムクリックイベントの目標をトリガーするために必要です。 カスタムイベントの目標の作成方法PageSenseでカスタムイベントの目標を作成する方法

<script>
window.pagesense = window.pagesense || [];
window.pagesense.push(['trackEvent', 'カートに追加']);
</script>
 


また、ここには、PageSenseで生成されたコードの例があります。このコードは、ウェブページ上でカスタムフォームの送信イベントをトリガーするために必要です。カスタムフォームイベントの作成方法をPageSenseで学ぶ
<script>
window.pagesense = window.pagesense || [];

window.pagesense.push(['trackEvent', 'submit']);
window.pagesense.push(['trackEvent', 'submit']);
</script>


5. トリガーアイコンをクリックし、使用ケースに適したトリガータイプを選択してください。
トリガータグをトリガーするために使用できる14のデフォルトトリガーがあります。さらに、GTMではこれらのトリガーを組み合わせて、堅牢な制御と詳細な発火を行うことができます。



では、トリガータイプの選び方を理解するために、2つの異なる例を見てみましょう。
例01:シングルページアプリケーションでのボタンクリックのトラッキング
上記の例を再考しましょう。例えば、ショッピングサイトに「カートに追加」ボタンがあり、このCTAは、商品がカートに追加された後にオーバーレイポップアップを表示するか、画面上にメッセージを表示するだけです。今、このボタンの成功したクリック数を知りたいとしますが、これらはチェックアウトや確認ページのURLにリダイレクトしないためです。




この場合、ショッピングサイトの「カートに追加」ボタンのコンバージョン数を追跡するために、
トリガータイプとして全ての要素を選択します。以下に説明します。
  1. C右上隅のプラスアイコン(+)をクリックし、トリガーの名前を入力し、トリガータイプを「全ての要素」に設定します。 


  2. いくつかのクリックを選択します(特定のクリックを追跡するミッションをすでに設定しているため) そして、以下の条件と定義を指定します:クリック要素---> CSSセレクタに一致 ---> 要素のセレクタをコピーして貼り付けてください。



    ウェブページから要素セレクタをコピーするには、追跡したいCTA要素を右クリックして、
    を選択します。検査。再度、ハイライトされたコードを右クリックし、セレクタをコピーを選択し、図に示されているように値ボックスに貼り付けます。


    これで、GTMを介して設定されたカスタムイベントタグが、訪問者がウェブサイトの「カートに追加」ボタンをクリックすると、PageSenseでクリックイベントの目標がトリガーされます。これにより、PageSenseの実験レポートには、サイトに訪れる訪問者の総数と、このCTAをクリックした訪問者の割合が記録されます。

    さらに、レポートでは、フィルタリングやセグメント化も可能です。
    さまざまな対象基準やカート内のアイテムの種類(サイズ、色、製品モデルなど)に基づいたデータを提供します。 使用する要素をクリックGTMのトリガータイプ、カートから商品を削除したり、ウィッシュリストに商品を追加したり、商品を返品または交換したりするなど、ECサイトでの他の重要なユーザーアクションも追跡することができます。
同様に、GTMを使用してカスタムなファネルイベントを実装することができます。Click - All Element トリガータイプを使用して、コンバージョンプロセスの各段階を完了する訪問者の数を追跡することができます。
たとえば、ショッピングウェブサイトにバイヤーのジャーニーファネルがあり、潜在的な顧客が4つのステージを経て購入を完了する必要があるとします:ホームページ→商品ページ→カートページ→チェックアウトページ。今、製品の購入が成功した場合に「ありがとう」のページや確認ページのURLにリダイレクトせず、同じURLで「ありがとう」のポップアップメッセージを表示するチェックアウトボタンのクリックを追跡したいとします。
この場合、ショッピングサイトの「チェックアウト」ボタンにカスタムなクリックイベントトリガーを設定して、以下の図に示すようにファネルの完了を追跡することができます。また、各ステップごとに異なるトリガーを作成することもできます。各ステップのボタンをクリックすることでトリガーが起動します。


例02:データレイヤーイベントを使用したフォームの送信を追跡する方法(固有の確認ページや「ありがとうございました」ページのURLがない場合)。
ウェブサイトには、訪問者がフォームを送信した後に固有の確認ページや「ありがとうございました」メッセージページに移動しない「お問い合わせ」フォームがあるとします。今、フォームを記入している訪問者による実際の送信と放棄率を追跡したいと思います。


この場合、カスタムイベントをトリガータイプとして選択し、以下に説明する通り、成功したお問い合わせフォームの送信を追跡できます。
  1. 右上隅のプラスアイコン(+)をクリックし、トリガータイプをカスタムイベントとして選択します。
  2. イベント名フィールドにフォームイベントの名前を入力します。たとえば、コンタクトフォームの場合は「contactFormSubmission」を入力し、すべてのカスタムイベントを選択します。

さらに、ウェブサイト上のお問い合わせフォームの「送信」ボタンのPOST成功関数に、以下のハイライトされたコードを追加する必要があります。

以下は、ウェブサイトのお問い合わせページの「送信」ボタンの成功関数のコードの例です。このコードをサイトに追加する際には、「GTMのトリガー設定」の下にすでに記載されているイベント名を提供していることを確認してください(例:'Event': 'contactFormSubmission')

<スクリプト>

      function submitForm() {

      フォームを送信する関数() {

      var xhttp = new XMLHttpRequest();

      var xhttp = new XMLHttpRequest();

      xhttp.onreadystatechange = function() {

      xhttp.onreadystatechange = function() {

            if (this.readyState == 4 && this.status == 200)
            {
            if (this.readyState == 4 && this.status == 200)
            {

     window.dataLayer.push
({

ウィンドウ.データレイヤー.プッシュ

     'event':''contactFormSubmission''

 });

 });

 }

 }

 };

 };

  xhttp.open('GET', '/', true);

  xhttp.open('GET', '/', true);

  xhttp.send();

  xhttp.send();

}

}

</script>

</script>

訪問者がフォームを送信すると、それに応じてカスタムフォームのイベントがトリガーされます。 PageSenseで、異なるフォーム(およびフィールド)のメトリクスを記録できます。例えば、訪問者の総数、成功した送信数、失敗した送信数、フォームの放棄率、フォームに費やされた平均時間など、PageSenseの実験レポートの中でさまざまな情報を取得できます。

6. タグとトリガー条件の設定が完了したら、保存を右上隅にクリックしてください。



7. 今、右上隅の送信ボタンをクリックし、変更内容のバージョン名と説明を入力してください。
また、プレビューボタンをクリックして、基本的なエラーがないか、特定のクリックでタグが起動するかを確認することで、実際に公開する前にタグをチェックすることもできます。
8. 最後に、公開をクリックして、タグを公開し、実験ページでカスタムイベントコードをトリガーします。