目次
概要
pottosのトラッキングコードを貴社サービスに設置し、顧客のサービス利用データ（ログイン / 画面遷移）を計測します。
0．トラッキングの設定を行う前に
pottosに「カスタマー」として登録されていない顧客のサービス利用状況はトラッキングできません。
トラッキング設定を行う前に、カスタマーの登録 を行ってください。
トラッキングにおいて、エンドユーザーの事前登録は不要です。
1．トラッキングのセキュリティ設定
場所：NAVIGATION[ 設定 ] > [トラッキング設定 ] > [ トラッキングのセキュリティ設定 ]
トラッキング先を指定するため、対象のサービスのドメインを設定します。
ドメインを入力し、[ 適用 ] します。
設定したドメインと部分一致するURLのみトラッキングを受け付けます。
例えば、「pottos.jp」というドメインを設定した場合、
「https://admin.pottos.jp/」 ⇒ ○ (受け付けます)
「https://admin.pottos.jp/test/test?value=test」⇒ ○ (受け付けます)
「https://bad.url/test/test?value=test」 ⇒ × (受け付けません)
2．トラッキングコードの設置
場所：NAVIGATION[ 設定 ] > [トラッキング設定 ]
2-A．トラッキングコードのコピー
画面に表示されているトラッキングコードをコピーします。
2-B．トラッキングコードの設置位置
推奨のトラッキングコードの設置位置は</head>タグの前です。
トラッキングコードは非同期のJavaScriptであるため、対象のページ内であればトラッキングは動作します。
2-C．オリジナルカスタマーIDとオリジナルエンドユーザーIDの設置
トラッキングデータを特定の個人に紐付けるために、トラッキングコードにオリジナルカスタマーID（カスタマーを識別する）とオリジナルエンドユーザーID（エンドユーザーを識別する）を設置する必要があります。
IDは動的に変化するよう、変数を設定してください。
オリジナルカスタマーIDとオリジナルエンドユーザーは文字列型の値を設定してください。
2-D．SPA(Single Page Application)におけるトラッキングコードの設置
トラッキングコードは、ブラウザがトラッキングコードを読み込む度に、画面遷移データをpottosに送信します。
しかし、SPAの場合、初期表示後はJavaScriptがDOMを操作することで画面遷移や更新を行うため、2-BのようなトラッキングコードをHTMLに直接設置する方法では、初期表示以降の画面遷移データをトラッキングすることができません。
SPAにおいて、初期表示以降の画面遷移データをトラッキングするには、spaInit関数を用います。
下記の関数を画面遷移がある度に呼び出します。
pottos("spaInit", "new_title"，);
| spaInit関数の引数 | |
| 引数 | 説明 |
| 第1引数（必須） |
" spaInit" を設定します。 |
|
第2引数（任意） |
画面遷移先のページのタイトルを指定する場合に設定します。 文字列型の値を設定してください。 ※ 第2引数を指定しない場合は、spaInit関数が自動でページタイトルを取得し、pottosに送信します。 |
下記はNuxt(Vue.js)フレームワークにおける見本例です。
plugins/pottosTracking.js
export default ({ app }) => {
const originalCustomerId = app.store.getters['originalCustomerId']
const originalEnduserId = app.store.getters['originalEnduserId']
/**
* 初期表示時にトラッキングタグを読み込み
*/
!(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://embed.pottos.jp/embed.js'),
o.parentNode.insertBefore(a, o)
})(window, document, 'script', 0, 'pottos')
window.pottos(
'init',
'your_tracking_token',
originalCustomerId,
originalEnduserId
)
/*
** 画面遷移するたびに毎回spaInit関数を実行
*/
app.router.afterEach(() => {
if (window.pottos) {
window.pottos('spaInit')
}
})
}
nuxt.config.js
module.exports = {
(省略)
plugins: [
'~/plugins/pottosTracking.js'
],
(省略)
３．トラッキングの動作確認
トラッキングコードの設置完了後、トラッキングが正常に動作していることを確認します。
pottosの画面上もしくはブラウザ（Chrome推奨）のデベロッパーツールを使用し、動作確認を行います。
下記に該当する場合はトラッキングを受け付けませんのでご注意ください。
・同一エンドユーザーよりINITトラッキングを連続で受けた場合に、先のトラッキングから次のトラッキングまでの間隔が「1秒以内」であれば、後者のトラッキングを受け付けない
・同一エンドユーザーかつ同一URLのINITトラッキングを連続受けた場合に、後者のトラッキングを受け付けない
3-A．pottos画面上での確認
場所：NAVIGATION[ ログ ] > [ トラッキングログ ]
トラッキングログ一覧に表示される「日時」や「パス」が正しく記録されていることを確認します。
種別はINITとなります。
エンドユーザーの「氏名」が未登録の場合、エンドユーザー列は空白で表示されます。
通常、1度の画面遷移に対しトラッキングログは1行のみ生成されます。
同一内容のログが複数行生成されている場合は、正常にトラッキングが動作していないため、再度設定や設置方法をご確認いただきますようお願いいたします。
3-B．ブラウザのデベロッパーツールでの確認
デベロッパーツールのnetworkタブを通して、トラッキングデータの送信が正常に行われているのか確認します。
[ キーボードのF12 ] > デベロッパーツールのnetworkタブをクリック > WebSocketのリクエスト（?EIO=4&transport=websocket~という名前）をクリック> Messagesタブをクリック
トラッキングが動作すると、"init"という表示が確認できます。
そして、"init"の"status"が200である場合、トラッキングが正常に動作しています。（"status"が422などの場合はエラーとなります。）
貴社サービスで「WebSocket」を使用している場合、"Name"欄に「EIO=4&transport=websocket」という表示が2つ以上存在する可能性があります。
通常、1度の画面遷移に対しリクエスト＆レスポンスは1行ずつ生成されます。
同一内容のリクエスト＆レスポンスが複数生成されていたり、画面遷移の度にWebSocketのコネクションが生成されている場合は、正常にトラッキングが動作していないため、再度設定や設置方法をご確認いただきますようお願いいたします。
４. トラブルシューティング
- カスタマーは登録されていますか？
- pottosにサービスのドメインは登録されていますか？
- 「pottosに登録されたドメイン」と「トラッキングコードを設置したページのドメイン」は一致していますか？
- トラッキングコード内で改行が行われていませんか？
- カスタマーIDとエンドユーザーIDがトラッキングタグに適切に設置されていますか？