こんにちは！
tealiumの実装をやらせていただいているのですが、
実装したTIQの設定や、データレイヤーにどんな値で受け取っているのか確認したいため、
tealiumのおすすめデバック方法をご紹介いたします。
①コンソール上で生データを出力する
TIQで設定した内容がデータレイヤーとしてちゃんと受け取れているか生データとして確認するときに使えます。
下記のコマンドをChromeデベロッパーのコンソールに入力します
|
1 |
utag_data |
②デバッグモードで細かい設定まで確認する
クッキーに下記の内容を書き込むことで、デバックモードとなり、
データレイヤーの内容を表示する以外にも様々なTIQのデータのやりとりを出力します。
|
1 |
document.cookie="utagdb=true"; |
参考ページ
https://docs.tealium.com/platforms/javascript/debugging/
③UDO Inspectorで確認する
こちらも上記の生データを表示するのと変わりませんが、
フォーマット化されて、見やすい状態で確認することができます。
下記のjsをコンソールに入力してください。
|
1 |
javascript:(function(){window.open("","UDO Inspector","width=600,height=514,scrollbars=1").document.write("<script language=\"JavaScript\" id=\"udoaudit\" src=\"//tags.tiqcdn.com/utag/adrian-test/tools/dev/utag.4.js?"+Math.random()+"\"><\/script>");}()); |
参考ページ
https://community.tealiumiq.com/t5/Tealium-iQ-Tag-Management/Tealium-UDO-Inspector/td-p/247#toc-hId–1556509801
④Chromeのプラグインで確認する
GUIのように確認することができるので、コンソールで生データを見るより、
カラーリングされているのでわかりやすいと思います。
プラグインはこちら
https://chrome.google.com/webstore/detail/tealium-data-layer-debugg/aegehiegfbndemonfanncbgdfafpfabm
以上です。
個人的には③番目のやり方がGUIっぽく生データがフォーマット化されているので、
見やすく利用しています。ぜひ、参考にしてみてください。