キャンペーンにおけるボタンクリックのイベント設定

利用シーン #

本文章ではExperienceキャンペーンの一つクリエイティブで複数ボタンを設定した場合、それぞれボタンのクリック数をカウントできる方法を紹介します。ボタンクリックをイベントとして設定することで、クリック数でどのボタンが効果良かったかを検証できるようになります。

ソリューション #

  • 1まずはボタンのクリックをコードモードを利用しそれぞれイベントとして設定します。
  • 2イベントをゴールとして設定することで、レポートから直接それぞれボタンのクリック数を確認できます。
  • 3更に取得したイベントを利用し、ユーザーグループにイベントを絞ることで発火したユーザーの情報も把握可能です。


さて、早速下記内容でコードモードにおけるイベントの設定方法を詳しく紹介します。

イベント設定方法 #

  • 1まずはキャンペーンを設定します(クリエティブでボタンを設定します)。
  • 2ボタン設定完了後、キャンペーンのプレビュー機能で該当キャンペーンを表示させます。
  • 3プレビューページでDeveloper toolを開き、「Elements」でそれぞれボタンの要素を見つけ出し、「data-silex-id="xxxxx"」というセレクターをコピーします。
  • 4以下のように下記タグを修正します。

    1.document.querySelector("[id^=ptxEngage_popup_] [xxxxx]");の[xxxxx]は先ほど取得したセレクターへ差し替えてください。なお入れる際にセレクターにある「""」は削除してください。
    2.ptengine.track('');の('')にイベント名を入れてください。イベントは自由に設定できますが、重複しないようご注意ください。

    Note:複数ボタン設定する場合、以下タグを複数コピーした上、それぞれボタンのセレクターとイベント名を入れてください。

    (function() {
        var waitter = setInterval(function() {
            var btn = document.querySelector("[]");
            if (btn) {
                clearInterval(waitter);
                btn.addEventListener('click', function() {
                    window.ptengine && window.ptengine.track('');
                });
            }
        }, 50);
        })();
  • 5コードモードに上記準備したタグを入れて、キャンペーンを保存してください。これで設定完了です。

この記事についてどう思いますか?

  • いいですね!
  • よくないです

評価いただきありがとうございました

  申しわけありません!理由を教えてください。

    サポートチームに直接問合せたい場合、こちらをクリックしてチャットしましょう