Integracja tagu Google z systemem CMS lub kreatorem witryn

Tag Google (gtag.js) to fragment kodu, który można dodać do witryny, aby mierzyć aktywność użytkowników w różnych usługach Google, m.in. w Google Analytics 4, Google Ads i Google Marketing Platform. Więcej informacji o tagu Google

Z tego przewodnika dowiesz się, jak zintegrować tag Google z systemem zarządzania treścią (CMS) lub kreatorem witryn, aby zapewnić użytkownikom dostęp do usług pomiarowych Google.

Odbiorcy

Ten przewodnik jest przeznaczony dla właścicieli systemów zarządzania treścią (CMS) i twórców witryn, którzy chcą zapewnić użytkownikom integrację z usługami pomiarowymi Google. Ten przewodnik nie jest przeznaczony dla użytkowników systemów CMS ani kreatorów witryn.

Zanim zaczniesz

Upewnij się, że masz identyfikator dewelopera tagu Google. Jeśli nie masz identyfikatora dewelopera tagu Google, wypełnij formularz prośby o identyfikator dewelopera tagu Google. Identyfikator dewelopera różni się od innych identyfikatorów, np. identyfikatora pomiaru lub identyfikatora konwersji, które użytkownicy dodają do kodu pomiarowego witryny.

Przegląd

Aby zintegrować swoją platformę z usługami Google, wykonaj te czynności:

  1. Tworzenie integracji z tagiem Google
  2. Aktualizowanie struktury danych wejściowych użytkownika
  3. Wdrażanie interfejsu Consent API
  4. Konfigurowanie danych zdarzenia
  5. Sprawdzanie zaktualizowanej integracji
  6. Aktualizowanie instrukcji wdrażania użytkownika

Tworzenie integracji z tagiem Google

Dzięki integracji z tagiem Google Twoi klienci mogą wdrażać usługi pomiarowe Google (za pomocą tagu gtag.js) na każdej stronie swojej witryny. Zanim utworzysz integrację z tagiem gtag.js, usuń wszystkie dotychczasowe integracje tagów starszego typu (np. analytics.js).

Aby utworzyć integrację z tagiem Google, zastąp obecny fragment kodu tym fragmentem. Sprawdź, czy użytkownicy mogą zastąpić ciąg TAG_ID własnym identyfikatorem tagu.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE_TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID

  gtag('config', 'GOOGLE_TAG_ID');
</script>

Pamiętaj:

  • Reklamodawcy mogą zrezygnować z funkcji personalizacji reklam, takich jak remarketing, używając parametru allow_ad_personalization_signals (przeczytaj sekcję Wyłączanie zbierania danych dotyczących reklam spersonalizowanych).
  • W idealnej sytuacji fragment kodu tagu Google powinien się pojawić na każdej stronie tylko raz. Fragment kodu może zawierać wiele identyfikatorów tagu. Jeśli masz już wystąpienie tagu gtag.js, dodaj do niego nowe identyfikatory. Więcej informacji

Aktualizowanie struktury danych wejściowych użytkownika

Twoi klienci powinni mieć możliwość podawania różnych identyfikatorów tagu Google w jednym interfejsie niezależnie od wdrażanej usługi pomiarowej Google.

Przykład poniżej pokazuje proste dane wejściowe tagu Google. Integracja powinna być przedstawiona w formie wdrożenia tagu Google. Może ona być „metodą wdrażania Google Ads i Google Analytics”.

Obraz pola do wprowadzania identyfikatora tagu Google

Na diagramie poniżej widać też, jak na platformie mogą występować osobne przepływy użytkowników do Analytics i Google Ads, ale każdy proces prowadzi do jednego interfejsu, w którym użytkownicy podają swój identyfikator tagu Google.

Obraz przedstawiający Analytics i Google Ads
prowadzący do jednego przepływu danych wejściowych

Dane wejściowe identyfikatora tagu powinny akceptować wiele wariantów identyfikatora z użyciem wzorca wyrażenia regularnego [A–Z]{1,3}\w{5,}[\w]*

Tag Google ma wbudowany interfejs Consent API, który służy do zarządzania zgodą użytkowników. Umożliwia odróżnienie zgody użytkownika na stosowanie plików cookie w celach reklamowych od tych do celów analitycznych.

Spodziewamy się, że klienci uzyskają zintegrowaną co najmniej jedną rozmowę w usłudze gtag('consent', 'update' {...}) i nie będą musieli nic robić. Dzięki temu tagi Google (Google Ads, Floodlight, Google Analytics, tag łączący konwersje) będą mogły odczytywać najnowszy stan zgody użytkownika i uwzględniać go w żądaniach sieciowych wysyłanych do Google (za pomocą parametru &gcs).

