Jak zintegrować Google Analityc z sklepem Woocommerce?
Autor: Paweł Nosko

Jak zintegrować Google Analytics z sklepem Woocommerce?

Spis treści:
  1. 1. Wymagania wstępne 🧩
  2. 2. Utworzenie konta Google i dostęp do narzędzi 🔐
  3. 3. Utworzenie / wybór kontenera Google Tag Manager 🧰
  4. 4. Pobranie kodu Google Tag Manager 📄
  5. 5. Instalacja wtyczki DC WP Header&Footer Scripts 🔧
  6. 6. Przejście do ustawień wtyczki ⚙️
  7. 7. Wklejenie kodu GTM we właściwe miejsca 🧩
  8. 8. Wymaganie techniczne: wp_body_open() ⚠️
  9. 9. Sprawdzenie poprawności instalacji 🔍
  10. Podsumowanie lekcji 🧠

W tej lekcji pokażemy jak poprawnie zintegrować Google Analytics (GA4) ze sklepem WooCommerce, w sposób technicznie poprawny i możliwie najprostszy — bez zbędnych wtyczek i bez magicznych integracji.

Nie będziemy:

  • logować się do Google z poziomu WordPressa

  • używać Site Kit by Google

  • polegać na automatycznych kreatorach

Zamiast tego zrobimy to tak, jak robi się to w środowiskach produkcyjnych — z pełną kontrolą nad kodem.

Takie podejście jest fundamentem profesjonalnego tworzenia sklepów internetowych, gdzie analityka ma być wiarygodna, przewidywalna i odporna na aktualizacje wtyczek czy motywów.

 

🎯 Cel lekcji

Po ukończeniu tej lekcji będziesz w stanie:

  • ✅ poprawnie wdrożyć Google Analytics (GA4)

  • ✅ zrobić to bez logowania do Google w wtyczkach

  • ✅ pominąć Site Kit i podobne „kombajny”

  • ✅ zarządzać analityką przez Google Tag Manager

Efektem będzie stabilna baza pod:

  • analitykę

  • reklamy

  • mierzenie konwersji

 

🤔 Dlaczego właśnie tak?

Ten sposób wdrożenia daje kilka kluczowych korzyści:

  • stabilność — brak integracji = mniej punktów awarii

  • skalowalność — dodajesz kolejne narzędzia bez instalowania nowych wtyczek

  • jedna wtyczka → wiele narzędzi

Ten sam mechanizm wykorzystasz później do:

  • Google Analytics

  • Meta / Facebook Pixel

  • Hotjar

  • innych narzędzi marketingowych

Bez zmiany architektury i bez dokładania kolejnych warstw.

W tym kursie nie uczymy „klikania w wtyczce”.
Uczymy jak poprawnie osadzić analitykę, tak żeby działała dziś i za pół roku.

 

1. Wymagania wstępne 🧩

Zanim przejdziemy do właściwej konfiguracji, upewnij się, że spełniasz podstawowe wymagania techniczne. Dzięki temu przejdziesz przez całą lekcję płynnie i bez niepotrzebnych przestojów.

 

Co będzie potrzebne:

  • 🔐 Konto Google
    Będzie wymagane do utworzenia Google Tag Managera oraz Google Analytics (GA4).

  • 🛒 Sklep oparty o WooCommerce
    Kurs opiera się na realnym scenariuszu e-commerce — wszystkie kroki pokazujemy na sklepie WooCommerce.

  • 👤 Dostęp administratora do WordPressa
    Niezbędny do instalacji wtyczek i edycji ustawień strony.

  • 🧭 Podstawowa znajomość panelu WordPress
    Wystarczy, że wiesz:

    • gdzie dodać wtyczkę

    • jak ją aktywować

    • gdzie znaleźć ustawienia

Nie jest wymagana znajomość programowania ani edycji kodu PHP.

Jeśli wszystkie powyższe punkty masz odhaczone ✅
możemy przejść do pierwszego kroku praktycznego: konta Google i Google Tag Managera 🚀

 

2. Utworzenie konta Google i dostęp do narzędzi 🔐

Zaczynamy od absolutnego punktu startowego.
Zanim przejdziemy do konfiguracji Google Tag Managera i Analyticsa, musimy mieć aktywne konto Google i dostęp do narzędzi Google.

 

Co robimy w tym kroku:

Nie konfigurujemy jeszcze żadnych tagów ani Analyticsa — to jest tylko krok wejściowy, który ustawia kontekst całej dalszej lekcji.

Screen: konto Google

 

 

3. Utworzenie / wybór kontenera Google Tag Manager 🧰

W tym kroku przechodzimy już do właściwego narzędzia, które będzie centrum zarządzania analityką dla sklepu WooCommerce — czyli Google Tag Managera.

 

