Google Analytics 4. Porównanie implementacji z wykorzystaniem gtag.js i GTM

10.2024 | gtag.js | gtm | google analytics 4 | Przeczytasz w 5 min.

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

Potrzebujesz wsparcia analitycznego?

Napisz do mnie poprzez formularz kontaktowy.

Blog Analityczny. Narzędzia. Techniki. Rozwiązania Analityczne.