Jak skonfigurować śledzenie eCommerce GA4 w Shopify? Przewodnik krok po kroku

Opublikowany: 2022-09-13
  • Jak zainstalować Menedżera tagów Google (GTM) w Shopify?
    • Faza pierwsza: dodaj kod kontenera GTM i skrypt szczegółów klienta do theme.liquid w sekcji <head>.
    • Faza druga: dodaj kod kontenera GTM i skrypt szczegółów klienta do strony kasy.
  • Utwórz zmienną warstwy danych w GTM
  • Utwórz tag wyświetlania strony GA4 w GTM
  • Śledź view_item i zakup jako zdarzenie i przekaż zakres użytkownika oraz szczegóły związane z produktem do GA4
    • Faza pierwsza: Dodaj warstwę danych view_item w Shopify.
    • Faza druga: utwórz wyzwalacz GTM dla zdarzenia view_item i zakupu.
    • Faza trzecia: Utwórz tag GTM.
  • Pobierz przepis GTM

Jak zainstalować Menedżera tagów Google (GTM) w Shopify?

Faza pierwsza: dodaj kod kontenera GTM i skrypt szczegółów klienta do theme.liquid w sekcji <head>.

  1. Zaloguj się na swoje konto Gmail.
  2. Przejdź do Menedżera tagów Google.
  3. Wybierz właściwe konto GTM.
  4. Kliknij identyfikator kontenera GTM .
  5. Skopiuj pierwszy skrypt kodu kontenera GTM, który zawiera instrukcje wklejenia kodu do sekcji <head>.
  6. Zaloguj się do swojego sklepu Shopify i kliknij Motywy w Sklepie internetowym po lewej stronie panelu nawigacyjnego.
  7. Kliknij Edytuj kod w menu rozwijanym Akcje .
  8. Kliknij theme.liquid w obszarze Układ.
  9. Wklej skopiowany kod kontenera GTM (w kroku 5) jak najwyżej w <nagłówku> strony.
  10. Skopiuj poniższy skrypt szczegółów klienta i wklej go w sekcji <head> nad kodem kontenera GTM .
  11. Kliknij Zapisz na theme.liquid w prawym górnym rogu.

Krok 1: Zaloguj się na swoje konto Gmail.

Krok 2: Przejdź do Menedżera tagów Google, klikając ten link: https://tagmanager.google.com/

Krok 3: Wybierz właściwe konto GTM

Select the correct GTM account

Krok 4: Kliknij identyfikator kontenera GTM

GTM - click on the container id

Krok 5: Skopiuj pierwszy skrypt kodu kontenera GTM, który zawiera instrukcje wklejenia kodu do sekcji <head> .

copy the GTM container code

Krok 6: Teraz zaloguj się do swojego sklepu Shopify i kliknij Motywy w Sklepie internetowym w lewym panelu nawigacyjnym.

select themes under online store

Krok 7: Kliknij Edytuj kod w menu rozwijanym Akcje .

Click on Edit code under Actions drop down

Krok 8: Kliknij theme.liquid w obszarze Układ.

Click on theme.liquid

Krok 9: Wklej skopiowany kod kontenera GTM (w kroku 5) jak najwyżej w <nagłówku> strony.

Krok 10: Skopiuj następujący skrypt szczegółów klienta. Teraz wklej go do sekcji <head> nad kodem kontenera GTM, jak pokazano na poniższym obrazku. Ten skrypt pomoże przekazać dane z zakresu USER do GA4.

Kopiuj

 <skrypt>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
{% jeśli klient %}
userType: "członek",
klient: {
id: {{ id.klienta }},
lastOrder: "{{ customer.orders.first.created_at | data: '%B %d, %Y %I:%M%p' }}",
orderCount: {{ customer.orders.size }},
totalSpent: {% if customer %}{% assign total_spent = 0 %}{% dla pozycji w customer.orders %}{% assign total_spent = total_spent | plus: item.total_net_amount %}{% endfor %}{{ total_spent | money_without_currency | usuń:"," }}{% else %}""{% endif %},
tagi: {{- klient.tags | json -}}
},
{% w przeciwnym razie %}
userType: "gość",
klient: {
ID: "",
ostatnie zamówienie: "",
OrderCount: "",
całkowite wydatki: "",
tagi: ""
},
{% endif %}
});
</script>

