简体   繁体   中英

Language Selection Tracking as an Google Analytics Event on a Website via Google Tag Manager

Our website, https://www.denverhealth.org/ , has a language option via the expandable menu on the right, as seen below; screenshot

When a user selects a language, they are redirected to a Google translated version of the site. I imagine that I should be using the Google Analytics: Universal Analytics with Event selected for the tag. But, I am a bit stuck on the best trigger option, as ideally, our team wants to see both the count and the language selection.

Below, I included HTML code that is powering this menu. Is there a way to track each time a new data-value is selected? In Google Analytics, ideally, our team would like to see Spanish instead of #googtrans(en|ES) but either way works. When I did some testing, using click text as a variable did not work, as that would result in inconsistencies as language names would show up in translated language if the user is selecting the second time. Thank you for your help!

ul class="list"><li data-value="&amp;sc_lang=EN" class="option selected focus">English</li><li data-value="/#googtrans(en|ES)" class="option">Spanish</li><li data-value="/#googtrans(en|af)" class="option">Afrikaans</li><li data-value="/#googtrans(en|sq)" class="option">Albanian</li><li data-value="/#googtrans(en|am)" class="option">Amharic</li><li data-value="/#googtrans(en|ar)" class="option">Arabic</li><li data-value="/#googtrans(en|hy)" class="option">Armenian</li><li data-value="/#googtrans(en|az)" class="option">Azeerbaijani</li><li data-value="/#googtrans(en|eu)" class="option">Basque</li><li data-value="/#googtrans(en|be)" class="option">Belarusian</li><li data-value="/#googtrans(en|bn)" class="option">Bengali</li><li data-value="/#googtrans(en|bs)" class="option">Bosnian</li><li data-value="/#googtrans(en|bg)" class="option">Bulgarian</li><li data-value="/#googtrans(en|ca)" class="option">Catalan</li><li data-value="/#googtrans(en|ceb)" class="option">Cebuano</li><li data-value="/#googtrans(en|zh-CN)" class="option">Chinese (Simplified)</li><li data-value="/#googtrans(en|zh-TW)" class="option">Chinese (Traditional)</li><li data-value="/#googtrans(en|co)" class="option">Corsican</li><li data-value="/#googtrans(en|hr)" class="option">Croatian</li><li data-value="/#googtrans(en|cs)" class="option">Czech</li><li data-value="/#googtrans(en|da)" class="option">Danish</li><li data-value="/#googtrans(en|nl)" class="option">Dutch</li><li data-value="/#googtrans(en|eo)" class="option">Esperanto</li><li data-value="/#googtrans(en|et)" class="option">Estonian</li><li data-value="/#googtrans(en|fi)" class="option">Finnish</li><li data-value="/#googtrans(en|fr)" class="option">French</li><li data-value="/#googtrans(en|fy)" class="option">Frisian</li><li data-value="/#googtrans(en|gl)" class="option">Galician</li><li data-value="/#googtrans(en|ka)" class="option">Georgian</li><li data-value="/#googtrans(en|de)" class="option">German</li><li data-value="/#googtrans(en|el)" class="option">Greek</li><li data-value="/#googtrans(en|gu)" class="option">Gujarati</li><li data-value="/#googtrans(en|ht)" class="option">Haitian Creole</li><li data-value="/#googtrans(en|ha)" class="option">Hausa</li><li data-value="/#googtrans(en|haw)" class="option">Hawaiian</li><li data-value="/#googtrans(en|iw)" class="option">Hebrew</li><li data-value="/#googtrans(en|hi)" class="option">Hindi</li><li data-value="/#googtrans(en|hmn)" class="option">Hmong</li><li data-value="/#googtrans(en|hu)" class="option">Hungarian</li><li data-value="/#googtrans(en|is)" class="option">Icelandic</li><li data-value="/#googtrans(en|ig)" class="option">Igbo</li><li data-value="/#googtrans(en|id)" class="option">Indonesian</li><li data-value="/#googtrans(en|ga)" class="option">Irish</li><li data-value="/#googtrans(en|it)" class="option">Italian</li><li data-value="/#googtrans(en|ja)" class="option">Japanese</li><li data-value="/#googtrans(en|jw)" class="option">Javanese</li><li data-value="/#googtrans(en|kn)" class="option">Kannada</li><li data-value="/#googtrans(en|kk)" class="option">Kazakh</li><li data-value="/#googtrans(en|km)" class="option">Khmer</li><li data-value="/#googtrans(en|ko)" class="option">Korean</li><li data-value="/#googtrans(en|ku)" class="option">Kurdish</li><li data-value="/#googtrans(en|ky)" class="option">Kyrgyz</li><li data-value="/#googtrans(en|lo)" class="option">Lao</li><li data-value="/#googtrans(en|la)" class="option">Latin</li><li data-value="/#googtrans(en|lv)" class="option">Latvian</li><li data-value="/#googtrans(en|lt)" class="option">Lithuanian</li><li data-value="/#googtrans(en|lb)" class="option">Luxembourgish</li><li data-value="/#googtrans(en|mk)" class="option">Macedonian</li><li data-value="/#googtrans(en|mg)" class="option">Malagasy</li><li data-value="/#googtrans(en|ms)" class="option">Malay</li><li data-value="/#googtrans(en|ml)" class="option">Malayalam</li><li data-value="/#googtrans(en|mt)" class="option">Maltese</li><li data-value="/#googtrans(en|mi)" class="option">Maori</li><li data-value="/#googtrans(en|mr)" class="option">Marathi</li><li data-value="/#googtrans(en|mn)" class="option">Mongolian</li><li data-value="/#googtrans(en|my)" class="option">Myanmar (Burmese)</li><li data-value="/#googtrans(en|ne)" class="option">Nepali</li><li data-value="/#googtrans(en|no)" class="option">Norwegian</li><li data-value="/#googtrans(en|ny)" class="option">Nyanja (Chichewa)</li><li data-value="/#googtrans(en|ps)" class="option">Pashto</li><li data-value="/#googtrans(en|fa)" class="option">Persian</li><li data-value="/#googtrans(en|pl)" class="option">Polish</li><li data-value="/#googtrans(en|pt)" class="option">Portuguese</li><li data-value="/#googtrans(en|pa)" class="option">Punjabi</li><li data-value="/#googtrans(en|ro)" class="option">Romanian</li><li data-value="/#googtrans(en|)" class="option">Russian</li><li data-value="/#googtrans(en|sm)" class="option">Samoan</li><li data-value="/#googtrans(en|gd)" class="option">Scots Gaelic</li><li data-value="/#googtrans(en|sr)" class="option">Serbian</li><li data-value="/#googtrans(en|st)" class="option">Sesotho</li><li data-value="/#googtrans(en|sn)" class="option">Shona</li><li data-value="/#googtrans(en|sd)" class="option">Sindhi</li><li data-value="/#googtrans(en|si)" class="option">Sinhala (Sinhalese)</li><li data-value="/#googtrans(en|sk)" class="option">Slovak</li><li data-value="/#googtrans(en|sl)" class="option">Slovenian</li><li data-value="/#googtrans(en|so)" class="option">Somali</li><li data-value="/#googtrans(en|su)" class="option">Sundanese</li><li data-value="/#googtrans(en|sw)" class="option">Swahili</li><li data-value="/#googtrans(en|sv)" class="option">Swedish</li><li data-value="/#googtrans(en|tl)" class="option">Tagalog (Filipino)</li><li data-value="/#googtrans(en|tj)" class="option">Tajik</li><li data-value="/#googtrans(en|ta)" class="option">Tamil</li><li data-value="/#googtrans(en|te)" class="option">Telugu</li><li data-value="/#googtrans(en|th)" class="option">Thai</li><li data-value="/#googtrans(en|tr)" class="option">Turkish</li><li data-value="/#googtrans(en|uk)" class="option">Ukrainian</li><li data-value="/#googtrans(en|ur)" class="option">Urdu</li><li data-value="/#googtrans(en|uz)" class="option">Uzbek</li><li data-value="/#googtrans(en|vi)" class="option">Vietnamese</li><li data-value="/#googtrans(en|cy)" class="option">Welsh</li><li data-value="/#googtrans(en|xh)" class="option">Xhosa</li><li data-value="/#googtrans(en|yi)" class="option">Yiddish</li><li data-value="/#googtrans(en|yo)" class="option">Yoruba</li><li data-value="/#googtrans(en|zu)" class="option">Zulu</li></ul>

Associated javascript below

}
function s(e) {
  if (!e) var e = window.event;
  var t = decodeURIComponent(this.options[this.selectedIndex].value.toLowerCase().replace(/\//g, '').replace('&', '?')),
  n = location.origin + location.pathname + t;
  location.assign(n),
  location.search || /[?&]sc/.test(t) || location.reload(!0)
}

You can apply click listeners to the list element where language is selected and on each click you can fire GA call.

In your case, code would be like

var languageListElem = document.querySelectorAll('[data-value^="/#googtrans"]')
languageListElem[0].parentNode.onclick = function doLanguageGACollection() { console.log("Do GA collection")}

in function doLanguageGACollection you can write code for triggering GA call.

In the code I have applied click listeners to the parent of all the list elements and indirectly to all the list elements. It is working on your site. Point to note is that you have to apply this click listener on each page load to make it work every time

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM