ビーコンリクエストの確認方法 (Chrome / Firefox)

ビーコンリクエストをブラウザで簡易的に確認したい場合、基本的には、各ブラウザの 開発者ツールと呼ばれる機能を使って _usergram.png  へのリクエストを調査し、そのクエリパラメータを見ることになります。

開発者ツールの詳細については、各ブラウザの実装によるため弊社では細かいサポートができかねますが、参考までに、 Windows 版の Chrome 及び Firefox での操作方法をご説明いたします。

なお、この手順は本記事作成時点の最新版に基づくものなので、将来のバージョンでは仕様が変わってしまう可能性があります。その場合、詳しくは各ブラウザの公式サポート情報をご覧ください。


確認すべきパラメータ

ビーコンリクエストは、以下のような URL で送信されます。そのクエリパラメータのうち、特に重要なものは  cid ,sid ,t ,cv ,cva ,dr ,dl の 7つです。

https://tr.usergram.info/_usergram.png?

cid =Ugabcd-1&sid =1234&t =cv&cv =conversion&cva =%7B...&dl =https...&...

共通タグ イベントタグ コンバージョンタグ
cid
 タグの usergram.push(['send', '●●●●●●-1', 'pv(または cv/event)']);の ●●●●●●-1 の部分 
sid タグの ugattr['serviceId'] = '●●●●';の ●●●● の部分（計測タグにこちらの記述がある場合のみ、sid パラメータが出現します） 
t pv event cv
cv 確認不要（パラメータが存在しません） タグの usergram.push(['send', '●●●●● ● -1', 'cv(または event)','▲▲▲▲']);の ▲▲▲▲ の部分 
cva 確認不要（パラメータが存在しません）   コンバージョン・イベント属性 (詳細後述)
dr 下記※1 参照 確認不要（パラメータが存在しません）
dl 下記※2 参照 閲覧ページURL（タグ発火時に自動で取得されるので、確認は必須ではありません）

※1 通常はリファラURL（タグ発火時に自動で取得されるので、確認は必須ではありません）ですが、仮想ページビューで任意の値を指定した場合には、タグの ugattr['documentReferrer'] = '●●●●';の ●●●● の部分になります。

※2 通常は閲覧ページURL（タグ発火時に自動で取得されるので、確認は必須ではありません）ですが、仮想ページビューで任意の値を指定した場合には、タグの ugattr['documentLocation'] = '●●●●';の ●●●● の部分になります。

Chrome の場合

1. 開発者ツールを開く

まず、確認対象ページの任意の場所で右クリックメニューから 「検証」を選択してください。開発者ツールが開きます。

また、F12キー押下でも開発者ツールを開くことが可能です。

2. 「Network」タブを開く

開発者ツールにはいくつかの機能がありますが、その中でリクエストの詳細を確認できるのは  Network タブなので、このタブを開きます。

3. ページの読み込みを開始

準備が整ったら、タグを設置したページの読み込みを行い、USERGRAMのタグを実際に動作させてください。

イベントタグ等、単にページを読み込むだけでは動作しないタグは、動作するような操作 (ボタンのクリックやスクロール等) も行います。

4. 「Network」タブから _usergram.png  を探す

すると、送信された全てのリクエストが Network タブに表示されます。この中から  _usergram.png  へのリクエストを見つけるため、左上のフィルタ欄にキーワードとして “_usergram.png” と入力してください。

このとき、リクエスト種類のフィルタが  “All” になっていないと見つからない場合があるので、その設定にも注意しましょう。正しいフィルタ条件でも見つからない場合は、タグが正しく動作していません。

5. リクエスト詳細の「Header」タブで重要なパラメータを確認する

あとは、見つけた  _usergram.png  へのリクエストをクリックすると、その右側に詳細が表示されますから、ここで Header タブの Query String Parameters と書かれた項目を見ることで、ビーコンリクエストに乗せて送信された各パラメータを確認することができます。

Firefox の場合

1. 開発者ツールを開く

まず、確認対象ページの任意の場所で右クリックメニューから 「要素を調査」を選択してください。開発者ツールが開きます。

また、F12キー押下でも開発者ツールを開くことが可能です。

2. 「ネットワーク」タブを開く

開発者ツールにはいくつかの機能がありますが、その中でリクエストの詳細を確認できるのは ネットワークタブなので、このタブを開きます。

3. ページの読み込みを開始

準備が整ったら、タグを設置したページの読み込みを行い、USERGRAMのタグを実際に動作させてください。

イベントタグ等、単にページを読み込むだけでは動作しないタグは、動作するような操作 (ボタンのクリックやスクロール等) も行います。

4. 「ネットワーク」タブから _usergram.png  を探す

すると、送信された全てのリクエストがネットワークタブに表示されます。この中から _usergram.png  へのリクエストを見つけるため、右上のフィルタ欄にキーワードとして “_usergram.png” と入力してください。

このとき、リクエスト種類のフィルタが  “すべて” になっていないと見つからない場合があるので、その設定にも注意しましょう。正しいフィルタ条件でも見つからない場合は、タグが正しく動作していません。

5. リクエスト詳細の「パラメーター」タブで重要なパラメータを確認する

あとは、見つけた  _usergram.png  へのリクエストをクリックすると、その右側に詳細が表示されますから、ここで パラメーター タブを開くと、ビーコンリクエストに乗せて送信された各パラメータを確認することができます。

cvaパラメータの値（コンバージョン・イベント属性）の確認方法

cva  パラメータの値は JSON 形式になっていまして、コンバージョンイベント属性の値が "key":"value" の形で格納されています。

設置したタグ

 ugattr[' prop01'] = ' 2048';
 ugattr[' prop02 '] = ' PDF 資料';

cvaパラメータ

{" prop01":"2048","prop02":"PDF 資料"} 

もし、取得されるべきコンバージョン・イベント属性値が  cva  パラメータ内に見当たらない場合は、コンバージョン・イベント属性を取得する実装が誤っていると思われます。

スマートフォンでの確認方法

スマートフォンのブラウザでは直接開発者ツールを開くことができないため、ビーコンリクエストを確認したい場合、以下のいずれかの方法を選択する必要があります。

  1. リモートデバッグ機能を使い、接続した PC でスマートフォンの開発者ツールを開く
  2. PC 用ブラウザの User-Agent 値をスマートフォンに偽装して閲覧する

詳細については、各ブラウザのヘルプをご覧ください。

解決しない場合 問い合わせ 問い合わせ