User data script above the GTM code

Krok 11: Kliknij Zapisz na theme.liquid w prawym górnym rogu.

Click save on theme.liquid

Bardzo dobrze !!

Zakończyłeś pierwszą fazę dodawania kodu kontenera GTM do Shopify. Następnie musisz dodać kod kontenera GTM , skrypt szczegółów klienta i zakupić warstwę danych na stronie kasy.

Faza druga: dodaj kod kontenera GTM i skrypt szczegółów klienta oraz kup warstwę danych na stronie kasy.

  1. W panelu administratora sklepu Shopify kliknij Ustawienia w lewym dolnym rogu.
  2. Kliknij Kasa i konta
  3. Przewiń w dół i poszukaj dodatkowych skryptów poniżej kolejności w bloku stanu.
  4. Najpierw wklej kod kontenera GTM. Teraz skopiuj poniższy skrypt szczegółów klienta i wklej go nad kodem kontenera GTM.
  5. Skopiuj i wklej następującą warstwę danych zakupu między skryptem szczegółów klienta a kodem kontenera GTM.

Krok 1: Na administratorze sklepu Shopify kliknij Ustawienia w lewym dolnym rogu.

On Shopify admin click on Settings towards the laft hand side bottom corner

Krok 2: Kliknij Kasa i konta.

Click on Checkout and accounts

Krok 3: Przewiń w dół i poszukaj dodatkowych skryptów poniżej kolejności w bloku stanu.

Scroll Down and below Order Status block look for the Additional Scripts

Krok 4. Najpierw wklej kod kontenera GTM. Teraz skopiuj poniższy skrypt szczegółów klienta i wklej go nad kodem kontenera GTM.

Paste the GTM container code first and above the GTM container code paste the customer details script

Krok 5: Skopiuj i wklej następującą warstwę danych zakupu między skryptem szczegółów klienta a kodem kontenera GTM.

Kopiuj

 <script>{% jeśli first_time_accessed %}
window.dataLayer.push({
'page_type': 'zakup',
'event': 'purchase', /* utwórz wydarzenie niestandardowe w GTM */
'transaction_id': '{{ nazwa.zamówienia || order.order_number }}',
'totalValue': {{ cena_całkowita | money_without_currency | usuń:',' }}, // Zawiera podatek i wysyłkę
'subtotalValue': {{ subtotal_price | money_without_currency | usunąć:',' }},
„podatek”: {{ cena_podatkowa | money_without_currency | usunąć:',' }},
„wysyłka”: {{ cena_wysyłki | money_without_currency | usunąć:',' }},
'currency': '{{ shop.currency }}',
'payment_type': '{{ order.transactions[0].gateway }}', //parametr opcjonalny
„e-commerce”: {
'checkout_currency': '{{ checkout.currency }}', 
'wartość': '{{ kasa.całkowita_cena | money_without_currency | usuń:',' }}', // suma zamówienia (cena wszystkich produktów + wysyłka)
'podatek': '{{ checkout.tax_price | money_without_currency | usuń:',' }}', // podatek
'dostawa':'{{ checkout.shipping_price | money_without_currency | usuń:',' }}', // koszty wysyłki
'transaction_id': '{{transakcje[0].id }}', // identyfikator transakcji
'przedmiotów': [
{% for line_item w line_items %}
{
'item_name': '{{ line_item.product.title | zamień: "'","##@@[chroniony adres e-mail]@##" }}'.replace("##@@[chroniony adres e-mail]@##", "'"), 
'item_id': '{{ line_item.sku || line_item.product.id }}',
„cena”: {{ line_item.final_price | money_without_currency | usunąć:',' }},
'item_brand': '{{ line_item.vendor }}',
'ilość': {{ line_item.quantity }},
'item_variant': '{{ line_item.variant.title }}'
},
{% endfor %}
]
}
});
{% endif %}
</script>

