イベントの手動設定

イベントの手動設定のメリット #

イベントのコードを手動で編集し設定することによって、よりイベント設定のカスタム性が高くなります。または有効なイベントを計測する場合（例えばフォーム入力ページでフォーム内容を全て入力して送信ボタンをクリックしたイベントを計測したいとか）、更にビジュアルイベントでは要素のクリックのみ計測されるため、その他場合は手動でのイベント設定することがオススメです。

イベントの手動設定の利用シーン #

• 1フォーム入力完了後の送信ボタンのクリックをイベントとして計測する；もしくは決済完了やログイン成功をイベントとして計測する

※通常ビジュアルイベントとして設定する場合、フォーム内容入力完了していないまま、送信ボタンをクリックした場合もイベントとして計測されます、手動イベントを設定する場合は、フォーム入力成功後、ログイン成功後該当イベントタグを発火するように設定することでうまく計測できます。

• 2滞在時間がX秒以上滞在したらイベントとして計測する
• 3特定期間内のログイン数をイベントとして計測する

イベントの手動設定方法 #

まずはイベントを設定したい場所を特定してください。例えばボタンクリックの場合該当ボタン要素で設定する必要があり、滞在時間がX秒でイベント発火したい場合は該当ページのHTMLソースに滞在時間X秒というロジックのイベントタグを設定します。
イベントタグの形式は以下のようになりますが、お客様のニーズに応じて発火条件などを自由に追加できます。

_pt_sp_2.push('setCustomEvent',{eventName:'イベント名'})

• 1html上で手動イベント設定する場合
  コード例（購入ボタンのクリック数の測定）

  <button id="btnLogin" onclick="_pt_sp_2.push('setCustomEvent',{eventName:'購入 '})">login<button>
  

• 2ネイティブJavaScriptの場合

  document.getElementById('btnLogin').addEventListener('click',function () { 
  
  _pt_sp_2.push('setCustomEvent',{eventName:'購入'});
  
  });
  

その他のJavaScript フレーム／クラスライブラリの使用方法とネイティブJavaScriptは基本同じです。設定イメージとしては下記画像をご参考ください。

Note：
1.タグを追加する場合は半角スペースを入れてください、改行するとタグが実行されないため、改行しないようにご注意ください。
2.解析コード読み込み完了後イベントタグを呼び出す順番であることが前提のため、コーディングイベントでアクセスデータを計測する場合（例えばページ読み込み完了後イベントを発火させる）、イベントを正しく計測するには下記のようにタイマーを追加した上ご利用ください。
setTimeout(function(){
_pt_sp_2.push('setCustomEvent',{eventName:'イベント名'});
},3000)

正しく設定したかチェックしましょう #

イベント設定完了後、タグが正常に発火されるかをチェックしてみましょう。通常ウェブサイトとプロダクト管理画面から確認できます。

ウェブサイトでの確認：
Develop Toolを開き「Network」で「pte」を検索し、イベントを発火して「te」パッケージが入っているかご確認ください。入っている場合は問題なく発火されていることが分かります。更にRequest Payloadの内容をDecodeすることでイベント名も確認できます。

プロダクト内の確認：
プロダクト内で該当イベントのデータが正常に反映されている場合は、イベントも問題なく計測されていることが分かります。