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.

Put Google Website Translator in your blog
How to fix
Summary

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:

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

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

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:

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

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

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

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

and

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

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

head.html

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