Krok 6: Kliknij Zapisz w prawym dolnym rogu.

Gratulacje! Pomyślnie dodałeś kod kontenera GTM w Shopify. Teraz będziemy kontynuować i tworzyć zmienne warstwy danych w GTM przed utworzeniem tagu wyświetlenia strony GA4. Gdy tag wyświetlenia strony zostanie załadowany, te zmienne pozwolą nam zbierać i przekazywać dane z zakresu użytkownika do GA4.

Utwórz zmienne warstwy danych w GTM

  1. Kliknij Zmienne w panelu nawigacyjnym po lewej stronie w GTM.
  2. Kliknij Nowy w sekcji Zmienne zdefiniowane przez użytkownika.
  3. Kliknij w dowolnym miejscu na Konfiguracja zmiennej .
  4. Wybierz opcję Zmienna warstwy danych w sekcji Zmienne strony.
  5. Przypisz nazwę zmiennej warstwy danych .
  6. Zmień nazwę zmiennej i kliknij Zapisz.

Krok 1: Kliknij Zmienne w lewym panelu nawigacyjnym GTM.

Click on Variables on the left hand navigation panel

Krok 2: Kliknij Nowy pod Zmienne zdefiniowane przez użytkownika.

Click New under User Defined Variables

Krok 3: Kliknij w dowolnym miejscu na konfiguracji zmiennej.

Click anywhere on Variable configuration

Krok 4: Wybierz zmienną warstwy danych w sekcji Zmienne strony.

Select Data Layer variable under page variables

Krok 5: Przypisz nazwę zmiennej warstwy danych .

Data Layer Variable Name

Krok 6: Zmień nazwę zmiennej i kliknij Zapisz .

Rename the variable and click save

Postępując zgodnie z powyższymi krokami, utwórz wymienione poniżej zmienne warstwy danych.

Nazwa zmiennej warstwy danych: Zmień nazwę zmiennej
identyfikator użytkownika „dlv – klient – ​​id – zmienna”
klient.ostatniezamówienie „dlv – klient – ​​ostatnie zamówienie – zmienna”
customer.orderCount „dlv – klient – ​​liczba zamówień – zmienna”
klient.tagi „dlv – klient – ​​tagi – Zmienna”
klient.całkowity wydatek „dlv – klient – ​​totalSpent – ​​zmienna”
klient.typ_użytkownika „dlv – klient – ​​typ użytkownika – zmienna”
wydarzenie „dlv – zdarzenie – Zmienna”

Utwórz tag wyświetlania strony GA4 w GTM

  1. Przejdź do Google Analytics i wybierz usługę GA4. https://analytics.google.com/
  2. Kliknij ikonę koła zębatego w lewym dolnym rogu.
  3. Kliknij strumień danych na poziomie właściwości.
  4. Wybierz strumień sieciowy i kliknij strzałkę (>).
  5. Skopiuj identyfikator pomiaru GA4.
  6. Przejdź do Menedżera tagów Google. https://tagmanager.google.com/
  7. Kliknij opcję Dodaj nowy tag.
  8. Kliknij w dowolnym miejscu konfiguracji tagu.
  9. Wybierz Google Analytics: Konfiguracja GA4.
  10. Wklej poprzednio skopiowany identyfikator pomiaru GA4 w polu „Identyfikator pomiaru”.
  11. W obszarze Pola do ustawienia kliknij wiersz dodawania, a następnie dodaj nazwę pola i jego wartość.
  12. W obszarze Właściwości użytkownika dodaj następujące elementy jako Nazwa i wartość właściwości.
  13. Kliknij w dowolnym miejscu wyzwalacza.
  14. Wybierz Wszystkie strony jako wyzwalacz.
  15. Zmień nazwę tagu i kliknij Zapisz.

