Cum se configurează urmărirea eCommerce GA4 pe Shopify? Ghid pas cu pas

Publicat: 2022-09-13
  • Cum se instalează Google Tag Manager ( GTM ) pe Shopify?
    • Prima etapă: adăugați codul de container GTM și scriptul pentru detaliile clientului la theme.liquid sub <head>.
    • Faza a doua: adăugați codul de container GTM și scriptul pentru detaliile clientului pe pagina de finalizare a achiziției.
  • Creați o variabilă de strat de date pe GTM
  • Creați etichetă de vizualizare a paginii GA4 pe GTM
  • Urmăriți view_item și achiziționați ca eveniment și treceți în GA4, precum și detaliile legate de produs, în limitele utilizatorului
    • Prima etapă: Adăugați stratul de date view_item pe Shopify.
    • Faza a doua: creați declanșatorul GTM pentru view_item și evenimentul de cumpărare.
    • Faza a treia: Creați etichetă GTM.
  • Descărcați rețeta GTM

Cum se instalează Google Tag Manager ( GTM ) pe Shopify?

Prima etapă: adăugați codul de container GTM și scriptul pentru detaliile clientului la theme.liquid sub <head>.

  1. Conectați-vă la contul dvs. Gmail.
  2. Accesați Google Manager de etichete.
  3. Selectați contul GTM corect .
  4. Faceți clic pe ID-ul containerului GTM.
  5. Copiați primul script al codului containerului GTM care include instrucțiuni pentru a lipi codul în secțiunea <head>.
  6. Conectați-vă la magazinul dvs. Shopify și faceți clic pe Teme din Magazin online din partea stângă a panoului de navigare.
  7. Faceți clic pe Editați codul din meniul drop-down Acțiuni .
  8. Faceți clic pe theme.liquid sub Layout.
  9. Lipiți codul de container GTM copiat (la pasul 5) cât mai sus posibil în <head> a paginii.
  10. Copiați scriptul pentru detaliile clientului menționat mai jos și inserați-l în secțiunea <head>, deasupra codului containerului GTM .
  11. Faceți clic pe Salvare pe theme.liquid în colțul din dreapta sus.

Pasul 1: Conectați-vă la contul dvs. Gmail.

Pasul 2: Accesați Google Tag Manager urmând acest link: https://tagmanager.google.com/

Pasul 3: Selectați contul GTM corect

Select the correct GTM account

Pasul 4: faceți clic pe ID-ul containerului GTM

GTM - click on the container id

Pasul 5: copiați primul script al codului containerului GTM care include instrucțiuni pentru a lipi codul în secțiunea <head> .

copy the GTM container code

Pasul 6: Acum conectați-vă la magazinul dvs. Shopify și faceți clic pe Teme din Magazin online din panoul de navigare din stânga.

select themes under online store

Pasul 7: Faceți clic pe Editați codul din meniul drop-down Acțiuni .

Click on Edit code under Actions drop down

Pasul 8: Faceți clic pe theme.liquid sub Layout.

Click on theme.liquid

Pasul 9: inserați codul de container GTM copiat (la pasul 5) cât mai sus posibil în <head> a paginii.

Pasul 10: Copiați următorul script pentru detalii despre client. Acum, inserați-l în secțiunea <head> de deasupra codului containerului GTM, așa cum se arată în imaginea de mai jos. Acest script vă va ajuta să transmiteți datele în limitele utilizatorului către GA4.

Copie

 <script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
{% dacă client %}
userType: „membru”,
client: {
id: {{ customer.id }},
lastOrder: „{{ customer.orders.first.created_at | data: „%B %d, %Y %I:%M%p” }}”,
orderCount: {{ customer.orders.size }},
totalSpent: {% if customer %}{% assign total_spent = 0 %}{% pentru articolul din customer.orders %}{% assign total_spent = total_spent | plus: item.total_net_amount %}{% endfor %}{{ total_spent | bani_fără_monedă | eliminați:"," }}{% else %}""{% endif %},
etichete: {{- customer.tags | json -}}
},
{% altfel %}
userType: „vizitator”,
client: {
id: "",
ultima comanda: "",
orderCount: "",
totalSpent: "",
Etichete: ""
},
{% endif %}
});
</script>

User data script above the GTM code

Pasul 11: Faceți clic pe Salvare pe theme.liquid în colțul din dreapta sus.

Click save on theme.liquid

Bine făcut !!

