ビーコンリクエストの確認方法 (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...&dr=https...&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'] = '●●●●';の ●●●● の部分になります。


※cva パラメータについて

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

設置したタグ

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

cvaパラメータ

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

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


確認方法

Chrome の場合

1. 開発者ツールを開く

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

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

2. 「Network」タブを開く

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

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

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

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

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

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

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

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

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

Firefox の場合

1. 開発者ツールを開く

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

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

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

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

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

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

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

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

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

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

5. リクエスト詳細の「ヘッダー」タブのGET https://tr.usergram.info/_usergram.png?... の箇所をエクスパンドし、 重要なパラメータを確認する

あとは、見つけた  _usergram.png へのリクエストをクリックすると、その右側に詳細が表示されますから、ここで ヘッダータブのGET https://tr.usergram.info/_usergram.png?... の箇所をエクスパンドすると、ビーコンリクエストに乗せて送信された各パラメータを確認することができます。

※参考　スマートフォンの場合

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

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

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

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