KH-WEBLOG TOP > WEBメモ > EC-CUBE > EC-CUBEにGoogleアナリティクス Mobileを設置:EC-CUBE2.11.1

EC-CUBEにGoogleアナリティクス Mobileを設置:EC-CUBE2.11.1

EC-CUBEにGoogleアナリティクス の携帯用アクセス解析タグを設置するときは
普通にタグを貼りつけるだけじゃできないのでその方法をメモ。

モバイル用トラッキングコードの取得

まず、googleアナリティクスから携帯用のトラッキングコードを取得します。
トラッキングコードは
PHP、Perl、JSP、ASPX
の4つの言語から選択できますが、今回はPHPを選択し、コードを取得します。

トラッキングコードをテンプレートに設置

PHPのトラッキングコードを取得すると、
↓<html> タグの直前に貼り付けるソース

<?php
  // Copyright 2010 Google Inc. All Rights Reserved.

  $GA_ACCOUNT = "MO-XXXXXX-X";//自分のトラッキングコード
  $GA_PIXEL = "/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("&", "&amp;", $url);
  }
?>

↓</body> タグの直前に貼り付けるソース

<?php
  $googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
  echo '<img src="' . $googleAnalyticsImageUrl . '" />';?>

のソースが出来ると思いますが、このままEC-CUBEに貼りつけても動かないので、
上記のソースをそれぞれEC-CUBE用に
<html> タグの直前に貼り付けるソース

<!--{php}-->
  // Copyright 2009 Google Inc. All Rights Reserved.
  $GA_ACCOUNT = "MO-XXXXXX-X";//自分のトラッキングコード
  $GA_PIXEL = ROOT_URLPATH ."ga.php";//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("&", "&amp;", $url);
  }
<!--{/php}-->

に変更し
/ec/data/Smarty/templates/mobile/site_frame.tpl
の<html> タグの直前に貼り付け、

</body> タグの直前に貼り付けるソース

<!--{php}-->
  $googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
<!--{/php}-->
<img src="<!--{php}-->echo $googleAnalyticsImageUrl<!--{/php}-->" width="1" height="1" />

に変更し
/ec/data/Smarty/templates/mobile/site_main.tpl
の</body> タグの直前に貼り付けます。

ga.phpをダウンロードしサーバーにアップする

次に、googleアナリティクスから
ga.php
をダウンロードし、
http://sample.com/ga.php
もしくは
http://sample.com/ec/ga.php
のようにhtml直下にアップロードします。

SC_MobileImage.phpにソースを追加

/ec/data/class/SC_MobileImage.php

// HTML中のIMGタグを変換後のファイルパスに置換する
foreach ($images[1] as $key => $path) {
        $realpath = html_entity_decode($path, ENT_QUOTES);
        $realpath = preg_replace('|^' . ROOT_URLPATH . '|', HTML_REALDIR
        ・
        ・
        ・

の部分を

// HTML中のIMGタグを変換後のファイルパスに置換する
foreach ($images[1] as $key => $path) {
	if (preg_match('|/ga\.php|', $value)) continue; // 追加
        $realpath = html_entity_decode($path, ENT_QUOTES);
        $realpath = preg_replace('|^' . ROOT_URLPATH . '|', HTML_REALDIR
        ・
        ・
        ・

のように1行追加

以上でEC-CUBE2.11.1にGoogleアナリティクス Mobileを設置完了です。

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事