Ați terminat prima fază de adăugare a codului de container GTM la Shopify. Apoi, va trebui să adăugați codul de container GTM , scriptul pentru detaliile clientului și să cumpărați Stratul de date pe pagina de finalizare a achiziției.

Faza a doua: Adăugați codul containerului GTM și scriptul pentru detaliile clientului și cumpărați Stratul de date pe pagina de finalizare a achiziției.

  1. Pe administratorul magazinului Shopify, faceți clic pe Setări din colțul din stânga jos.
  2. Faceți clic pe Checkout și conturi
  3. Derulați în jos și căutați Scripturile suplimentare sub ordinea din blocul de stare.
  4. Lipiți mai întâi codul containerului GTM. Acum, copiați următorul script pentru detaliile clientului și inserați-l deasupra codului containerului GTM.
  5. Copiați și inserați următorul strat de date de achiziție între scriptul pentru detaliile clientului și codul containerului GTM.

Pasul 1: Pe administratorul magazinului Shopify, faceți clic pe Setări din colțul din stânga jos.

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

Pasul 2: Faceți clic pe Checkout și conturi.

Click on Checkout and accounts

Pasul 3: Derulați în jos și căutați Scripturile suplimentare sub ordinea din blocul de stare.

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

Pasul 4: inserați mai întâi codul containerului GTM. Acum, copiați următorul script pentru detaliile clientului și inserați-l deasupra codului containerului GTM.

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

Pasul 5: Copiați și inserați următorul strat de date de achiziție între scriptul pentru detaliile clientului și codul containerului GTM.

Copie

 <script>{% if first_time_accessed %}
window.dataLayer.push({
'page_type': 'cumpărare',
„event”: „cumpărare”, /* creează un eveniment personalizat în GTM */
'transaction_id': '{{ order.name || order.order_number }}',
„totalValue”: {{ total_price | bani_fără_monedă | eliminați:',' }}, // Include taxele și transportul
„subtotalValue”: {{ subtotal_price | bani_fără_monedă | elimina:',' }},
„taxă”: {{ tax_price | bani_fără_monedă | elimina:',' }},
„livrare”: {{ shipping_price | bani_fără_monedă | elimina:',' }},
„currency”: „{{ shop.currency }}”,
„payment_type”: „{{ order.transactions[0].gateway }}”, //parametru opțional
„ecommerce”: {
'checkout_currency': '{{ checkout.currency }}', 
„valoare”: „{{ checkout.total_price | bani_fără_monedă | eliminați:',' }}', // totalul comenzii (prețul tuturor produselor + transport)
„tax”: „{{ checkout.tax_price | bani_fără_monedă | eliminați:',' }}', // taxă
'livrare':'{{ checkout.shipping_price | bani_fără_monedă | eliminați:',' }}', // costurile de expediere
'transaction_id': '{{ transactions[0].id }}', // ID tranzacție
„articole”: [
{% pentru line_item în line_items %}
{
'item_name': '{{ line_item.product.title | înlocuiți: "'","##@@[email protected]@##" }}'.replace("##@@[email protected]@##", "'"), 
'item_id': '{{ line_item.sku || line_item.product.id }}',
„preț”: {{ line_item.final_price | bani_fără_monedă | elimina:',' }},
'item_brand': '{{ line_item.vendor }}',
„cantitate”: {{ line_item.quantity }},
'item_variant': '{{ line_item.variant.title }}'
},
{% endfor %}
]
}
});
{% endif %}
</script>

Pasul 6: Faceți clic pe Salvare în colțul din dreapta jos.

Felicitări! Ați adăugat cu succes codul de container GTM pe Shopify. Acum vom continua și vom crea variabile de strat de date pe GTM înainte de a face eticheta de vizualizare a paginii GA4. Când se încarcă eticheta de vizualizare a paginii, aceste variabile ne vor permite să colectăm și să transmitem date la nivelul utilizatorului către GA4.

Creați variabile de strat de date pe GTM

  1. Faceți clic pe Variabile din panoul de navigare din stânga pe GTM.
  2. Faceți clic pe Nou sub Variabile definite de utilizator.
  3. Faceți clic oriunde pe Configurare variabilă .
  4. Selectați Variabila stratului de date sub Variabile de pagină.
  5. Atribuiți un nume de variabilă pentru stratul de date .
  6. Redenumiți variabila și faceți clic pe Salvare.

Pasul 1: Faceți clic pe Variabile din panoul de navigare din stânga pe GTM.

Click on Variables on the left hand navigation panel