Co robimy w tym kroku:

  • przechodzimy do administracji Google Tag Managera

  • wybieramy istniejące konto lub tworzymy nowe (jeśli robisz to pierwszy raz)

  • wybieramy lub tworzymy kontener przypisany do domeny sklepu

Kontener to miejsce, w którym później:

  • dodamy Google Analytics (GA4)

  • skonfigurujemy zdarzenia e-commerce

  • w razie potrzeby dołożymy Pixele lub inne narzędzia

Screen: opcja "zainstaluj menadżera tagów"

 

4. Pobranie kodu Google Tag Manager 📄

Gdy kontener Google Tag Manager jest już gotowy, kolejnym krokiem jest pobranie kodu instalacyjnego, który będziemy osadzać w WordPressie.

Spersonalizowany kod gotowy do wklejenia naszej wtyczki

Co robimy w tym kroku:

  • otwieramy instrukcję instalacji Google Tag Managera

  • wyświetlane są dwa fragmenty kodu, które Google wyraźnie rozdziela:

    • <script> — do umieszczenia w <head> strony

    • <noscript> — do umieszczenia bezpośrednio po otwarciu <body>

To okno zostaw otwarte w przeglądarce. Kod który widzisz będzie nam zaraz potrzebny.

 

5. Instalacja wtyczki DC WP Header&Footer Scripts 🔧

Instalacja ręczna (ZIP)

Zanim przejdziemy do wklejania kodu Google Tag Managera, musimy zainstalować wtyczkę, która umożliwi nam precyzyjne dodanie skryptów do head, body i footera.

 

📥 Skąd pobieramy wtyczkę?

Wtyczkę DC WP Header&Footer Scripts pobieramy bezpośrednio z naszego LAB-a:

👉 https://www.designcart.pl/laboratorium/285-plugin-dla-wordpress-pozwalajacy-na-dodawanie-skryptow-do-header-i-footer-strony-internetowej-dc-wp-header-footer-scripts.html

Pobieramy plik ZIP na komputer — nie rozpakowujemy go.

 

⚙️ Instalacja krok po kroku

Poniżej wykonujemy standardową instalację ręczną w WordPressie.

Krok 1: Dodanie nowej wtyczki

Przechodzimy do:
WordPress → Wtyczki → Dodaj nową

Screen: boczne menu - dodaj wtyczkę

 

Krok 2: Wysyłanie wtyczki na serwer

Klikamy przycisk:
„Wyślij wtyczkę na serwer”

Screen: opcja wyślij wtyczkę na serwer

 

Krok 3: Wybór pliku ZIP

Wybieramy wcześniej pobrany plik wtyczki z dysku komputera.

Screen: wybierz wtyczkę z swojego komputera

 

Krok 4: Instalacja wtyczki

Klikamy Zainstaluj teraz i czekamy na zakończenie procesu.

Screen: zainstaluj wtyczkę

 

Krok 5: Aktywacja wtyczki

Po zakończeniu instalacji klikamy Aktywuj wtyczkę.

Screen: po instalacji włącz wtyczkę

 

✅ Na tym etapie wtyczka jest zainstalowana i aktywna.
Nie konfigurujemy jej jeszcze — zrobimy to w kolejnym kroku.

W następnej sekcji przejdziemy do ustawień wtyczki i wklejenia kodu Google Tag Managera we właściwe miejsca 🚀

 

6. Przejście do ustawień wtyczki ⚙️

Po aktywacji wtyczki możemy przejść do miejsca, w którym będziemy wklejać kod Google Tag Managera.

Co robimy w tym kroku:

  • w panelu WordPressa przechodzimy do:
    Ustawienia → DC Header & Footer Scripts

To jest jedyne miejsce, w którym będziemy pracować z tą wtyczką — bez dodatkowych zakładek, kreatorów czy popupów.

Screen: boczne menu - przejdź do ustawień wtyczki

 

Krótka orientacja w ustawieniach 🧭

Po wejściu do ustawień zobaczysz trzy główne pola:

  • HEAD
    Tutaj wklejamy skrypty, które mają znaleźć się w <head> strony
    (np. główny <script> Google Tag Managera).

  • BODY open
    To pole odpowiada za skrypty wstawiane bezpośrednio po otwarciu <body>
    (np. fragment <noscript> GTM).

  • FOOTER
    Skrypty ładowane na końcu strony
    (w tym kursie nie będziemy z niego korzystać).

Screen: formularz ustawień wtyczki

Na razie nic jeszcze nie wklejamy — w kolejnym kroku zajmiemy się dokładnie tym, co trafia do którego pola 🧩

 

7. Wklejenie kodu GTM we właściwe miejsca 🧩

Konfiguracja wtyczki

W tym kroku wykonujemy najważniejszą czynność w całym procesie — wklejamy kod Google Tag Managera dokładnie tam, gdzie powinien się znaleźć.

Pracujemy cały czas w ustawieniach wtyczki DC Header & Footer Scripts.

 

🧠 HEAD — główny kod GTM