Krok 1: Przejdź do Google Analytics i wybierz usługę GA4. https://analytics.google.com/

Krok 2: Kliknij ikonę koła zębatego w lewym dolnym rogu.

Click on the Gear Icon bottom left hand

Krok 3: Kliknij Strumienie danych poniżej poziomu usługi.

Click on the Data Stream under property level

Krok 4: Wybierz strumień sieciowy i kliknij strzałkę (>)

Select the Web Stream and click click the arrow (>)

Krok 5: Skopiuj identyfikator pomiaru GA4.

Copy the GA4 Measurement ID

Krok 6: Przejdź do Menedżera tagów Google. https://tagmanager.google.com/

Krok 7: Kliknij Dodaj nowy tag.

Click On Add a new tag

Krok 8: Kliknij w dowolnym miejscu konfiguracji tagów.

Click anywhere on the tag configuration

Krok 9: Wybierz Google Analytics: Konfiguracja GA4.

Select Google Analytics: GA4 Configuration

Krok 10: Wklej poprzednio skopiowany identyfikator pomiaru GA4 w polu „Identyfikator pomiaru”.

Paste the previously copied GA4 Measurement ID under the "Measurement ID" Box.

Krok 11: W obszarze Pola do ustawienia kliknij wiersz dodawania, a następnie dodaj nazwę pola i jego wartość, jak wspomniano poniżej:

Nazwa pola: identyfikator_użytkownika

Wartość: {{dlv – klient – ​​id – zmienna}}

5 dodaj identyfikator użytkownika w polach do ustawienia

Krok 12: W obszarze Właściwości użytkownika dodaj nazwę i wartość właściwości, jak wspomniano poniżej.

Nazwa właściwości Wartość
Identyfikator klienta {{dlv – klient – ​​id – zmienna}}
ostatnie zamówienie {{dlv – klient – ​​ostatnie zamówienie – zmienna}}
liczba_zamówień {{dlv – klient – ​​liczba zamówień – zmienna}}
całkowite wydatki {{dlv – klient – ​​całkowite wydatki – zmienna}}
typ użytkownika {{dlv – klient – ​​typ użytkownika – Zmienna}}

User Properties Assign Property Name and value

Krok 13: Kliknij w dowolnym miejscu wyzwalania.

Konfiguracja wyzwalacza — kliknij w dowolnym miejscu

Krok 14: Wybierz wszystkie strony jako wyzwalacz.

Select All Pages as a Trigger Type

Krok 15: Zmień nazwę tagu.

Rename as GA4 - Page View - Tag as and Click Save

Znakomity!

Udało Ci się teraz utworzyć tag wyświetlania strony GA4.

Przyjrzyjmy się teraz, jak śledzić zdarzenie view_item, gdy ktoś wyświetla stronę produktu i przekazuje niezbędne informacje do GA4.

Śledź i przekaż dane dotyczące view_item i zakupów do GA4.

Dodaj warstwę danych view_item w Shopify.

  1. Zaloguj się do swojego sklepu Shopify i kliknij Motywy w Sklepie internetowym w lewym panelu nawigacyjnym.
  2. Kliknij Edytuj kod w menu rozwijanym Akcje.
  3. Kliknij main-product.liquid w sekcji Sekcje.
  4. Skopiuj i wklej poniższy skrypt warstwy danych.
  5. Kliknij Zapisz w głównym produkcie.liquid w prawym górnym rogu

Krok 1: Zaloguj się do swojego sklepu Shopify i kliknij Motywy w Sklepie internetowym w lewym panelu nawigacyjnym.

select themes under online store

Sekcja 2: Kliknij Edytuj kod w menu rozwijanym Działania.

Click on Edit code under Actions drop down

Sekcja 3: Kliknij main-product.liquid w sekcji Sekcje.

Click on the main-product.liquid under Sections.

