osone

Measurement ProtocolとHit Builderでガラケーサイトの計測をする

はい、ガラケー、携帯、フィーチャーフォンの計測のお話です。以下ガラケーで統一します。

ガラケーサイトの計測、どうされていますか?
最近ではもう対応していないという方も多いとは思いますが、まだまだ切れないというサイトもありますよね。
以前はGoogleAnalyticsでタグを発行する際にラジオボタンで「携帯電話向けのサイト」と選ぶとガラケー用のPHPタグが出てきたのですが、現在のバージョンでは対応していません。
JavaScriptが使える機種であれば現在のGoogleAnalyticsトラッキングコードでも計測ができるのですが、非対応の機種もあると思うと正確なデータとはいえず扱いにくいかもしれません。

ちょっと一手間かかってしまいますが、より確実な方法で計測をするためにMeasurement Protocolという方法を使ってみましょう。
Hit Builderというツールも使います。どちらもGoogle公式です。

1.概要
2.Hit Builderを使う
3.応用〜PHPを使った設置例
4.注意点


1.概要

ユニバーサルアナリティクスでは各ページでトラッキングコードを読み込み、ga('send', 'pageview');などJavaScriptでデータを送信します。
Measurement Protocolでも各ページにトラッキングコードを入れますが、JavaScriptではなくIMGタグなどでHTTPリクエストをGoogleAnalyticsサーバーに直接送信します。

この方法でメルマガの開封率も計測できます。
(メルマガについては使っておられるメルマガ配信システム内で効果測定機能があればそちらのほうが楽かもしれません)

・Measurement Protocol
https://developers.google.com/analytics/devguides/collection/protocol/v1/?hl=ja
・Hit Builder
https://ga-dev-tools.appspot.com/hit-builder/


2.Hit Builderを使う

使用したいアカウントでログインします

https://ga-dev-tools.appspot.com/hit-builder/

Hit Builderにログイン

ページ下部のHit parameter detailsに情報を入力します

パラメータ入力

以下4つは入力必須です。

v バージョン 1を指定 例)v=1
t ヒットタイプ 計測の種類 例)t=pageview
tid プロパティID データの送り先のトラッキングID 例)tid=UA-XXXXXX-Z
cid クライアントID ユーザーを識別するID 例)cid=11111111

〜cidについて〜
cidのIDによってユーザーを識別しています。
どのページが何回見られているのかを知るだけならcidはHit Builderで出てきたランダムな数字をそのまま使えば大丈夫です。
同じIDで計測するため複数のデバイスからアクセスしてもユーザーは1になります。
ただ注意点として、GoogleAnalytics無料版では計測の制限があります。
1日で20万、1セッションあたり500PVを超えるとその日はそれ以降計測されなくなってしまいます。
タグを埋め込む予定のページへのアクセス合計またはメルマガ配信数が500件以上であれば計測されなくなってしまう可能性があるため、PHPなどで個別に乱数を生成する必要があります。ソースは「3.応用〜PHPを使った設置例」で紹介します。

必須の4つだけではどのページが見られたのかがわからないので、pageview測定の場合は更にパラメータを追加する必要があります。

dh ホスト名 設置するサイトのホスト名 例)dh=example.com
dp ページ /index.htmlなど 例)dp=%2Findex.html

ページタイトルを設定するときは以下のパラメータです。

dt ページタイトル 例)dt=toppage

dp、dtについてはGTTPリクエスト送信時にエンコードをする必要がありますが、Hit Builderのパラメータに入力すれば自動でエンコードされるので
/index.htmlと入力すれば大丈夫です。

パラメータ入力しました

他のパラメータについてはこちら 地域やページの読み込み時間などかなり細かく設定することが可能です。
パラメータリファレンス
https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters#v

全て入力したらGoogleAnalyticsに送信されるかどうかのテストをします

コード生成されました

Validate hitで問題がなければHit is valid!と出ます。

Hit is valid!

下のSend Hit Google Analyticsをクリックすると入力したデータがGoogleAnalyticsに送信されるはずです。

GoogleAnalyticsのレポートに表示されたらOKです。
リアルタイムで見てみましょう。

GoogleAnalyticsで確認

/index.htmlで計測出来ていますね。

テストがOKであればページからHTTPリクエストを送信します

Copy hit payloadをクリックすると生成されたコードがコピーされます。
そちらを以下のURLの末尾に加えて、imgタグでコールします。
https://www.google-analytics.com/collect?

こんな感じになると思います