Do pola HEAD wklejamy pierwszy fragment kodu GTM, czyli:

  • fragment <script>

  • ten, który Google wyraźnie oznacza jako kod do umieszczenia w <head>

Screen: kopiujemy kod Google Tag Menadżer

Po wklejeniu:

  • nie zmieniamy treści kodu

  • nie dodajemy nic od siebie

  • nie usuwamy komentarzy

 

🧱 BODY OPEN — fragment <noscript>

Do pola BODY open wklejamy drugi fragment kodu GTM, czyli:

  • element <noscript>

  • zawierający iframe Google Tag Managera

Ten fragment musi znaleźć się:

  • bezpośrednio po otwarciu <body>

  • dokładnie tam, gdzie umieszcza go hook wp_body_open

 

⚠️ Bardzo ważne — czego NIE robimy

📌 Nie wklejamy nic do footera
W tym kursie pole FOOTER zostaje puste.

📌 Nie modyfikujemy kodu GTM
Nie:

  • skracamy

  • nie „czyścimy”

  • nie zmieniamy atrybutów

  • nie dostosowujemy pod siebie

Kod wklejamy 1:1, dokładnie taki, jaki dostarcza Google.

Po zapisaniu Screen: zapisz zmiany ustawień wtyczki kod GTM jest już osadzony w WordPressie poprawnie. 
W kolejnym kroku sprawdzimy, czy wszystko faktycznie znalazło się we właściwym miejscu w źródle strony 🔍

 

8. Wymaganie techniczne: wp_body_open() ⚠️

Ten krok jest krótki, ale bardzo ważny.
Od niego zależy, czy fragment <noscript> Google Tag Managera faktycznie pojawi się we właściwym miejscu w kodzie strony.

Dlaczego wp_body_open() jest potrzebne

wp_body_open() to oficjalny hook WordPressa, który uruchamia się zaraz po otwarciu znacznika <body>.

Właśnie w tym miejscu:

  • Google zaleca umieszczenie fragmentu <noscript> GTM

  • wtyczki mają możliwość poprawnego „podpięcia się” do struktury strony

Bez tego hooka nie da się technicznie poprawnie wstawić kodu „body open”.

 

Co się stanie, jeśli motyw go nie ma

Jeśli motyw nie wywołuje wp_body_open(), to:

  • pole BODY open w wtyczce nie zadziała

  • fragment <noscript> nie pojawi się w HTML-u strony

  • wdrożenie GTM będzie niekompletne, nawet jeśli reszta wygląda poprawnie

To jeden z najczęstszych powodów sytuacji:

„Wszystko wygląda OK, ale nie zbiera danych”.

 

9. Sprawdzenie poprawności instalacji 🔍

Zanim przejdziemy dalej, musimy upewnić się, że kod Google Tag Managera faktycznie znalazł się w odpowiednich miejscach. To prosty, ale bardzo ważny krok kontrolny.

 

Jak sprawdzić poprawność instalacji:

  1. Otwórz sklep w trybie incognito
    Dzięki temu wykluczamy wpływ cache, zalogowanego użytkownika i rozszerzeń przeglądarki.

  2. Pokaż źródło strony

    • prawy przycisk myszy → Pokaż źródło strony

    • lub skrót klawiaturowy Ctrl + U

  3. Sprawdź dwa kluczowe miejsca w kodzie HTML:

    • ✅ <script> Google Tag Managera w <head>
      Powinien znajdować się między znacznikami <head> i </head>.

    • ✅ <noscript> Google Tag Managera zaraz po <body>
      Fragment z iframe GTM powinien być widoczny bezpośrednio po otwarciu znacznika <body>, a nie niżej w kodzie.

Jeśli oba elementy są na swoich miejscach — instalacja jest poprawna.

 

📌 Checklist kontrolny

Przed przejściem dalej upewnij się, że:

  • ✔️ kod GTM nie występuje podwójnie

  • ✔️ nie masz zainstalowanych innych wtyczek do GTM lub Google Analytics

  • ✔️ kod nie jest wklejony jednocześnie ręcznie i przez wtyczkę

Duplikacja tagów to jeden z najczęstszych powodów błędnych danych.

 

Podsumowanie lekcji 🧠

W tej lekcji:

  • użyliśmy jednej wtyczki

  • podpięliśmy jeden kontener Google Tag Managera

  • zachowaliśmy pełną kontrolę nad kodem

To wdrożenie jest gotowe pod:

  • Google Analytics

  • Google Ads

  • Pixele reklamowe

  • Hotjar i inne narzędzia analityczne

Bez zmiany architektury i bez dokładania kolejnych wtyczek.

Nie instalujemy wtyczek do narzędzi.
Instalujemy jedną wtyczkę do kodu.

Sprawdź także naszą ofertę tworzenia sklepów internetowych oraz ofertę dla sklepów Woocommerce

Autor: Paweł Nosko