Wstęp
Google Analytics (GA) jest jednym z najpopularniejszych narzędzi do śledzenia i analizy ruchu na stronach internetowych. Istnieją jednak dwie główne metody implementacji GA: bezpośrednio przez gtag.js oraz za pomocą Google Tag Managera (GTM). W tym artykule przyjrzymy się obu metodom, porównamy je i omówimy ich zalety i wady.
Wbrew pozorom, nie zawsze implementacja z wykorzystaniem Tag Managera jest najlepszym wyborem. W niektórych okolicznościach np. gdy maksymalizujemy Page Speed Index, to paradoksalnie wybór gtag.js może być bardziej optymalny.
Spis treści
- Implementacja Google Analytics za pomocą gtag.js
- Implementacja Google Analytics za pomocą Google Tag Manager
- Porównanie obu metod implementacji
- Integracja z Google Ads
- Implementacja piksela Facebooka
- Podsumowanie
1. Implementacja Google Analytics za pomocą gtag.js
gtag.js to najnowsza biblioteka śledzenia Google Analytics, która zastąpiła starszą wersję analytics.js. Jest to prosty i bezpośredni sposób implementacji GA na stronie internetowej.
1.1. Proces implementacji:
1. Utworzenie konta Google Analytics i uzyskanie identyfikatora śledzenia (UA-XXXXXXXX-X lub G-XXXXXXXXXX dla GA4).
2. Dodanie kodu śledzenia gtag.js do sekcji <head> każdej strony witryny:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXX-X');
</script>
3. Dostosowanie kodu do śledzenia niestandardowych zdarzeń i celów.
Zalety:
- Prosta implementacja
- Bezpośrednia kontrola nad kodem na stronie
- Mniejsze opóźnienie w ładowaniu strony w porównaniu z GTM
Wady:
- Wymaga modyfikacji kodu strony dla każdej zmiany
- Trudniejsze zarządzanie wieloma tagami i pikselami
- Ograniczona elastyczność w porównaniu z GTM
2. Implementacja Google Analytics za pomocą Google Tag Manager
Google Tag Manager to system zarządzania tagami, który pozwala na wdrażanie i zarządzanie różnymi kodami śledzenia (w tym GA) bez konieczności bezpośredniej modyfikacji kodu strony.
2.1. Proces implementacji:
1. Utworzenie konta GTM i uzyskanie kodu kontenera.
2. Dodanie kodu kontenera GTM do sekcji <head> i tuż po otwarciu znacznika <body> na każdej stronie witryny:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
3. Konfiguracja tagu Google Analytics w interfejsie GTM.
4. Publikacja kontenera GTM.
Zalety:
- Centralne zarządzanie wszystkimi tagami
- Łatwe dodawanie i modyfikowanie tagów bez zmian w kodzie strony
- Zaawansowane opcje wyzwalania tagów i zmiennych
- Możliwość testowania i wersjonowania zmian
Wady:
- Dodatkowa warstwa między stroną a Google Analytics
- Potencjalnie dłuższy czas ładowania strony
- Wymaga nauki interfejsu i logiki GTM
3. Porównanie obu metod implementacji
| Aspekt | gtag.js | Google Tag Manager |
|---|---|---|
| Łatwość implementacji | Prosta, bezpośrednia | Wymaga konfiguracji GTM |
| Elastyczność | Ograniczona | Wysoka |
| Zarządzanie zmianami | Wymaga modyfikacji kodu | Bez zmian w kodzie strony |
| Wydajność | Lepsza | Może być nieznacznie wolniejsza |
| Integracja z innymi narzędziami | Ograniczona | Łatwa |
| Kontrola nad kodem | Bezpośrednia | Pośrednia przez interfejs GTM |
| Zaawansowane śledzenie | Wymaga dodatkowego kodu | Łatwe do skonfigurowania |
4. Integracja z Google Ads
4.1. Implementacja przez gtag.js:
1. Dodaj kod śledzenia konwersji Google Ads do strony:
<!-- Global site tag (gtag.js) - Google Ads: CONVERSION_ID -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-CONVERSION_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-CONVERSION_ID');
</script>
2. Na stronie konwersji, dodaj kod wydarzenia konwersji:
<script>
gtag('event', 'conversion', {
'send_to': 'AW-CONVERSION_ID/CONVERSION_LABEL',
'value': 1.0,
'currency': 'USD'
});
</script>
4.2. Implementacja przez GTM:
1. Utwórz tag Google Ads Conversion Tracking w GTM.
2. Skonfiguruj tag z odpowiednim ID konwersji i etykietą.
3. Ustaw wyzwalacz dla tagu na odpowiednią stronę lub zdarzenie.
4. Opublikuj zmiany w kontenerze GTM.
5. Implementacja piksela Facebooka
5.1. Implementacja przez gtag.js:
1. Dodaj podstawowy kod piksela Facebooka do sekcji <head>:
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
<!-- End Facebook Pixel Code -->
2. Dodaj kod śledzenia zdarzeń w odpowiednich miejscach:
<script>
fbq('track', 'Purchase', {value: 0.00, currency: 'USD'});
</script>
5.2. Implementacja przez GTM:
1. Utwórz zmienną niestandardową w GTM dla ID piksela Facebooka.
2. Utwórz tag niestandardowego HTML z kodem piksela Facebooka.
3. Skonfiguruj tagi dla różnych zdarzeń Facebooka.
4. Ustaw odpowiednie wyzwalacze dla tagów.
5. Opublikuj zmiany w kontenerze GTM.
6. Zestawienie głównych różnic
Zobaczmy zatem na główne różnice w implementacji Google Analytics via gtag oraz via GTM.
| Cecha | gtag.js | Google Tag Manager |
|---|---|---|
| Sposób wdrożenia | Bezpośrednio na stronie | Przez interfejs GTM |
| Elastyczność | Ograniczona | Wysoka |
| Zarządzanie tagami | Ręczne | Centralne |
| Szybkość ładowania | Szybsza | Może być wolniejsza |
| Łatwość zmian | Wymaga modyfikacji kodu | Bez zmian w kodzie strony |
| Debugowanie | Trudniejsze | Łatwiejsze (podgląd GTM) |
| Integracja z innymi narzędziami | Ograniczona | Łatwa |
7. Podsumowanie
Wybór między implementacją Google Analytics za pomocą gtag.js a Google Tag Managerem zależy od konkretnych potrzeb i możliwości technicznych danej witryny.
- gtag.js jest dobrym wyborem dla prostszych witryn, gdzie potrzebna jest tylko podstawowa analityka i rzadko wprowadzane są zmiany w śledzeniu.
- Google Tag Manager jest lepszym rozwiązaniem dla bardziej złożonych witryn, które wymagają częstych zmian w konfiguracji śledzenia, integracji z wieloma narzędziami lub zaawansowanego śledzenia zdarzeń.
Niezależnie od wybranej metody, ważne jest, aby dokładnie przemyśleć strategię analityczną i wybrać rozwiązanie, które najlepiej odpowiada potrzebom biznesowym i technicznym danej witryny. Obie metody oferują skuteczne sposoby implementacji Google Analytics, a wybór między nimi powinien być oparty na długoterminowych celach i możliwościach zarządzania witryną.