Dodatkowe kroki wdrożeniowe to wdrożenie lub pomoc reklamodawcom we wdrażaniu (np. za pomocą interfejsu) stanu gtag('consent', default' {...}) i odblokowywaniu tagów Google (tj. bez uruchamiania warunkowego opartego na uzyskaniu zgody użytkownika) w celu włączenia trybu uzyskiwania zgody i uruchomienia tagów w sposób uwzględniający zgodę użytkownika.

Szczegółowe informacje o implementacji znajdziesz w artykule Zarządzanie ustawieniami uzyskiwania zgody użytkowników (strony internetowe).

Konfigurowanie danych zdarzenia

Trzeba wysyłać szczegółowe dane zdarzeń ze strony klienta na jego konto Google bez żadnych działań. Możesz np.dodać zdarzenia na ścieżce zakupu (np. add_to_cart, begin_checkout, add_payment_info, add_shipping_info i purchase), zwiększanie liczby potencjalnych klientów i rejestracje.

Poniżej znajdziesz sprawdzone metody dodawania zdarzeń:

  • Zapisuj wszystko, co możliwe
  • Skonfiguruj co najmniej 8 zdarzeń podstawowych
  • Nadawanie priorytetu zdarzeniom e-commerce

Zapisuj wszystko, co możliwe

Jeśli to możliwe, skonfiguruj zdarzenia domyślnie. Obejmuje to m.in.:

  • zdarzenia konwersji, np. purchase lub sign_up;
  • Zdarzenia poprzedzające zdarzenia konwersji, np. add_to_cart
  • Zaangażowanie (np. interakcje z mediami), które pomagają klientom zrozumieć, jak wchodzą w interakcje z ich użytkownikami

Fragmenty kodu zdarzenia konwersji należy dodawać tylko do stron konwersji (np. do stron z potwierdzeniem zakupu lub potwierdzeniem przesłania formularza). Pamiętaj, że nadal należy dodać tag Google na każdej stronie witryny.

Zdarzenia są wysyłane przy użyciu polecenia event. Obejmuje to ten sam identyfikator dewelopera tagu Google, który został podany w opisanym powyżej globalnym tagu witryny:

gtag('event', 'my_event', {
  'developer_id.<developer ID>': true,
  // Additional event parameters
});

Za pomocą polecenia event możesz na przykład wysłać zdarzenie login z wartością method równą „Google”:

gtag('event', 'login', {
  'developer_id.<developer ID>': true,
  'method': 'Google'
});
<!-- Event snippet for sales conversion page -->
<script>
  gtag('event', 'conversion', {
      'developer_id.<developer ID>': true,
      'value': <value>,
      'currency': '<currency>',
      'transaction_id': '<transaction_id>'
  });
</script>

Pamiętaj:

  • Identyfikator dewelopera <developer ID> jest unikalny i przypisany do Twojej platformy. Dołącz identyfikator do każdego wydarzenia.
  • Te parametry są opcjonalne i można je pominąć:
    • 'value' to wartość liczbowa konwersji (np. cena zakupu)
    • 'currency' to trzyliterowy kod waluty, przydatny dla reklamodawców, którzy akceptują wiele walut.
    • 'transaction_id' to unikalny identyfikator transakcji (np. identyfikator zamówienia), który służy do usuwania duplikatów.
  • Choć niektóre parametry są opcjonalne, zalecamy podanie jak największej ilości informacji o każdym zdarzeniu.
    • Parametry dostarczają dodatkowych informacji o sposobach, w jakie użytkownicy wchodzą w interakcje z Twoją witryną lub aplikacją. Gdy np. ktoś wyświetla produkt, który sprzedajesz, możesz uwzględnić parametry opisujące ten produkt, takie jak nazwa, kategoria i cena.
    • Niektóre parametry automatycznie wypełniają gotowe wymiary i dane w Google Analytics, dzięki czemu użytkownicy mogą lepiej poznać swoich klientów.

Jeśli chcesz mierzyć zdarzenie konwersji na podstawie kliknięcia (np. kliknięcia przycisku lub odpowiedzi dynamicznej w przypadku witryny korzystającej z AJAX), możesz też użyć tego fragmentu kodu:

<!-- Event snippet for sales conversion page
    In your HTML page, add the snippet and call gtag_report_conversion
    when someone clicks on the chosen link or button. -->
<script>
  function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
    'developer_id.<developer ID>': true,
    'value': <value>,
    'currency': '<currency>',
    'transaction_id': '<transaction_id>',
    'event_callback': callback
  });
  return false;
}
</script>

Skonfiguruj co najmniej 8 zdarzeń podstawowych