Krok 4: Skopiuj i wklej poniższy skrypt warstwy danych.

Kopiuj

 <skrypt>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
zdarzenie: 'view_item',
e-commerce: {
przedmiotów: [{
item_name: '{{ product.title | zamień: "'","##@@[chroniony adres e-mail]@##" }}'.replace("##@@[chroniony adres e-mail]@##", "'"),
item_id: "{% if product.sku %}{{ product.sku }}{% else %}{{ product.id}}{% endif %}",
cena: "{{ product.price | money_without_currency | usuń:',' }}",
item_brand: "{{ product.vendor | usuń: "'" | usuń: ""' }}",
{% do odbioru w product.collections %}
item_category{% chyba forloop.index == 1 %}{{ forloop.index }}{% endunless %}: "{{ collection.title }}",
{% endfor %}
item_variant: "{{ product.selected_or_first_available_variant.title | usuń: "'" | usuń: '"' }}",
Ilość: 1'
}]
}
});
</script>

Copy and Paste the below mentioned Data Layer script on the main-product.liquid under Sections

Krok 5: Kliknij Zapisz w main-product.liquid w prawym górnym rogu.

Click save on the main-product.liquid under Sections

Utwórz wyzwalacz GTM dla zdarzenia view_item i zakupu.

  1. Przejdź do Menedżera tagów Google.
  2. Kliknij Wyzwalacz w panelu nawigacyjnym po lewej stronie.
  3. Kliknij Nowy.
  4. Kliknij w dowolnym miejscu konfiguracji wyzwalacza.
  5. Wybierz Zdarzenie niestandardowe w sekcji Inne.
  6. Przypisz nazwę zdarzenia view_item.
  7. Zmień nazwę wyzwalacza CE – EEC – view_item – Trigger i kliknij Zapisz.

NOTATKA:

  1. Przypisz nazwę wydarzenia jako zakup
  2. Zmień nazwę wyzwalacza CE – EEC – zakup – Trigger i kliknij Zapisz.

Krok 1: Przejdź do Menedżera tagów Google.

Krok 2: Kliknij Wyzwalacz w panelu nawigacyjnym po lewej stronie.

Click on Trigger on the left hand navigation panel

Krok 3: Kliknij Nowy.

Click New

Krok 4: Kliknij w dowolnym miejscu konfiguracji wyzwalacza.

Click anywhere on Trigger configuration

Krok 5: Wybierz Zdarzenie niestandardowe w sekcji Inne.

Select Custom Event under Other

Krok 6: Przypisz nazwę zdarzenia view_item.

Assign Event Name as view_item

Krok 7: Zmień nazwę wyzwalacza CE – EEC – view_item – Trigger i kliknij Zapisz.

Rename the Trigger - view_item

Dzięki tym krokom utworzyłeś wyzwalacz zdarzenia view_item. Teraz musisz wywołać zdarzenie zakupu. Aby aktywować zdarzenie zakupu, wykonaj pierwsze 5 kroków powyżej.

Krok 8: Przypisz nazwę wydarzenia jako zakup

custom event name purchase

Krok 9: Zmień nazwę wyzwalacza na CE – EEC – zakup – Trigger i kliknij Zapisz.

Rename the Trigger - purchase

Jeśli wykonałeś wszystkie kroki, zrobiłeś prawie wszystko, aby zebrać view_item i zakupić dane związane ze zdarzeniami ze sklepu Shopify za pomocą danych o zakresie użytkownika. Zobaczmy teraz, jak przekazać te dane do GA4 za pomocą Menedżera tagów Google.

