SEMcamp 6# – Kod asynchroniczny Google Analytics – zastosowanie i wdrożenie

Od kilku dni asynchroniczny kod Google Analytics jest domyślnym kodem Google Analytics pokazywanym w interfejsie. Co więcej wszystkie nowe dokumenty pomocy będą rozwijane przede wszystkim dla nowego kodu.

Prezentacja z 6 spotkania SEMcampu

Mariusz Gąsiewski


Sama migracja do nowego kodu jest stosunkowo prosta, trzeba jednak przy jej okazji pamiętać o kilku ważnych kwestiach technicznych i organizacyjnych.

Jak wygląda różnica w nowym kodzie?

Jak widać specyfika starego kodu (czyli tzw. „ga.js”) jest zupełnie inna od kodu asynchronicznego.

• Nowy kod Google Analytics


<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxx-x']);
_gaq.push(['_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>


• Stary kod Google Analytics

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}</script>


Na czym polega przewaga kodu asynchronicznego?

Nowy kod wywołuje się w kodzie strony równolegle z innymi elementami podstrony, na której jest osadzony. W ten sposób nie ma de facto znaczenia, w której części witryny go osadzimy. Co więcej zmniejsza on również prawdopodobieństwo błędnego wywołania kodu.

Poprzedni kod Google Analytics najczęściej był osadzony na końcu strony, poprzez co wywoływał się na końcu ładowania podstrony. W ten sposób nie powodował on błędów w ładowaniu plików javascript lub też obrazków na stronie. Jednocześnie jednak mogło powodować to nieraz brak załadowania się kodu Google Analytics przed przejściem użytkownika do następnej podstrony (kod mógł nie zliczać niektórych odstron).

W przypadku, kiedy stary kod Google Analytics był umieszczany na początku kodu, błąd w wywołaniu kodu uniemożliwiał poprawne wyświetlenie podstrony. Szczególnie problematyczne to było w sytuacji, kiedy wykorzystywaliśmy niestandardowe funkcjonalności Google Analytics takie jak śledzenie zdarzeń.

W takim przypadku funkcje śledzenia zdarzeń wymuszały niemal umieszczanie starego kodu Google Analytics przed kodem śledzenia zdarzeń, co najczęściej sprowadzało się do umieszczenia starego kodu Google Analytics na początku kodu źródłowego witryny.

Jak podmienić istniejący stary kod Google Analytics?

W tej sytuacji wystarczy w miejsce starego kodu wrzucić nowy. Dane ze statystyk oczywiście zachowają ciągłość.

To, o czym należy pamiętać przy okazji podmiany kodu to to, że jego podmiana wymaga podmiany kodu wszystkich niestandardowych instalacji takich jak np. funkcje śledzenia zdarzeń, funkcje skracające domyślny czas życia ciasteczka konwersyjnego i itp.

Przykłady

• Śledzenie zdarzeń

Podmiana kodu śledzenia zdarzeń sprawi, że kod:
[code lang=”php”]
<a href="http://www.strona.pl/kurs.pdf" onclick="pageTracker._trackPageview(‚/kurs/pdf’);">Kurs PDF</a>
[/code]
zamienimy na
[code]
<a href = "http://www.strona.pl/kurs.pdf" onclick="_gaq.push([‚_trackPageview’,’/kurs/pdf’]);">Kurs PDF</a>
[/code]

• Zmiana czasu życia ciasteczka konwersyjnego (domyślnie jest 6 miesięcy)

Kod zmiany czasu życia ciasteczka konwersyjnego z 6 miesięcy na miesiąc zmienimy z:

pageTracker._setCookieTimeout(„86400");

zamienimy na:

_gaq.push(['_setCampaignCookieTimeout', 86400]);


• Instalacja modułu Ecommerce

Kodu modułu Ecommerce zmieni się z:

var pageTracker = _gat._getTracker("UA-12345-1");
pageTracker._trackPageview();

pageTracker._addTrans(
"1234",
"Mountain View",
"11.99",
"1.29",
"5",
"San Jose",
"California",
"USA"
);
pageTracker._addItem(
"1234",
"DD44",
"T-Shirt",
"Green Medium",
"11.99",
"1"
);
pageTracker._trackTrans();

na:

_gaq.push(['_setAccount', ' UA-12345-1']);
_gaq.push(['_trackPageview']);
_gaq.push(['_addTrans',
'1234',
'Mountain View',
'11.99',
'1.29',
'5',
'San Jose',
'California',
'USA' ]);
_gaq.push(['_addItem',
'1234',
'DD44',
'T-Shirt',
'Green Medium',
 '11.99',
'1']);
_gaq.push(['_trackTrans']);

• Śledzenie danych do dwóch kont Google Analytics

Kod zmienimy z:
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ?
"https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost +
"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var firstTracker = _gat._getTracker("UA-XXXXX-1");
firstTracker._trackPageview();
var secondTracker = _gat._getTracker("UA-XXXXX-2");
secondTracker._trackPageview();
</script>

na:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(
['_setAccount', 'UA-XXXXX-1'],
['_trackPageview'],
['b._setAccount', 'UA-XXXXX-2'],
['b._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