EC-CUBEにGoogleアナリティクス Mobileを設置：EC-CUBE2.11.1 | コーディング・プログラミング・WEB制作ブログ

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を設置完了です。

案件探しに！絶対登録しておきたいクラウドソーシングサービス3選【評価と経験談】：ビジネス・副業