Pasul 2: Faceți clic pe Nou sub Variabile definite de utilizator.

Click New under User Defined Variables

Pasul 3: Faceți clic oriunde pe Configurare variabilă.

Click anywhere on Variable configuration

Pasul 4: Selectați Variabila stratului de date sub Variabile de pagină.

Select Data Layer variable under page variables

Pasul 5: Atribuiți un nume de variabilă pentru stratul de date .

Data Layer Variable Name

Pasul 6: Redenumiți variabila și faceți clic pe Salvare .

Rename the variable and click save

Urmând pașii menționați mai sus, creați variabilele Stratului de date menționate mai jos.

Numele variabilei stratului de date: Redenumiți variabila
numele de utilizator „dlv – client – ​​id – variabilă”
client.ultima comandă „dlv – client – ​​ultima comandă – variabilă”
customer.orderCount „dlv – client – ​​număr de comandă – variabilă”
client.etichete „dlv – client – ​​etichete – variabilă”
client.totalSpent „dlv – client – ​​totalSpent – ​​Variable”
client.userType „dlv – client – ​​userType – Variable”
eveniment „dlv – eveniment – ​​variabilă”

Creați etichetă de vizualizare a paginii GA4 pe GTM

  1. Accesați Google Analytics și selectați proprietatea GA4. https://analytics.google.com/
  2. Faceți clic pe pictograma roată din stânga jos.
  3. Faceți clic pe Fluxul de date de la nivelul proprietății.
  4. Selectați fluxul web și faceți clic pe săgeata (>).
  5. Copiați ID-ul de măsurare GA4.
  6. Accesați Google Manager de etichete. https://tagmanager.google.com/
  7. Faceți clic pe Adăugați o etichetă nouă.
  8. Faceți clic oriunde pe configurația etichetei.
  9. Selectați Google Analytics: Configurare GA4.
  10. Lipiți ID-ul de măsurare GA4 copiat anterior în caseta „ID măsurare”.
  11. Sub Câmpuri de setat, faceți clic pe rândul de adăugare, apoi adăugați numele câmpului și valoarea acestuia.
  12. Sub Proprietăți utilizator, adăugați următoarele ca Nume și valoare proprietății.
  13. Faceți clic oriunde pe Declanșare.
  14. Selectați Toate paginile ca declanșator.
  15. Redenumiți eticheta și faceți clic pe Salvați.

Pasul 1: Accesați Google Analytics și selectați proprietatea GA4. https://analytics.google.com/

Pasul 2: Faceți clic pe pictograma roată din stânga jos.

Click on the Gear Icon bottom left hand

Pasul 3: Faceți clic pe Fluxuri de date sub nivelul de proprietate.

Click on the Data Stream under property level

Pasul 4: Selectați fluxul web și faceți clic pe săgeata (>)

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

Pasul 5: Copiați ID-ul de măsurare GA4.

Copy the GA4 Measurement ID

Pasul 6: Accesați Google Manager de etichete. https://tagmanager.google.com/

Pasul 7: Faceți clic pe Adăugați o nouă etichetă.

Click On Add a new tag

Pasul 8: Faceți clic oriunde în configurația etichetei.

Click anywhere on the tag configuration

Pasul 9: Selectați Google Analytics: Configurare GA4.

Select Google Analytics: GA4 Configuration

Pasul 10: Lipiți ID-ul de măsurare GA4 copiat anterior în caseta „ID măsurare”.

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

Pasul 11: Sub Câmpuri de setat, faceți clic pe rândul de adăugare, apoi adăugați numele câmpului și valoarea acestuia, așa cum este menționat mai jos:

Nume câmp: user_id

Valoare: {{dlv – client – ​​id – variabilă}}

5 adăugați ID de utilizator sub Câmpuri de setat

Pasul 12: Sub Proprietăți utilizator, adăugați numele și valoarea proprietății după cum este menționat mai jos.

Numele proprietatii Valoare
Număr de înregistrare client {{dlv – client – ​​id – variabilă}}
ultima comanda {{dlv – client – ​​ultima comandă – Variabilă}}
număr_comandă {{dlv – client – ​​număr de comenzi – variabilă}}
total_cheltuit {{dlv – client – ​​total cheltuit – Variabil}}
tip de utilizator {{dlv – client – ​​tip de utilizator – variabilă}}

User Properties Assign Property Name and value

Pasul 13: Faceți clic oriunde pe Declanșare.

Configurare declanșare - Faceți clic oriunde

Pasul 14: Selectați Toate paginile ca declanșator.

Select All Pages as a Trigger Type

Pasul 15: Redenumiți eticheta.

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

Sclipitor!

Ați creat acum eticheta de vizualizare a paginii GA4.

Acum să aruncăm o privire la cum să urmărim evenimentul view_item pe măsură ce cineva vede pagina produsului și să transmitem detaliile necesare către GA4.

Urmăriți și transmiteți view_item și date despre evenimente de cumpărare către GA4.

Adăugați stratul de date view_item pe Shopify.

  1. Conectați-vă la magazinul dvs. Shopify și faceți clic pe Teme din Magazin online din panoul de navigare din stânga.
  2. Faceți clic pe Editați codul din meniul drop-down Acțiuni.
  3. Faceți clic pe main-product.liquid din Secțiuni.
  4. Copiați și inserați scriptul Data Layer menționat mai jos.
  5. Faceți clic pe Salvare pe principal-product.liquid în colțul din dreapta sus

Pasul 1: Conectați-vă la magazinul dvs. Shopify și faceți clic pe Teme din Magazin online din panoul de navigare din stânga.

select themes under online store

Secțiunea 2: Faceți clic pe Editați codul din meniul drop-down Acțiuni.

Click on Edit code under Actions drop down

Secțiunea 3: Faceți clic pe principal-product.liquid sub Secțiuni.

Click on the main-product.liquid under Sections.

Pasul 4: Copiați și inserați scriptul Data Layer menționat mai jos.

Copie

 <script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
eveniment: „view_item”,
comerț electronic: {
articole: [{
item_name: „{{ product.title | înlocuiți: "'","##@@[email protected]@##" }}'.replace("##@@[email protected]@##", "'"),
item_id: „{% if product.sku %}{{ product.sku }}{% else %}{{ product.id}}{% endif %}”,
preț: „{{ product.price | money_without_currency | remove:',' }}”,
item_brand: "{{ product.vendor | remove: "'" | remove: '"' }}",
{% pentru colectare în product.collections %}
item_category{% unless forloop.index == 1 %}{{ forloop.index }}{% endunless %}: „{{ collection.title }}”,
{% endfor %}
item_variant: "{{ product.selected_or_first_available_variant.title | eliminați: "'" | eliminați: '"' }}",
cantitate: '1'
}]
}
});
</script>

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

Pasul 5: Faceți clic pe Salvare pe principal-product.liquid în colțul din dreapta sus.

Click save on the main-product.liquid under Sections

Creați declanșatorul GTM pentru view_item și evenimentul de cumpărare.

  1. Accesați Google Manager de etichete.
  2. Faceți clic pe Trigger în panoul de navigare din stânga.
  3. Faceți clic pe Nou.
  4. Faceți clic oriunde pe Configurare declanșare.
  5. Selectați Eveniment personalizat sub Altele.
  6. Atribuiți Nume eveniment view_item.
  7. Redenumiți declanșatorul CE – EEC – view_item – Trigger și faceți clic pe Salvare.

NOTĂ:

  1. Atribuiți Nume eveniment ca achiziție
  2. Redenumiți declanșatorul CE – EEC – achiziție – Trigger și faceți clic pe Salvare.

Pasul 1: Accesați Google Manager de etichete.

Pasul 2: Faceți clic pe Trigger din panoul de navigare din stânga.

Click on Trigger on the left hand navigation panel

Pasul 3: Faceți clic pe Nou.

Click New

Pasul 4: Faceți clic oriunde pe Configurarea declanșatorului.

Click anywhere on Trigger configuration

Pasul 5: Selectați Eveniment personalizat sub Altele.

Select Custom Event under Other

Pasul 6: Atribuiți Nume eveniment view_item.

Assign Event Name as view_item

Pasul 7: Redenumiți declanșatorul CE – EEC – view_item – Trigger și faceți clic pe Salvare.

Rename the Trigger - view_item

Cu acești pași, ați creat declanșatorul evenimentului view_item. Acum va trebui să declanșați un eveniment de achiziție. Pentru a declanșa un eveniment de achiziție, urmați primii 5 pași de mai sus.

Pasul 8: Atribuiți Nume eveniment ca achiziție

custom event name purchase

Pasul 9: Redenumiți declanșatorul ca CE – EEC – cumpărare – Declanșare și faceți clic pe Salvare.

Rename the Trigger - purchase

