rcmdnk's blog

English ver.: Enable an event tracking of Google Website Translator with Universal Analytics
Google Analytics

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

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

Sponsored Links

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したものを見ると、中に

1
2
3
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
1
2
3
4
5
6
7
8
9
10
11
12
--- 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
1
2
3
4
5
6
7
8
9
10
11
12
--- 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.ba.eにそれぞれ言語の文字列が入っています。

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

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

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

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

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

main.js

main.js.diff
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
--- 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
1
2
3
4
5
6
7
8
9
10
--- 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
1
2
3
4
5
6
7
 <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>

こんな感じで最後のJavaScriptを呼ぶところをローカルにあるファイルを呼ぶように変更します。 (googleTranslateElementInitは直接element.jsの中に渡してあるのでここでは意味ないので消しておきます。)

まとめ

取り敢えず上の方法で変更してみたところ、 Google Website Translatorカテゴリのイベントが出てくるようになりました。 きちんと翻訳先の言語も反映されています。

translateanalytics

絵を撮ってみて気づきしたが、一番多いのがjaってのはなんで何でしょう。。。 まあ、10とかそれ位なので物珍しさで触ってみた、と言う感じでしょうか。 (English blogの方はここには入ってません。)

それはともかくホントは外から一部の関数だけ変更するような事が出来れば良いんですが、 上のスクリプトの中の一部だけ外から変更するのが結構面倒だったので 直接取ってきて変更しました。

暫くはこれで様子を見て、本家の方でちゃんと対応が取れたら 元に戻そうと思います。 (下のGoogle Groupの方で質問が出てるのでGoogleの人もそのうち気づくと思いますが。)

Sponsored Links
Sponsored Links

« MobaXterm: Windowsでのcygwinに代わるターミナル環境 Feedlyの購読用URLが変更されたみたいなのでブログのボタンとブックマークレットをアップデート »