rcmdnk's blog

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

I recently noticed that an event tracking of Google Website Translator is no longer available.

What I was changed is the code of Google Analytics: old ga.js code to new Universal Analytics code, analytics.js.

It seems Google Translate code is not updated for Universal Analytics. Here is my attempt to fix it by modifying core codes of Google Translate.

Sponsored Links

Put Google Website Translator in your blog

You can easily put Google Website Translator by following the instruction on the page.

You can also put your Analytics code to track translation events by Google Analytics.

Events have information of which languages are used in Event Label.

It had worked for a long time, but suddenly, it stopped working. It seems it stopped when I updated some codes of JavaScript, especially I updated Google Analytics code from old ga.js to Universal Analytics analytics.js.

I found some posts related to this problem:

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

google translate events not in analytics anymore.

The first one was posted in September/2013, and the latter was posted on 22/January /2015. So, it seems this problem is a remaining problem since Universal Analytics was released.

How to fix

From Google Website Translator, codes like below are provided:

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

Then, let’s check element.js:

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

It calls main.js:

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

memo If your browser’s setting is other than English, a direct access to element.js shows different codes comparing to the Beautified code.

For example, with Japanese environment, element.js calls main_ja.js instead of main.js

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

In the below, element_main.js is common for all language, while such 0/main.js is replaced by 0/main_ja.js in Japanese environment.

It is too tight to follow all scripts. Therefore, in this attempt, I use only main.js from element.js. As a result, the translator button will be always English version.

Anyway, main.js calls:

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

or

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

Let’s check these scripts precisely. Hereafter, I would use 0_main.js for above element/0/main.js to distinguish from element/man.js.

0_main.js

element_main.js

In the beautified code, you can find following part in 0_main.js:

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) {}

So, it uses only functions of _gaq or _trackEvent of ga.js. As a result, we can not make an event with Universal Analytics.

Ok, now the place at where the event is created becomes clear. Then, it should work if the event track function of Universal Analytics is added by following my previous post: Notice a copy event on your blog in Google Analytics, like:

0_main_ja.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();

p and f are Window object in 0_main.js and element_main.js, respectively. Window should have ga if analytics.js is used on the page (in the normal way), instead of _gaq of ga.js.

a.b and a.e have values of the language, so it should be in the 5th argument (Event Label).

In element_main.js, Zi and Rj are Google Website Translator and Translate, respectively. So in both files, ga works in the same way.

Once modifications are finished, put them in /javascripts/translate/. (In Octopress, put them in source/javascripts/translate/.)

Put 0_main.js as /javascripts/translate/0_main.js.

Next, modify:

main.js

as

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";

and

element.js

as

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');
   })();
 })();

In the last, update the original Google Website Translator code in <head>:

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: 'en', 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>

to call the local scripts. (In the modified element.js, googleTranslateElementInit is already set. (if you started from above beautified code.))

Summary

Now I can see translation events.

translateanalytics

It may be better if I can fix with short codes from outside, but it seems difficult to do so, then got all scripts and modified locally.

This problem was posted in Google Group of Analytics, so I think Google engineers will notice and fix it soon.

Until then, I will keep this fix to track translation events.

Sponsored Links
Sponsored Links

« Notice a copy event on your blog in Google Analytics Many duplicated directories appear in Dock's Home pop-up »