<img src="https://www.google-analytics.com/collect?v=1&t=pageview&tid=UA-XXXXXX-Z&cid=11111111&dh=example.com&dp=%2Findex.html&dt=toppage" alt="" width="1" height="1" />

imgですが画面上には何も表示されません。
このimgタグが読み込まれたら1カウントされますので、bodyの中に設置してください。
メルマガについても同様です。


3.応用〜PHPを使った設置例

GoogleAnalyticsにデータを送信することができましたが、以上だと個別にdpなど設定する必要があるため、ページ数が多い時はちょっと大変になります。
PHPを使って1元管理できるようにしましょう。

〜やること〜
・ガラケーpageview計測
・乱数自動生成
・dp(ページ)自動生成
・ページタイトル取得なし(CMSなど他のタグで出せる)
・各ページからPHPをインクルードし、IMGタグでコールする

例)mobile_ga.php

//乱数を生成します(リロードするたびに生成されます)
$cid = sprintf( '%04x%04x-%04x-%04x-%04x-%04x%04x%04x',
// 32 bits for "time_low"
mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff ),
// 16 bits for "time_mid"
mt_rand( 0, 0xffff ),
// 16 bits for "time_hi_and_version",
// four most significant bits holds version number 4
mt_rand( 0, 0x0fff ) | 0x4000,
// 16 bits, 8 bits for "clk_seq_hi_res",
// 8 bits for "clk_seq_low",
// two most significant bits holds zero and one for variant DCE1.1
mt_rand( 0, 0x3fff ) | 0x8000,
// 48 bits for "node"
mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff ), mt_rand( 0, 0xffff )
);
$data['v'] = '1';
$data['tid'] = 'UA-XXXXXXXX-Z'; // トラッキングID
$data['cid'] = $cid; //cidを自動生成しない場合には'11111'など入力する
$data['t'] = 'pageview';
$data['dh'] = $_SERVER['HTTP_HOST'];
$data['dp'] = $_SERVER['REQUEST_URI'];
$data['dt'] = 'PageTitle'; // ページのタイトル
$url = 'http://www.google-analytics.com/collect'; // This is the URL to which we'll be sending the post request.
$content = http_build_query($data); // The body of the post must include exactly 1 URI encoded payload and must be no longer than 8192 bytes. See http_build_query.
$content = utf8_encode($content); // The payload must be UTF-8 encoded.
$user_agent = $_SERVER['HTTP_USER_AGENT'];
$url = 'http://www.google-analytics.com/collect';
$url .= '?v='.$data['v'];
$url .= '&tid='.$data['tid'];
$url .= '&cid='.$data['cid'];
$url .= '&t='.$data['t'];
$url .= '&dh='.$data['dh'];
$url .= '&dp='.$data['dp'];

 

2行目の$cid のところで乱数を生成します。
編集するのは一行だけです。

$data['tid'] = 'UA-XXXXXXXX-Z'; // トラッキングID

ここをデータの送り先のトラッキングIDにしてください。

$data['dh'] = $_SERVER['HTTP_HOST'];
$data['dp'] = $_SERVER['REQUEST_URI'];

ホスト名とパスを自動で取得しています。

$data['dt'] = 'PageTitle'; // ページのタイトル

ここはやれなくはないですがちょっと大変なのと、ページのパスでどのページへのアクセスか分かるため個別に取得しませんでした。

以上のPHPを各ページから呼び出します。
ルート直下やcommonやincludeフォルダなどにアップしてください。

ガラケーのページ(テンプレート)各に上のファイルをインクルードします。
上でアップロードした場所に合わせてください。

<?php
include($_SERVER['DOCUMENT_ROOT'] . '/mobile_ga.php');
?>

IMGタグでコールします。
上のインクルードのPHPより後に入れてください。

<img src="<?php echo $url;?>" alt="" />

コードを生成するPHPを1つアップ、
各ページに入れるのは php include とIMGタグです。

リアルタイムで確認できれば一旦OKです。


4.注意点

・同じページ内に他のGoogleAnalytics・GTMコードが入らないようにする
・ユニバーサルアナリティクスで計測しているビュー(できればプロパティ)とははっきり分ける
・実際にちゃんと計測できているかのテストを少なくともリリース後数日はしっかりする
・HTTPリクエストを送るだけでカウントされるのでビューのフィルタをかけるなどして予定外の計測がされないようにする


HTTPリクエストが送られる仕組みさえできれば使えるので、WEBサイトに限らずどんなものでもデータとして計測ができます。
設定はちょっとややこしいかもしれませんが、使い道は色々ありそうですね。
是非使ってみてください。

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら