2-2．イベントトラッキングコードの設置

概要

pottosのイベントトラッキングコードを貴社サービスに設置し、顧客のサービス利用データ（ボタンクリックなど）を計測します。

◆注意
イベントトラッキングはトラッキングで設定されたトークン情報などを利用するため、対象のページにはトラッキングコードが設定され、トラッキングが正常に動作している必要があります。

1．イベントトラッキングコードの設置

1-A．イベントトラッキング例

以下はYahooホームページに遷移する「Yahoo!」ボタンと、コンソールにログを出力する「OUTPUT LOG!」ボタンが並んだページの例です。

<!DOCTYPE html>
<html lang="ja">
　<head>
　　<title>テスト</title>
　　<meta charset="utf-8" />
　　<meta name="viewport" content="width=device-width,initial-scale=1.0" />
　</head>
　<body>
　　<br /><br />
　　<button onclick="pottos('event', 'button_click', 'goto_yahoo');location.href='https://www.yahoo.co.jp/';">Yahoo!</button><br />
　　<br /><br />
　　<button id="log_button">OUTPUT LOG!</button><br />
　　<br /><br />
　　<script>
　　　!function(e,n,t,c,s,a,o){e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,a=n.createElement(t),o=n.getElementsByTagName(t)[0], a.async=1, a.src="https://storage.googleapis.com/embed_script/embed.js" ,o.parentNode.insertBefore(a,o)}(window,document,"script",0,"pottos");
 pottos('init', 'testToken', 'testCid', 'testUser001');
　　</script>
　　<script>
　　　// 「google」ボタンクリック時処理
　　　var button = document.getElementById('log_button');
　　　button.addEventListener('click', function() {
　　　　　pottos('event', 'button_click', 'output_log');
　　　　　console.log('ボタンがクリックされました');
　　　}, false);
　　</script>
　</body>
</html>

◇参考
サービスで使用している言語やフレームワークによって、実装時にカスタマイズが必要となる場合があります。

1-B. イベントトラッキングコードの設置

イベントトラッキングは下記の関数を用います。

pottos("event", "event_type", "event_content"，"extended_value");

上記のコードをイベント発生時の処理へ追加します。

関数の引数
引数	説明
第1引数（必須）	"event"を設定します。
第2引数（必須）	イベント種別の値を任意に設定します。文字列型の値を設定してください。(上限150文字)
第3引数（任意）	イベント内容の値を任意に設定します。文字列型の値を設定してください。(上限150文字)
第4引数（任意）	イベント内容を値を任意に設定します。文字列型の値を設定してください。(上限150文字)

参考例では、下記のようにイベントトラッキングコードをHTMLのonclick属性やボタンクリック時に実行されるJavaScript内に設置しています。

<button onclick="pottos('event', 'page_click', 'event1', 'event2');">EVENT1</button><br />

<script>
　var button = document.getElementById('event2');
　button.addEventListener('click', function() {
　pottos('event', 'page_click', 'event1', 'event2');
　}, false);
</script>

2．イベントトラッキングの動作確認

イベントトラッキングコードの設置完了後、イベントトラッキングが正常に動作していることを確認します。

pottosの画面上もしくはブラウザ（Chrome推奨）のデベロッパーツールを使用し、動作確認を行います。

2-A. pottos画面上での確認

場所：NAVIGATION[ ログ ] > [ トラッキングログ ]

__________2022-02-16_15.06.31.png

トラッキングログ一覧に表示される「日時」や「パス」が正しく記録されていることを確認します。

種別はEVENTとなります。

◇参考
引数などの詳細データはトラッキングログ一覧右端の

から確認できます。

2-B. ブラウザのデベロッパーツールでの確認

デベロッパーツールのnetworkタブを通して、トラッキングデータの送信が正常に行われているのか確認します。

[ キーボードのF12 ] > デベロッパーツールのnetworkタブをクリック > websoketのリクエスト（?EIO~という名前）をクリック> Messagesタブをクリック

◇参考
ブラウザのデベロッパーツールは下記で開くことも可能です。

・windows： [ Ctrl ] + [ Shift ] +「 I 」を同時に押下

・Mac：[ command ] + [ option ] +「 I 」を同時に押下

イベントトラッキングが動作すると、"event"という表示が確認できます。

そして、"event"の"status"が200である場合、イベントトラッキングが正常に動作しています。

"event"の"stasus"が200でない場合（422など）、イベントトラッキングは正常に動作していないため、再度設定や設置方法をご確認いただきますようお願いいたします。

3．トラブルシューティング

トラッキングは正常に動作していますか？
関数の第1引数が"event"になっていますか？
関数の第2引数（必須）は設定されていますか？

このセクションの記事

目次

概要