デベロッパーツールでタグトラブル回避!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは ADMAGEユニット2年目の別所です。

現在、ネット広告業界にはありとあらゆる広告効果測定ツール、サイト解析ツールが存在しています。
広告主や代理店の方達は日々最新のツールを導入し、毎晩遅くまでデータ分析やマーケティング戦略を考えている事でしょう。

そしてこれらネット広告ツールときっても切れない関係にあるのが、「タグ」です。

【タグを知ろう!】

基本的にどのネット広告ツールであっても広告主サイトのどこかにタグを埋め込む必要があるかと思います。
(一部タグ設置が必要のないものもあります。)

このタグが厄介です。
タグの設置場所や設定方法を間違えると正常に計測ができなくなため、本当に欲しい情報が取得できなかったり、最悪の場合サイトがクラッシュするなんていう大事故も起こりかねません。

大きなECサイトでこのような事故が発生した場合のビジネスインパクトは計り知れません。

さすがにサイトクラッシュ程の大事故はまれにしても、リタゲタグのマークがたまらなかったり、取得したい商品情報をうまく受け渡せない等といったタグのトラブルは多いのではないでしょうか。

このタグトラブルを回避する上でデベロッパーツールの存在は欠かせません。
デベロッパーツールとは、Web ページの作成とデバッグをサポートするツールで全てのブラウザに標準装備されています。
ブラウザを開いた状態で、キーボードの「F12」ボタンを押すと表示されるので、試しに押してみてください。
今回はこのデベロッパーツールの使用方法を紹介しつつ、誰でもタグの動作確認ができる方法を説明したいと思います。

【動作確認をするにあたっての準備】

今回はデベロッパーツールでタグの動作確認を行いますが、その前に前提となる条件を設定しておきます。

====================================================================

■前提条件■

・今回動作検証に利用するブラウザは「Chrome」です。
・広告主Aはワンタグ(YTM)を利用してタグを一元管理しています。
・今回新たにYTMにGDNのCVタグをつなぎ込むことになりました。
・GDN(CV)タグのid,labelともに「1111111111」です。
・GDN(CV)タグはYTMの管理画面上から正常に設定されています。
・GDN(CV)タグはCVユーザー毎の売上を取得しています。
・PC+スマホどちらも広告配信対象になっています。
====================================================================

では早速確認していきます。

【STEP1 YTMタグの設置状況を調べる】

まず始めにタグの設置状況から確認していきますが、これはデベロッパーツールを使う必要もありません。
「Ctrl + U」を押すとページソースが表示されるので、YTMのユニバーサルタグが設置されている確認します。

「tagjs」という文字列がYTMタグの共通識別文字になるので、「Ctrl + F」で検索バーを表示し検索してください。

YTMユニバーサルタグは内のの直前の設置を推奨しているので、推奨された位置にしっかりタグが設置されているかを確認してください。

設置されていれば【STEP1】はクリアです。

(注)GDN(CV)タグはYTMにつなぎこんでいるので、ページソースにはタグは貼られていません。

【STEP2 YTMタグの動作確認をする】

YTMタグの設置が確認できたら今度は正常にYTMタグが動作しているかを確認します。
ここでいう動作とは通信が正常に発生している事をさします。
「F12」ボタンでデベロッパーツールを開きます。
「Network」タブを選択します。
「F5」ボタンで一度更新をかけます。

するとそのページで発生している通信が全て表示されます。
CVページの場合、リロードすると別ページに遷移するサイトもあるので、その場合にはカートページ等、あらかじめデベロッパーツールを表示させたまま、CVページに遷移してください。
そうすればリロードをせずに通信が確認できます。

図1

(図1)

ここで図1の赤枠で囲まれたフィルターマークをクリックしてください。
そうするとフィルター検索がかけられるようになるので、下記文字列で検索をかけます。
「thebrighttag」
「yjtag」

図2

(図2)

この2つの通信が図2のように200 OK(または304)となっていればYTMが正常に動作している証です。
304がでる場合は一度キャッシュをクリアしてもう一度リロードしてみてください。

これでYTMが正常に動作している事までは確認できました。

【STEP3 GDN(CV)タグの動作確認をする】

続いてGDN(CV)タグの動作を確認していきます。
先程同様フィルターで検索をかけます。
ここでは、GDN(CV)タグのidもしくはlabelを検索文字列(今回は「1111111111」)とします。

図3

(図3)

図3のような通信が確認できれば、OKです。
通信状態は200OKもしくは302になっていれば問題ありません。

これでPCに関しては問題ない事がわかりました。
次はSPサイトの動作確認です。

図4

(図4)

図4のように右上アイコン→Emulation→Device→Emulateをクリックします。
そうするとSPモードになるので、この状態で動作確認を行います。

動作確認方法はPCと同様になるので、「1111111111」でフィルタをかけ、通信が確認できれば問題ありません。

【STEP4 GDN(CV)タグで売上取得ができているか確認する】

最後に売上取得の確認方法です。

図5

(図5)

【STEP3】で発生したGDNの通信のうち、一番上の通信をクリックすると、図5のように通信内容の詳細が確認できます。
Query String Paramatersのdata部分に売上金額が設定されていれば、OKです。

【最後に】

いかがでしたでしょうか。
この確認方法を身に付ければ、自分でタグのトラブルを未然に防ぐ事ができます。
また、計測できない原因を詳細につきとめる事ができるので、余分なコミュニケーションが減る事間違いなしです。

是非、皆さんのブラウザでもトライしてみてください。





広告システムについてのお問い合わせやご相談、パッケージ製品の詳細はこちらからどうぞ。
http://admage.jp/
アプリ計測SDK admage for Appのお問い合わせ・詳細はこちら。
http://apptizer.jp/

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*