モバイル版Googleアナリティクスでeコマースを使う！

 Web解析  Add comments
5月 152011
 

すっかりモバイル版Googleアナリティクスの話が多くなっていますが、引き続きGoogleアナリティクスネタです。

今回はeコマースのトラッキングです。

eコマースはモバイル版には標準機能として用意されていません。しかしドキュメントを読めばどのような値を送れば良いかの記載があるので、それに合わせてカスタムすれば使えるようになります。

eコマーストラッキングコードの仕組み

まずPC用の非同期コードでeコマースのトラッキングについて調べてみましょう。

eコマーストラッキングではどのよな値を送られるのでしょうか？
非同期コードの例ではこのように定義します。(Google codeの トラッキングコード : eコマース より抜粋)

_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
_gaq.push(['_addTrans',
   '1234',           // order ID - required
   'Womens Apparel', // affiliation or store name
   '28.28',          // total - required
   '1.29',           // tax
   '15.00',          // shipping
   'San Jose',       // city
   'California',     // state or province
   'USA'             // country
]);
_gaq.push(['_addItem',
   '1234',           // order ID - necessary to associate item with transaction
   'DD44',           // SKU/code - required
   'T-Shirt',        // product name
   'Olive Medium',   // category or variation
   '11.99',          // unit price - required
   '1'               // quantity - required
]);
_gaq.push(['_trackTrans']);

上記のサンプルをそのまま動かすと、Googleアナリティクスのサーバへは以下のリクエストが実行されます。

GET /__utm.gif?utmwv=4.9.2
&utms=6
&utmn=1972195414
&utmhn=ant-eater.com
&utmcs=Shift_JIS
&utmsr=1680×1050
&utmsc=24-bit
&utmul=ja
&utmje=1
&utmfl=10.2%20r159
&utmdt={タイトル}
&utmhid=1591220499
&utmr=0
&utmp={リクエストURL}
&utmac={アカウントID}
&utmcc={cookieの値}
&utmu=q~ HTTP/1.1

GET /__utm.gif?utmwv=4.9.2
&utms=7
&utmn=1547373497
&utmhn=ant-eater.com
&utmt=tran
&utmtid=1234
&utmtst=Womens%20Apparel
&utmtto=28.28
&utmttx=1.29
&utmtsp=15.00
&utmtci=San%20Jose
&utmtrg=California
&utmtco=USA
 &utmac={アカウントID}
&utmcc={cookieの値}
&utmu=qAAL~ HTTP/1.1

GET /__utm.gif?utmwv=4.9.2
&utms=8
&utmn=853927956
&utmhn=ant-eater.com
&utmt=item
&utmtid=1234
&utmipc=DD44
&utmipn=T-Shirt
&utmiva=Olive%20Medium
&utmipr=11.99
&utmiqt=1
 &utmac={アカウントID}
&utmcc={cookieの値}
&utmu=qAAL~ HTTP/1.1

通常のページトラッキングの他に2つのリクエストが送られているのがわかりますね！

トランザクショントラッキング(utmt=tran)用のリクエストとアイテムトラッキング(utmt=item)用のリクエストです。

それぞれをGoogle codeのドキュメント で調べてみましょう。

トランザクショントラッキング(utmt=tran)

変数 説明 サンプル値
utmt リクエストの種類を示します。種類には、イベント 、トランザクション、アイテム、カスタム変数があります。この値が GIF リクエストで示されていない場合、リクエストの種類はページとなります。 utmt=tran
utmtid 注文 ID。（必須） utmtid=1234
utmtst アフィリエーション。通常、e コマースの実店舗アプリケーションに使用されます。 utmtst=Womens%20Apparel
utmtto 合計金額。（必須） utmtto=28.28
utmttx 税金。 utmttx=1.29
utmtsp 送料。 utmtsp=15.00
utmtci 請求先住所の都市。 utmtci=San%20Jose
utmtrg 請求先の地域。 utmtrg=California
utmtco 請求先住所の国。 utmtco=USA

 

アイテムトラッキング(utmt=item)

変数 説明 サンプル値
utmt リクエストの種類を示します。種類には、イベント、トランザクション、アイテム、カスタム変数があります。この値が GIF リクエストで示されていない場合、リクエストの種類はページとなります。 utmt=tran
utmtid 注文 ID。 utmtid=1234
utmipc 商品コード。ある製品の SKU コードです。（必須） utmipc=DD44
utmipn 製品名。URL エンコード文字列です。 utmipn=T-Shirt
utmiva アイテムのバリエーション。たとえば、大、中、小、ピンク、白、黒、緑などです。文字列は URL エンコードです。 utmiva=Olive%20Medium
utmipr 単価。アイテム レベルで設定されます。値は、アメリカの通貨形式の数値に設定されます。（必須） utmipr=11.99
utmiqt 数量。（必須） utmiqt=1

 

モバイル版でeコマーストラッキングを行うサンプル

ここまでできればやり方はもうおわかりですね！モバイル版でも同じリクエストを発行すればいいんです。

サンプルを軽く作りました。※Windows標準のメモ帳でちょちょっと書いた程度なので値チェックなどは行っていません。

