Google Translateのイベントトラックをユニバーサルアナリティクスでも有効にする

JavaScriptをasyncで読み込むについての当たりでJavaScript周りをいじっている時に、こっそりとGoogle Analyticsのコードを以前のga.jsを使うものから analytics.jsを使うユニバーサルアナリティクスのものに変更していました。

その後、暫くしてGoogle Translateのイベントがすっかり無くなってしまった事に気づきました。一日数件で0の日も無いことも無いので最初は無いもんだと思ってましたが、すっかり0で落ち着いてしまったので何かおかしいと思って調べてみました。

Google翻訳の設置
Google翻訳のコードを見てみる
まとめ

Google翻訳の設置

OctopressにGoogle翻訳を設置

上のページでやったように設置してあります。

基本的にはウェブサイト翻訳ツールで取ってこれるコードをそのまま張っているだけです。

ツールのページに、アナリティクスのコードを入力する所があるので入力してコードを取得するとそれを設置するだけでアナリティクスに翻訳した際にイベントが送られます。 (アナリティクスを該当ページで設定している場合)

以前はこのまま行った所、 Google Website Translatorというカテゴリのイベントが送られて来ていました。 (イベントアクションは全てTranslate、イベントラベルにen等翻訳後の言語が送られてきます。)

ですが、上に書いたようにちょっといじった後に全く送られてこなくなりました。最初はコードの設置方法をおかしくしすぎたのかと思いましたが、その辺直して取ってこれるままのものでやってもダメです。

大きな違いは以前は Google Analyticsのコード側で、古いga.jsを使うものだったのが、 analytics.jsを使うユニバーサルアナリティクスのものに変更した点です

ちょっと検索してみたら

Google Translate data tracked with gaTrack is not showing up in Google Analytics? - Webmasters Stack Exchange

google translate events not in analytics anymore.

やはり同じような問題を抱えてる人が居るようで、上の物は2013年9月、下の方は今年の1月22日に上がってる話なのでユニバーサルアナリティクスが出来てからずっと起こってる問題の様です。

とりあえず問題はGoogle翻訳がユニバーサルアナリティクスに対応してないことからくる問題っぽいので、そこを考慮してなんとかしてみます。

Google翻訳のコードを見てみる

OctopressにGoogle翻訳を設置にあるようにコードを取ってくると、中で

http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit (Beautified element.js)

を呼んでいる事が分かります。さらにこれが

https://translate.googleapis.com/translate_static/js/element/main.js (Beautified main.js)

を呼んでいます。

日本語環境で上のelement.jsを直接開くと中身のコードがちょっと変わって中で読んでるスクリプトが

https://translate.googleapis.com/translate_static/js/element/main_ja.js

だったりします。これはブラウザの言語設定を見て代わる様です。

後から出てくる下のelement_main.jsは同じものを中で読んでる様子。 0の方の0/main.jsにはやはりmain_ja.jsがあります。

ここでは全てのJavaScriptを読んでくるのは無理なので、 /element/main.jsだけを取ってきて使うようにします。従って、この設定ではどの環境でも見てもSelect Languageな英語表示になります。

それはそれとして、このmain.js中で、最後に

を呼んでいます。この中で、最後に

https://translate.googleapis.com/translate_static/js/element/0/main.js

または

https://translate.googleapis.com/translate_static/js/element/26/element_main.js

が呼ばれる様になっています。恐らく下の26の方は新しくなったら番号がmain.jsの中で更新されるのかな？と。

この最後の2つのスクリプトを見てみます。

0_main.js

element_main.js

(main.jsの方がelement直下のものと被るのでスクリプト名で書くときに0_main.js と書くことにします。)

Beautifyしたものを見ると、中に

if (a.e.Cc && p._gaq && p._gat) try {
  a.e.Yb ? p._gat._getTracker(a.e.Yb)._trackEvent("Google Website Translator", "Translate", a.d) : p._gat._getTrackerByName()._trackEvent("Google Website Translator", "Translate", a.d)
} catch (e) {}

となってる部分があります(0_main.jsの方。element_main.jsにも同じように_trackEventを使った箇所があります)。

これ見て分かるように、_gaqや_trackEventは古いga.js用のコードです。 analytics.jsを読み込むと_gaqも無いのでこれは実行されません。

そこで、これにブログがコピーされた事をGoogle Analyticsでチェックするでやったユニバーサルアナリティクスでのイベントトラッキングのコードを入れてあげれば良さそうです。

