Google アナリティクスタグやCVタグ、リマケタグなどが正しく実装されているか、iPhoneで確認する方法

2016年01月15日
ライター:伊藤 大典

Googleアナリティクスや、リスティングのCVタグ、リマケタグなどは、タグの処理完了時にサーバーへHTTPリクエストとしてデータの送信を行っています。

そのため、HTTPリクエストを参照することで、タグが正常動作しているかどうかを確認できます。

PCでは、ブラウザのデベロッパーツールなどでHTTPリクエストを確認することは容易ですが、実はスマートフォンのブラウザにはそういった機能が備わっていないため、そのままでは確認することができません。

スマートフォンでもHTTPリクエストを見られる環境を作り、タグの動作確認をきちんとすることは必要です。

本記事ではそんなスマートフォン(スマホサイト、スマホアプリ、など)でも、タグを実装した際に、それが意図した通りに正しく送信されているかどうか? を確認できるようにする方法をご紹介します。(今回はiPhoneを使った方法です)

今回ご紹介する方法は、FiddlerというHTTPリクエストを見ることができるツールをPCで起動し、iPhoneと連携させて、iPhoneで発生したHTTPリクエストをPC上で見る、という方法になります。
確認するための条件は以下の通り。

  • 測定するPCが.NETが動作するPC(Windows)であること。
  • 測定するPCが接続しているネットワーク環境とiPhoneで接続するWi-fiが同一のネットワーク環境下にいること。
  • そして必要なStepsは4段階。

    1. まずFiddlerをインストール
    2. Fiddlerを設定する
    3. iPhoneのWi-Fi設定
    4. 通信をキャプチャして内容をFiddlerで確認

    さあ、さっそく始めましょう!

    1.まずFiddlerをインストール

    まずはFiddlerをインストールします。

    Fiddler公式サイト

    1. Free download」をクリック
      ダウンロードをクリック
    2. Fiddler for .NET4」を選び、利用形態とメールアドレスを入力し「Download Fiddler」をクリックします。
      ダウンロード方法1
    3. ダウンロードが始まりますので、ダウンロードしてインストールします。
      ダウンロード方法2
    4. インストールして起動すると初期画面が表示されます。
      インストール完了

    2.Fiddlerを設定する

    Fiddlerの画面構成は2ペイン構成になっていますが、右側のペインの「Inspectors」というタブを主に利用します。
    そうすると、3ペイン構成になります。
    以下は http://www.yahoo.co.jp/ へアクセスした際のHTTPのやりとりをキャプチャした物です。

    画面キャプチャ1
    • 左ペインはHTTPの一覧を表示します。
    • 右上ペインは左ペインで選択したHTTPのリクエスト情報です。
      そしてRawタブ以外によく使用するタブは以下の物です。
      • HeadersタブはHTTPヘッダを効率よく表示します。
        Headersタブ画面
      • WebFormsタブはクエリパラメータを分解して見やすく表示します。
        Webformsタブ画面
    • 右下ペインは同じく左ペインで選択したHTTPのレスポンス情報です。
      こちらもやはりRawタブ以外に利用するのはHeadersタブです。

    設定のステップです。

    1. Fiddlerのメニューより、Tools > Fiddler Option… をクリックします。
      設定方法1
    2. オプションダイアログのHTTPSタブを開き、
      • Capture HTTPS CONNECTS
      • Decrypt HTTPS Traffice
      の2つにチェックする。
      それ以外の設定は任意。
      設定方法2
    3. Connectionsタブを開き、
      • Allow remote computers to connect
      にチェックをする。
      それ以外の設定は任意。
      設定方法3
    4. Gatewayタブは、社内環境やご自宅環境にあわせて設定をしてください。
      設定方法4

    その他は基本的にはデフォルト設定で動作すると思います。
    適宜必要に応じて設定してください。

    3.iPhoneのWi-Fi設定

    1. FiddlerをインストールしたPCのIPアドレスを調べます。
      Fiddler画面右側の「Online」という文字にマウスを乗せるとポップアップがでます。ここにIPアドレスが表示されます。これを利用します。
      IPアドレスを調べる
    2. iPhoneで、接続しているWi-Fiの設定画面を開きます。
      まずは「設定」> 「Wi-Fi」> 「接続しているSSID」> 「プロキシの手動設定」を開き、先ほど調べたFiddlerのIPアドレスとポート番号「8888」を入れます。
      プロキシの手動設定
      これでiPhoneからのHTTP通信はすべて、Fiddlerマシンを通過することになります。
    3. 次にFiddler用のプロファイルをiPhoneにダウンロードしてインストールします。
      これをすることで暗号化されたHTTPS通信を復号化してみることが可能です。
      プロファイルのダウンロード
      Fiddler画面

    4.通信をキャプチャして内容をFiddlerで確認

    例えば、EVsmartアプリを起動してみると通信内容をキャプチャできるようになっています。

    通信内容のキャプチャ

    そして、以下がGoogle Analytics SDKが通信している状況です。

    GA SDK通信状況確認

    デコードすると……

    デコード画面

    メジャメントプロトコルについての説明はまた機会があれば。
    Androidの場合も基本的には一緒で、Wi-Fiのプロキシ設定の部分からFiddlerマシンのIPとポートを設定して下さい。これもご要望があればご説明します。

    そして、そのほかには、スマホウェブサイトにいれた、CVタグ、リマケタグ、GTMタグ、GAタグなども全て上記のようにキャプチャされているので中身を確認することが可能です。
    ぜひ試してみてください。

    なお、ご自分のスマホを使い、他人のPCで通信をキャプチャしている場合などは、作業が終了したら、Wi-Fiのプロキシの設定をオフにすることを忘れないようにしてください。通信内容が全部見られてしまいますので(笑)

    この記事を書いた人
    伊藤 大典
    伊藤 大典
    取締役

    アユダンテの創業メンバーでトラブルシューター。社内の困ったことは全て「伊藤さんへ」。趣味はビールと犬とゴルフとBigQuery。常に新しいビジネスを模索している。

    最近書いた記事
    著書