Chcete převést modifikovaný kód Google Analytics na asynchronní? Žádný problém!

25 | 08 | 2010 - Klára Boháčková

Asynchronní kód Google Analytics je sice vylepšenou verzí klasického kódu a poskytuje některé výhody, ovšem spousta lidí dodnes neví, jak přejít z původního na asynchronní kód v případě, kdy je původní kód složitěji modifikován.

Google Analytics se těší oblibě po celém světě a drtivá většina analytiků tradiční kód vylepšila. A to ať už se týká oficiálního vylepšení od společnosti Google, tak vlastními úpravami a hacky. V knihách a blozích často narazíte na nějaké vylepšení, co a jak přidat a změnit, abyste mohli měřit to a ono a získat tak z Google Analytics ještě víc.

Problém ale nastal ve chvíli, kdy společnost Google upravila stávající kód na asynchronní. Tato změna se dotkla nejenom již existujících uživatelů softwaru, ale i těch, kteří si Google Analytics teprve chtějí pořídit. Protože:

1. existující uživatelé, kteří si někde stáhli vylepšenou verzi kódu, neví, jak ji upravit na asynchronní,
2. noví uživatelé, kteří si mohou vygenerovat pouze asynchronní kód, mají k dispozici jen omezený počet vylepšení kódu, která se nachází na oficiálních stránkách Googlu.

Přejít z lehce upraveného kódu na asynchronní je snadné

Pokud máte kód obohacený pouze o základní prvky, jako je např. sledování subdomén či vydefinované vyhledávače, přejít na asynchronní kód je jednoduché. Pomoci vám může například náš článek Jak přejít na asynchronní měřicí kód v Google analytics, nebo oficiální nápověda Google Analytics, která je v rozšířené verzi pro přechod na nový typ kódu pouze v angličtině.

Příklad

Máme klasický kód ga.js a v něm dodefinované sledování subdomén a sledování dalších čtyř českých vyhledávačů.

Převedení kódu na asynchronní se provede pomocí syntaxe _gaq.push. Pouze si musíte dát pozor, abyste neudělali v přepisu kódu jednu z nejčastějších chyb:

• záměna velkých a malých písmen,
• správně zadaný název funkce,
• do jednoduchých uvozovek ' ' zadávejte pouze řetězce,
• pozor na mezery.

var regex = new RegExp("www.google.([^\/]+).*&prev=([^&]+)"); var match = regex.exec(ref); pageTracker._clearOrganic(); pageTracker._setReferrerOverride("http://images.google." + match[1] + unescape(match[2])); pageTracker._addOrganic("images.google." + match[1], "q"); } pageTracker._trackPageview(); } catch (err) {}

Pokročilejší modifikace kódu - co s tím?

V případě, že jste si modifikovali kód pomocí nastavení vlastních proměnných, regulárních výrazů a nových funkcí, může být přechod na nový typ kódu opravdovým oříškem. A to hlavně pro ty, kteří nerozumí JavaScriptu a pouze si vylepšený kód odněkud stáhli.

Příklad

Zkopírovali jste si upravený klasický kód pro sledování příchodů z images.google a klíčových slov z tohoto zdroje dle našeho článku na Lupě.

try { var pageTracker = _gat._getTracker("UA-XXXXXXX-X"); var ref = document.referrer; if (ref.search(/www.google/) != -1 && ref.search(/prev/) != -1) { var regex = new RegExp("www.google.([^\/]+).*&prev=([^&]+)"); var match = regex.exec(ref); pageTracker._clearOrganic(); pageTracker._setReferrerOverride("http://images.google." + match[1] + unescape(match[2])); pageTracker._addOrganic("images.google." + match[1], "q"); } pageTracker._trackPageview(); } catch (err) {}

Jak ovšem syntaxi kódu upravit, aby byla asynchronní a přitom fungovala? Na jaká místa přidat _gaq.push a vyhnout se nejčastějším chybám?

Místo složitého vymýšlení toho, co a jak změnit, můžete pomocí jednoduché metody překonvertovat jakýkoliv kód. Asynchronní kód z příkladu bude vypadat následovně:

<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(function () { var pageTracker = _gat._createTracker("UA-XXXXXXX-X"); var ref = document.referrer; if (ref.search(/www.google/) != -1 && ref.search(/prev/) != -1) { var regex = new RegExp("www.google.([^\/]+).*&prev=([^&]+)"); var match = regex.exec(ref); pageTracker._clearOrganic(); pageTracker._setReferrerOverride("http://images.google." + match[1] + unescape(match[2])); pageTracker._addOrganic("images.google." + match[1], "q"; } pageTracker._trackPageview(); }); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>

Princip metody přechodu na asynchronní kód

Problém s přechodem na nový kód se týká dalších a dalších modifikací kódu, počínaje změnou zdroje konverze v Google Analytics a vlastními hacky konče. Abyste ušetřili čas a nervy s vymýšlením a testováním nových syntaxí, můžete použít následující postup pro konvertování klasického kódu na asynchronní. Jeho výhodou je jeho univerzálnost a lze ho napasovat na jakkoliv složitý kód.

Další výhodou této metody je, že při přepisu kódu je mnohem menší pravděpodobnost dopuštění se chyby. Neboť nemusíte konvertovat každou položku kódu zvlášť, ale zkonvertuje kód vcelku a téměř nezasahujete do původního, již funkčního kódu. Pouze starý kód obalíte z obou stran novými příkazy a změníte název jediné funkce.

Přejděte na asynchronní kód ve třech krocích

Krok 1

Zkopírujte si následující část kódu:

<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(function () { // Sem vložte klasický kód Google Analytics }); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>

Krok 2

Do pole Sem vložte klasický kód Google Analytics zkopírujte všechno mezi try { a } catch (err) {} z klasického kódu, který dosud používáte.

Krok 3

Nahraďte ve vytvořeném skriptu _getTracker voláním _createTracker. A to je vše!

blog comments powered by Disqus