解析するページに記述するコードの変更

<?php
  // Copyright 2009 Google Inc. All Rights Reserved.
  $GA_ACCOUNT = "{アカウントID}";
  $GA_PIXEL = "/labs/m/ga.php";

  function googleAnalyticsGetImageUrl() {
    global $GA_ACCOUNT, $GA_PIXEL;
    $url = "";
    $url .= $GA_PIXEL . "?";
    $url .= "utmac=" . $GA_ACCOUNT;
    $url .= "&utmn=" . rand(0, 0x7fffffff);
    $referer = $_SERVER["HTTP_REFERER"];
    $query = $_SERVER["QUERY_STRING"];
    $path = $_SERVER["REQUEST_URI"];
    if (empty($referer)) {
      $referer = "-";
    }
    $url .= "&utmr=" . urlencode($referer);
    if (!empty($path)) {
      $url .= "&utmp=" . urlencode($path);
    }
    $url .= "&guid=ON";
    return str_replace("&", "&", $url);
  }

  function googleAnalyticsGetTransUrl($orderId, $affiliation, $total, $tax, $shipping, $city, $state, $country) {
    global $GA_ACCOUNT, $GA_PIXEL;
    $url = "";
    $url .= $GA_PIXEL . "?";
    $url .= "utmac=" . $GA_ACCOUNT;
    $url .= "&utmn=" . rand(0, 0x7fffffff);
    $url .= "&utmt=tran";
    $url .= "&utmtid=" . urlencode($orderId);
    $url .= "&utmtst=" . urlencode($affiliation);
    $url .= "&utmtto=" . urlencode($total);
    $url .= "&utmttx=" . urlencode($tax);
    $url .= "&utmtsp=" . urlencode($shipping);
    $url .= "&utmtci=" . urlencode($city);
    $url .= "&utmtrg=" . urlencode($state);
    $url .= "&utmtco=" . urlencode($country);
    $url .= "&guid=ON";
    return str_replace("&", "&", $url);
  }

  function googleAnalyticsGetItemUrl($orderId, $sku, $name, $category, $price, $quantity) {
    global $GA_ACCOUNT, $GA_PIXEL;
    $url = "";
    $url .= $GA_PIXEL . "?";
    $url .= "utmac=" . $GA_ACCOUNT;
    $url .= "&utmn=" . rand(0, 0x7fffffff);
    $url .= "&utmt=item";
    $url .= "&utmtid=" . urlencode($orderId);
    $url .= "&utmipc=" . urlencode($sku);
    $url .= "&utmipn=" . urlencode($name);
    $url .= "&utmiva=" . urlencode($category);
    $url .= "&utmipr=" . urlencode($price);
    $url .= "&utmiqt=" . urlencode($quantity);
    $url .= "&guid=ON";
    return str_replace("&", "&", $url);
  }
?>

通常のfunctionの他に、トランザクション用のトラッキングコードを実行するgoogleAnalyticsGetTransUrlと、アイテム用トラッキングコードを実行するgoogleAnalyticsGetItemUrlを追加しました。

それぞれ必要な値を引数で受け取ります。

呼び出し側のサンプルです。

<?php
  $googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
  $googleAnalyticsTransUrl = googleAnalyticsGetTransUrl("mobile-test-002", "モバイルSEOの勧め商店", "1575", "75", "0", "MINATO-KU", "TOKYO", "JAPAN");
  $googleAnalyticsItemUrl = googleAnalyticsGetItemUrl("mobile-test-002", "B2", "B商品", "青-Lサイズ", "1500", "1" );
  echo '<img src="' . $googleAnalyticsImageUrl . '&utmdebug=1" />';
  echo '<img src="' . $googleAnalyticsTransUrl . '&utmdebug=1" />';
  echo '<img src="' . $googleAnalyticsItemUrl . '&utmdebug=1" />';?>

※utmdebugはデバッグ用のパラメータです。

ga.phpのコードの変更

続いてga.php側の変更です。渡されたパラメータを受け取ります。

  function trackPageView() {

    // （中略）

    // e-commerce tracking
    $utmt = $_GET["utmt"];
    $orderId = urldecode($_GET["utmtid"]);
    $affiliation = urldecode($_GET["utmtst"]);
    $total = urldecode($_GET["utmtto"]);
    $tax = urldecode($_GET["utmttx"]);
    $shipping = urldecode($_GET["utmtsp"]);
    $city = urldecode($_GET["utmtci"]);
    $state = urldecode($_GET["utmtrg"]);
    $country = urldecode($_GET["utmtco"]);
    $sku = urldecode($_GET["utmipc"]);
    $name = urldecode($_GET["utmipn"]);
    $category = urldecode($_GET["utmiva"]);
    $price = urldecode($_GET["utmipr"]);
    $quantity = urldecode($_GET["utmiqt"]);

    // （中略）
  }

Query Stringからeコマーストラッキングに必要なコードを受け取り、解析サーバ（www.google-analytics.com）に送るURLを組み立てます。

ここでは、utmtの値が”tran”か”item”かそれ以外かで分岐するようにしました。

    $utmGifLocation = "http://www.google-analytics.com/__utm.gif";

    // Construct the gif hit url.
    if ($utmt == "tran") {
        $utmUrl = $utmGifLocation . "?" .
            "utmwv=" . VERSION .
            "&utmn=" . getRandomNumber() .
            "&utmhn=" . urlencode($domainName) .
            "&utmac=" . $account .
            "&utmcc=__utma%3D999.999.999.999.999.1%3B" .
            "&utmvid=" . $visitorId .
            "&utmip=" . getIP($_SERVER["REMOTE_ADDR"]) .
            "&utmt=" . $utmt .
            "&utmtid=" . urlencode($orderId) .
            "&utmtst=" . urlencode($affiliation) .
            "&utmtto=" . urlencode($total) .
            "&utmttx=" . urlencode($tax) .
            "&utmtsp=" . urlencode($shipping) .
            "&utmtci=" . urlencode($city) .
            "&utmtrg=" . urlencode($state) .
            "&utmtco=" . urlencode($country);
    } else if ($utmt == "item") {
        $utmUrl = $utmGifLocation . "?" .
            "utmwv=" . VERSION .
            "&utmn=" . getRandomNumber() .
            "&utmhn=" . urlencode($domainName) .
            "&utmac=" . $account .
            "&utmcc=__utma%3D999.999.999.999.999.1%3B" .
            "&utmvid=" . $visitorId .
            "&utmip=" . getIP($_SERVER["REMOTE_ADDR"]) .
            "&utmt=" . urlencode($utmt) .
            "&utmtid=" . urlencode($orderId) .
            "&utmipc=" . urlencode($sku) .
            "&utmipn=" . urlencode($name) .
            "&utmiva=" . urlencode($category) .
            "&utmipr=" . urlencode($price) .
            "&utmiqt=" . urlencode($quantity);
    } else {
        $utmUrl = $utmGifLocation . "?" .
            "utmwv=" . VERSION .
            "&utmn=" . getRandomNumber() .
            "&utmhn=" . urlencode($domainName) .
            "&utmr=" . urlencode($documentReferer) .
            "&utmp=" . urlencode($documentPath) .
            "&utmac=" . $account .
            "&utmcc=__utma%3D999.999.999.999.999.1%3B" .
            "&utmvid=" . $visitorId .
            "&utmip=" . getIP($_SERVER["REMOTE_ADDR"]);
    }

実行結果

実行した結果です。

モバイル版Googleアナリティクスでは、デバッグ機能としてトラッキング用の<img>の呼び出し時にutmdebugパラメータを付けてあげればHTTPヘッダーにX-GA-MOBILE-URLという名前で書き出してくれます。

X-GA-MOBILE-URL: http://www.google-analytics.com/__utm.gif?utmwv=4.4sh
&utmn=1918977022
&utmhn=ant-eater.com
&utmr={リファラ}
&utmp={リクエストURL}
&utmac={アカウントID}
&utmcc=__utma%3D999.999.999.999.999.1%3B
&utmvid={ビジターID}
&utmip={クライアントIPアドレス}

X-GA-MOBILE-URL: http://www.google-analytics.com/__utm.gif?utmwv=4.4sh
&utmn=920624210
&utmhn=ant-eater.com
&utmac={アカウントID}
&utmcc=__utma%3D999.999.999.999.999.1%3B
&utmvid={ビジターID}
&utmip={クライアントIPアドレス}
&utmt=tran
&utmtid=mobile-test-002
&utmtst=%83%82%83o%83C%83%8BSEO%82%CC%8A%A9%82%DF%8F%A4%93X
&utmtto=1575
&utmttx=75
&utmtsp=0
&utmtci=MINATO-KU
&utmtrg=TOKYO
&utmtco=JAPAN

X-GA-MOBILE-URL: http://www.google-analytics.com/__utm.gif?utmwv=4.4sh
&utmn=1966149658
&utmhn=ant-eater.com
&utmac={アカウントID}
&utmcc=__utma%3D999.999.999.999.999.1%3B
&utmvid={ビジターID}
&utmip={クライアントIPアドレス}
&utmt=item
&utmtid=mobile-test-002
&utmipc=B2
&utmipn=B%8F%A4%95i
&utmiva=%90%C2-L%83T%83C%83Y
&utmipr=1500
&utmiqt=1

レポート側に反映

待つこと数時間。レポート側に反映しました。

eコマース > 商品の販売状況 > 商品のサマリー
e-commerce-summary

eコマース > 商品の販売状況 > 商品のSKU
e-commerce-sku

eコマース > 商品の販売状況 > カテゴリ
e-commerce-category

いかがでしょうか？受け取ったパラメータをそのまま渡しているだけの単純な変更です。難しくないので是非チャレンジしてみてください。サンプルはこのブログの実行環境に合わせてPHPとしていますが、要望が多ければ他言語でも解説したいと思います。

関連する記事

 Posted by 木村 將 at 20:46  Tagged with: , ,

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

   
© 2011 モバイルSEOの勧め Suffusion theme by Sayontan Sinha