Utwórz tag GTM dla zdarzenia view_item i zakupu.

  1. Kliknij Tag w panelu nawigacyjnym po lewej stronie.
  2. Kliknij Nowy.
  3. Kliknij w dowolnym miejscu w konfiguracji tagów.
  4. Wybierz „Google Analytics: zdarzenie GA4” w sekcji Polecany tag.
  5. W tagu konfiguracji wybierz z menu „GA4 – Widok strony – Tag”.
  6. Przypisz nazwę zdarzenia. Wybierz wcześniej utworzoną zmienną dataLayer – {{dlv – zdarzenie – zmienna}}
  7. Kliknij Więcej ustawień i wybierz Wyślij dane e-commerce w sekcji E-commerce. Wybierz warstwę danych jako źródło danych.
  8. Kliknij w dowolnym miejscu na Wyzwalanie.
  9. Wybierz wcześniej utworzony wyzwalacz „CE – EEC – view_item – Trigger” dla zdarzenia view_item.
  10. Najedź na prawy górny róg sekcji Wyzwalacz i kliknij ikonę ołówka.
  11. Kliknij teraz ikonę plusa.
  12. Wybierz wyzwalacz zdarzenia zakupu o nazwie „CE – zakup – wyzwalacz”.
  13. Zmień nazwę tagu: „GA4 – Zdarzenie EEC – Tag” i kliknij Zapisz.

Krok 1: Kliknij Tag w panelu nawigacyjnym po lewej stronie.

Click on tag on the left hand navigation panel

Krok 2: Kliknij Nowy.

Click New

Krok 3: Kliknij w dowolnym miejscu na Konfiguracja tagów.

Tag Configuration - Click Anywhere

Krok 4: Wybierz „Google Analytics: Zdarzenie GA4” w sekcji Polecany tag.

Select Google Analytics GA4 Event under Featured Tag

Krok 5: W tagu konfiguracji wybierz z menu „GA4 – Widok strony – Tag”.

Select Configuration Tag form the drop down

Krok 6: Przypisz nazwę zdarzenia. Wybierz wcześniej utworzoną zmienną Warstwy Danych – {{dlv – zdarzenie – zmienna}}

Event Name Select the previously made Data Layer variable

Krok 7: Kliknij Więcej ustawień i wybierz Wyślij dane e-commerce w obszarze E-commerce. Wybierz warstwę danych jako źródło danych.

More Settings Send eCommerce Data select Data Layer as datasource

Krok 8: Kliknij w dowolnym miejscu na Wyzwalanie.

Trigger Configuration - Click Anywhere

Krok 9: Wybierz wcześniej utworzony wyzwalacz „CE – EEC – view_item – Trigger” dla zdarzenia view_item.

select view item trigger

Krok 10: Najedź na prawy górny róg sekcji Wyzwalacz i kliknij ikonę ołówka.

Hover over the trigger towards the right hand side top corner and click on pencil icon

Krok 11: Kliknij teraz ikonę plusa.

Click on this plus icon

Krok 12: Wybierz wyzwalacz zdarzenia zakupu o nazwie „CE – zakup – wyzwalacz”.

Select purchase event trigger

Krok 13: Zmień nazwę tagu: „GA4 – Zdarzenie EEC – Tag” i kliknij Zapisz.

Rename the tag and click save

Gratulacje

Dzięki temu przewodnikowi możesz teraz śledzić dane dotyczące wyświetlania produktów i zakupów w GA4. Możesz również przeglądać raporty dotyczące GA4, wykonując następujące kroki.

Krok pierwszy: Przejdź do właściwości GA4.
Krok drugi: Kliknij Raporty w lewym panelu nawigacyjnym.
Krok trzeci: Kliknij przycisk Zarabianie, a następnie kliknij Zakupy e-commerce.

Jeśli chcesz otrzymać gotowy kontener GTM do tego poradnika, gorąco polecam pobrać przepis na GTM.

Pobierz przepis GTM

Wniosek

Dzięki temu przewodnikowi krok po kroku zrobiłem wszystko, aby rozwiązać palący problem wszystkich właścicieli sklepów Shopify. Śledzenie e-commerce może mieć wiele niuansów i trudno je rozwiązać za pomocą jednego posta na blogu. Jeśli masz jakieś pytania, skontaktuj się ze mną na LinkedIn i zadaj tam swoje pytania.