Zalecamy skonfigurowanie podstawowego zestawu zdarzeń, które są najcenniejsze dla właścicieli witryn. Zalecamy skonfigurowanie przynajmniej tych zdarzeń:

  • view_item_list: gdy użytkownik wyświetla listę produktów (np. listę produktów). Więcej informacji

    gtag('event', 'view_item_list', {
      item_list_id: "related_products",
      item_list_name: "Related products",
      items: [{
        item_id: "SKU_123",
        item_name: "Test Item",
        currency: "USD",
        discount: 2.22,
        price: 99.9,
        quantity: 1
      }]
    });
    
  • add_to_cart: gdy użytkownik doda co najmniej jeden produkt do koszyka. Więcej informacji

    gtag('event', 'add_to_cart', {
      value: 99.0,
      currency: "USD",
      items: [{
        item_id: "SKU_123",
        item_name: "Test Product",
        price: 99.0,
        currency: ‘USD’,
        quantity: 1,
        item_category: "All Products"
      }]
    });
    
  • begin_checkout: gdy użytkownik rozpoczyna proces płatności za co najmniej 1 produkt. Więcej informacji

    gtag('event', 'begin_checkout') {
      value: 99.0,
      currency: "USD",
      items: [{
        item_id: "SKU_123",
        item_name: "Test Product",
        price: 99.0,
        currency: ‘USD’,
        quantity: 1,
        item_category: "All Products"
      }]
    });
    
  • purchase: gdy użytkownik kupi co najmniej jeden produkt lub jedną usługę. Więcej informacji

    gtag('event', 'purchase', {value: XX, currency: 'USD', items: [{xx},{xx}]});
    
  • sign_up: gdy użytkownik rejestruje się, aby mógł zobaczyć najpopularniejsze metody rejestracji (np. konto Google czy adres e-mail). Więcej informacji

    gtag('event', 'sign_up', {method: 'web'});
    
  • generate_lead: gdy użytkownik prześle formularz. Więcej informacji

    gtag('event', 'generate_lead', {value: XX, currency: 'USD'});
    
  • subscribe: gdy użytkownik zasubskrybuje usługę lub newsletter.

    gtag('event', 'subscribe', {value: XX, currency: 'USD', coupon: 'XX'});
    
  • book_appointment: gdy użytkownik rezerwuje spotkanie.

    gtag('event', 'book_appointment', {value: XX, currency: 'USD', coupon: 'XX'});
    

Dodatkowe rekomendacje

Google obsługuje znacznie więcej zdarzeń i parametrów, zwłaszcza w przypadku e-commerce. Ogólnie zalecamy stosowanie następujących danych:

  • Każde zdarzenie sukcesu powiązane bezpośrednio z wartością
  • Zdarzenia sukcesu, które przyczyniły się do najważniejszych konwersji (add_to_cart, sign_up itp.)
  • Zaangażowanie użytkowników i interakcje, które pomagają reklamodawcom zrozumieć, jak angażują ich

W tych dodatkowych materiałach znajdziesz dodatkowe informacje o rejestrowaniu zdarzeń:

Jesteśmy ciekawi ewentualnych rozszerzeń tego schematu, więc daj nam znać, jeśli masz jakieś sugestie.

Sprawdzanie zaktualizowanej integracji

Zanim przeniesiesz zmiany do środowiska produkcyjnego, sprawdź zgodność z tymi wymaganiami:

  • Tag Google z miejscem docelowym Google Analytics 4
  • Tag Google do remarketingu i pomiaru konwersji

Korzystając z jednego z tych narzędzi, sprawdź też, czy tag uruchamia się prawidłowo na wszystkich stronach, w tym na stronach konwersji:

  • Tag Assistant: Tag Assistant pozwala sprawdzać, które tagi Google się uruchamiały i w jakiej kolejności. Tryb debugowania w Asystencie tagów pokazuje, jakie dane są przekazywane do warstwy danych i jakie zdarzenia wywołały tę wymianę danych.
  • Narzędzia dla deweloperów w Chrome: użyj karty Sieć, aby filtrować żądania zawierające słowo „google”, aby sprawdzić, jak mają być wysyłane dane.
  • (Po stronie serwera) Raport Czas rzeczywisty Google Analytics: Utwórz bezpłatne konto Google Analytics i skorzystaj z raportu Czas rzeczywisty, aby sprawdzić, czy działania tagu są odbierane przez serwery Google.

Aby zgłosić błąd lub przesłać opinię na temat brakujących informacji, wypełnij formularz pomocy systemu zarządzania treścią.

Jeśli to możliwe, udostępnij Google dostęp do testów na potrzeby bieżącej weryfikacji.

Aktualizowanie instrukcji wdrażania użytkowników

Zaktualizuj dokumentację, aby podać jasne instrukcje dotyczące wdrażania usług pomiarowych Google w Twojej implementacji. Udostępnij wersję roboczą tych instrukcji, wypełniając formularz sprawdzania dokumentacji konfiguracji integracji z systemem CMS, abyśmy mogli przesłać opinię.