Dacă ați urmat toți pașii, ați făcut aproape totul pentru a colecta view_item și pentru a cumpăra date legate de evenimente din magazinul dvs. Shopify cu datele vizate de utilizator. Acum să vedem cum să transmitem aceste detalii către GA4 utilizând Managerul de etichete Google.

Creați etichetă GTM pentru view_item și evenimentul de cumpărare.

  1. Faceți clic pe Etichetă din panoul de navigare din stânga.
  2. Faceți clic pe Nou.
  3. Faceți clic oriunde pe Configurare etichetă.
  4. Selectați „Google Analytics: eveniment GA4” sub Etichetă recomandată.
  5. În Etichetă de configurare, selectați „GA4 – Vizualizare pagină – Etichetă” din meniul drop-down.
  6. Atribuiți un nume de eveniment. Selectați variabila dataLayer creată anterior – {{dlv – eveniment – ​​variabilă}}
  7. Faceți clic pe Mai multe setări și selectați Trimiteți date de comerț electronic sub Comerț electronic. Selectați Stratul de date ca sursă de date.
  8. Faceți clic oriunde pe Declanșare.
  9. Selectați declanșatorul creat anterior „CE – EEC – view_item – Trigger” pentru evenimentul view_item.
  10. Treceți cu mouse-ul în colțul din dreapta sus al secțiunii Trigger și faceți clic pe pictograma creion.
  11. Faceți clic pe pictograma plus acum.
  12. Selectați declanșatorul evenimentului de achiziție numit „CE – achiziție – declanșare”.
  13. Redenumiți eticheta: „GA4 – EEC event – ​​Tag” și faceți clic pe Salvare.

Pasul 1: Faceți clic pe Etichetă din panoul de navigare din stânga.

Click on tag on the left hand navigation panel

Pasul 2: Faceți clic pe Nou.

Click New

Pasul 3: faceți clic oriunde pe Configurarea etichetei.

Tag Configuration - Click Anywhere

Pasul 4: selectați „Google Analytics: eveniment GA4” sub Eticheta recomandată.

Select Google Analytics GA4 Event under Featured Tag

Pasul 5: În Etichetă de configurare, selectați „GA4 – Vizualizare pagină – Etichetă” din meniul drop-down.

Select Configuration Tag form the drop down

Pasul 6: Atribuiți un nume de eveniment. Selectați variabila Data Layer creată anterior – {{dlv – eveniment – ​​variabilă}}

Event Name Select the previously made Data Layer variable

Pasul 7: Faceți clic pe Mai multe setări și selectați Trimiteți date de comerț electronic sub Comerț electronic. Selectați Stratul de date ca sursă de date.

More Settings Send eCommerce Data select Data Layer as datasource

Pasul 8: Faceți clic oriunde pe Declanșare.

Trigger Configuration - Click Anywhere

Pasul 9: Selectați declanșatorul creat anterior „CE – EEC – view_item – Trigger” pentru evenimentul view_item.

select view item trigger

Pasul 10: plasați cursorul în colțul din dreapta sus al secțiunii Trigger și faceți clic pe pictograma creion.

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

Pasul 11: Faceți clic pe pictograma plus acum.

Click on this plus icon

Pasul 12: Selectați declanșatorul evenimentului de achiziție numit „CE – achiziție – Trigger”.

Select purchase event trigger

Pasul 13: Redenumiți eticheta: „GA4 – EEC event – ​​Tag” și faceți clic pe Salvare.

Rename the tag and click save

Felicitări

Cu acest ghid, acum puteți urmări vizualizarea produselor și achiziționarea datelor despre evenimente pe GA4. De asemenea, puteți vizualiza rapoartele pe GA4 urmând acești pași.

Pasul unu: Accesați proprietatea GA4.
Pasul doi: Faceți clic pe Rapoarte din panoul de navigare din stânga.
Pasul trei: faceți clic pe Monetizare, apoi faceți clic pe Achiziții de comerț electronic.

Dacă doriți să obțineți containerul GTM pregătit pentru acest ghid, vă recomand cu căldură să descărcați rețeta GTM.

Descărcați rețeta GTM

Concluzie

Cu acest ghid pas cu pas, am făcut toate măsurile pentru a aborda și rezolva problema arzătoare a tuturor proprietarilor de magazine Shopify. Urmărirea comerțului electronic poate avea multe nuanțe și este dificil de abordat cu o singură postare pe blog. Dacă aveți întrebări, nu ezitați să vă contactați pe LinkedIn și să vă adresați întrebările acolo.