0_main.js.diff

--- 0_main.orig.js      2015-01-01 00:00:00.000000000 +0000
+++ 0_main.js   2015-01-01 00:00:00.000000000 +0000
@@ -6047,6 +6047,9 @@
     if (a.e.Cc && p._gaq && p._gat) try {
       a.e.Yb ? p._gat._getTracker(a.e.Yb)._trackEvent("Google Website Translator", "Translate", a.d) : p._gat._getTrackerByName()._trackEvent("Google Website Translator", "Translate", a.d)
     } catch (e) {}
+    if (a.e.Cc && p.ga ) try {
+        f.ga('send', 'event', "Google Website Translator", "Translate", a.d);
+    } catch (e) {}
   }
   R.Cd = function(a, b, c) {
     hc(this.gb) == "function" && this.gb();

element_main.js.diff

--- element_main.orig.js        2015-01-01 00:00:00.000000000 +0000
+++ element_main.js     2015-01-01 00:00:00.000000000 +0000
@@ -14075,6 +14075,9 @@
     if (a.b.hg && f._gaq && f._gat) try {
       a.b.Ne ? f._gat._getTracker(a.b.Ne)._trackEvent(Zi, Rj, a.e) : f._gat._getTrackerByName()._trackEvent(Zi, Rj, a.e)
     } catch (d) {}
+    if (a.b.hg && f.ga ) try {
+        f.ga('send', 'event', Zi, Rj, a.e);
+    } catch (d) {}
   }
   Q.Mi = function(a, b, c) {
     ku(this.Ga) == Vn && this.Ga();

0_main.jsの方ではpに、element_main.jsの方ではfに、それぞれwindowが代入されてるので、グローバルに gaを持ってるかどうかをチェックするようにします。後は、send-eventを送れば良いのですがそれぞれ_trackEventの方の関数を見て分かるように、 a.b、a.eにそれぞれ言語の文字列が入っています。

また、element_main.jsの方ではZi、Rjにそれぞれ Google Website Translator、Translate の文字列が入ってるのでそれを直接使います。

0_main.jsではその場で直接書いているので同じように。

最終的な部分の準備が出来たので、これらを/javascripts/translate/の下においておきます。 (Octopressならsource/javascript/translate/。)

0main.js**の方はこの**0付きの名前で。

次にこれらを呼ぶ部分を順番に変更。

main.js

を

main.js.diff

--- main.orig.js        2015-01-01 00:00:00.000000000 +0000
+++ main.js     2015-01-01 00:00:00.000000000 +0000
@@ -118,16 +118,13 @@
       }
       C = "26"
     }
-    var Q = "/translate_static/js/element/%s/element_main.js".replace("%s",
-    C);
+    var Q = "/javascripts/translate/element_main.js";
     if ("0" == C) {
-      var R = " translate_static js element %s element_main.js".split(" ");
-      R[R[d] - 1] = "main.js";
-      Q = R.join("/").replace("%s", C)
+      Q = "/javascripts/translate/0_main.js"
     }
-    if (B._cjlc) B._cjlc(B._pas + B._pah + Q);
+    if (B._cjlc) B._cjlc(Q);
     else {
-      var S = B._pas + B._pah + Q,
+      var S = Q,
         T = c.createElement("script");
       T.type = "text/javascript";
       T.charset = "UTF-8";

の様に。

さらに

element.js

を

element.js.diff

--- element.orig.js     2015-01-01 00:00:00.000000000 +0000
+++ element.js  2015-01-01 00:00:00.000000000 +0000
@@ -65,6 +65,6 @@
     c._ps = b + '/translate_static/css/translateelement.css';
     c._puh = 'translate.google.com';
     _loadCss(c._ps);
-    _loadJs(b + '/translate_static/js/element/main.js');
+    _loadJs('javascripts/translate/main.js');
   })();
 })();

とします。

最後に<head>内等で呼んでいるGoogle翻訳の部分を

head.html

 <div id="google_translate_element"></div><script type="text/javascript">
 function googleTranslateElementInit() {
   new google.translate.TranslateElement({pageLanguage: 'ja', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true, gaTrack: true, gaId: 'UA-XXXXXXXX-X', 'google_translate_element');
 }
 </script>
-<script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit' async defer></script>
+<script src='/javascripts/translate/element.js' async defer></script>