Crearea unui pixel personalizat Google Tag Manager
Puteți utiliza Google Tag Manager (GTM) ca pixel personalizat pentru a vă gestiona pixelii externi.
Când sunteți gata să vă testați pixelul personalizat GTM, utilizați Shopify Pixel Helper pentru a vă asigura că toate evenimentele pe care doriți să le urmăriți sunt adăugate în sandbox fără erori.
De asemenea, puteți utiliza extensia de pagină Google Tag Assistant pentru a testa ce etichete Google sunt încărcate pe pagină. Cu toate acestea, funcția Depanare etichetă a Google Tag Assistant nu este compatibilă cu pixelii personalizați și nu detectează nicio etichetă Google într-un pixel personalizat sau alți pixeli încărcați de GTM.
Pe această pagină
Pregătirea pentru crearea unui pixel personalizat
Înainte de a crea un pixel personalizat utilizând Google Tag Manager, examinați următoarele informații pentru a vă asigura că înțelegeți cum să vă configurați pixelul:
- Creați sau deschideți un cont Google Tag Manager și obțineți ID-ul de container GTM.
- Din motive de securitate, managerii de etichete încărcați în sandbox-ul nostru au aceleași restricții ca orice alți pixeli. Aflați mai multe despre limitările sandbox-ului pentru pixeli.
Crearea unui pixel personalizat Google Tag Manager
Puteți crea un pixel personalizat Google Tag Manager pentru a vă gestiona pixelii externi.
Pași:
- Deschideți contul dvs. Google Tag Manager și selectați contul în care doriți să configurați un pixel personalizat.
- Faceți clic pe Admin, apoi faceți clic pe Install Google Tag Manager pentru a deschide codul de instalare.
- Copiați blocul de cod care aparține secțiunii
heada unei pagini. - Eliminați etichetele HTML din blocul de cod. De exemplu,
<script></script>. - Introduceți codul rămas într-un nou Pixel personalizat Shopify.
- Abonați-vă la evenimentele clienților și transmiteți-le în dataLayer-ul GTM.
- Pentru a examina cum ar trebui să se afișeze codul, consultați exemplul de pixel personalizat Google Tag Manager.
- Configurați Google Tag Manager pentru a accepta evenimente de la pixelul dvs. personalizat.
- Opțional: Dacă aveți apeluri
dataLayer.push(event) existente în fișierul dvs.checkout.liquid, atunci înlocuiți-le cu analytics.publish().
Abonarea la evenimentele clienților și transmiterea acestora către data layer-ul GTM
Vă puteți abona la evenimentele clienților utilizând dataLayer-ul GTM în codul dvs. de pixel personalizat.
În mod implicit, există un set de evenimente standard la care vă puteți abona. Cu toate acestea, dacă doriți să urmăriți evenimente ale clienților care nu fac parte din oferta de evenimente standard, atunci puteți publica propriile evenimente personalizate din fișierele șablon Liquid.
Mai jos este un exemplu de abonare la evenimentul standard „product_viewed”, care indică momentul în care cineva vizualizează un produs. Când se declanșează evenimentul, acesta transmite evenimentul către dataLayer.
analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
event: "product_viewed",
product_title: event.data?.productVariant?.title,
});
});În acest exemplu, titlul produsului este transmis în sarcina utilă a evenimentului. Puteți utiliza o variabilă Google Tag Manager pentru a captura titlul produsului din sarcina utilă a evenimentului în eticheta la alegere.
Exemplu de pixel personalizat Google Tag Manager
Exemplul de mai jos este o versiune simplificată a unui pixel personalizat Google Tag Manager, care arată cum să trimiteți date către Google Tag Manager. Pentru a transmite mai multe evenimente către dataLayer-ul dvs., vă puteți abona la mai multe evenimente standard și personalizate.
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
//Initialize GTM tag
(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');
//Google Consent Mode v2
gtag('consent', 'update', {
'ad_storage': 'granted',
'analytics_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
});
//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("payment_info_submitted", (event) => {
window.dataLayer.push({
event: "payment_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_shipping_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_shipping_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_address_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_address_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_contact_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_contact_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_started", (event) => {
window.dataLayer.push({
event: "checkout_started",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("product_added_to_cart", (event) => {
window.dataLayer.push({
event: "product_added_to_cart",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
price: event.data?.cartLine?.merchandise?.price?.amount,
currency: event.data?.cartLine?.merchandise?.id,
product_title: event.data?.cartLine?.merchandise?.product?.title,
quantity: event.data?.cartLine?.quantity,
total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
});
});
analytics.subscribe("cart_viewed", (event) => {
window.dataLayer.push({
event: "cart_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
total_cost: event.data?.cart?.cost?.totalAmount?.amount,
quantity: event.data?.cart?.totalQuantity,
cart_id: event.data?.cart?.id,
});
});
analytics.subscribe("page_viewed", (event) => {
window.dataLayer.push({
event: "page_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
page_title: event.context.document.title,
});
});
analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
event: "product_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
product_id: event.data?.productVariant?.product?.id,
product_title: event.data?.productVariant?.title,
product_sku: event.data?.productVariant?.sku,
});
});
analytics.subscribe("search_submitted", (event) => {
window.dataLayer.push({
event: "search_submitted",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
query: event.data?.searchResult?.query,
});
});
analytics.subscribe("collection_viewed", (event) => {
window.dataLayer.push({
event: "collection_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
collection_id: event.data?.collection?.id,
collection_title: event.data?.collection?.title,
});
});Configurarea Google Tag Manager pentru a accepta evenimente de la pixelul dvs. personalizat
După ce vă creați pixelul personalizat, trebuie să configurați Google Tag Manager pentru a accepta evenimente de la pixelul dvs. personalizat. Pentru a face acest lucru, aveți nevoie de o etichetă, un declanșator și variabile dataLayer în Google Tag Manager.
Câteva exemple de evenimente standard selectate ale clienților și echivalentele lor din Google Tag Manager sunt enumerate în tabelul următor:
| Eveniment Shopify | Declanșator | Eveniment GTM |
|---|---|---|
| payment_info_submitted | Transmiterea informațiilor de plată | add_payment_info |
| checkout_address_info_submitted | Transmiterea informațiilor de expediere | add_shipping_info |
| product_added_to_cart | Adăugarea unui articol în coșul de cumpărături | add_to_cart |
| checkout_started | Începerea plății | begin_checkout |
| checkout_completed | Finalizarea plății | purchase |
| product_removed_from_cart | Eliminarea articolului din coș | remove_from_cart |
| cart_viewed | Vizualizarea coșului de cumpărături | view_cart |
| product_viewed | Vizualizarea paginii cu detaliile produsului | view_item |
| collection_viewed | Vizualizarea unei liste de articole | view_item_list |
Parametrii de eveniment ai etichetei GTM trebuie să corespundă convențiilor de denumire așteptate pentru ca evenimentele dataLayer ale pixelului dvs. personalizat să fie procesate.
Câteva exemple de proprietăți de evenimente dataLayer ale pixelului personalizat selectate și parametrii lor de eveniment echivalenți din Google Analytics 4 (GA4) sunt după cum urmează:
Evenimente dataLayer ale pixelului personalizat | Parametrii evenimentului GA4 |
|---|---|
| event.data?.checkout?.currencyCode | currency |
| event.data?.checkout?.totalPrice?.amount | value |
| event.data?.checkout?.order?.id | transaction_id |
| event.data?.checkout?.discountAllocations | coupon |
| event.data?.checkout?.shippingLine?.price?.amount | shipping |
| event.data?.checkout?.totalTax | taxă |
| event.data?.checkout?.lineItems | items |
Iată un exemplu care utilizează următorul eveniment checkout_completed:
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
price: event.data.checkout.totalPrice.amount,
shippingLine: event.data.checkout.shippingLine.price.amount,
totalTax: event.data.checkout.totalTax,
});
});Declanșatorul Google Tag Manager este un tip de eveniment personalizat cu numele de eveniment checkout_completed. Câmpul Nume eveniment din declanșator trebuie să corespundă cu cheia event din pixelul dvs. personalizat.
orderId și currency sunt variabilele pe care le utilizați în Google Tag Manager pentru a captura datele din eveniment. Acestea pot fi mapate la o variabilă dataLayer în Google Tag Manager. Fiecare variabilă de eveniment necesită propria sa variabilă dataLayer. Setați declanșatorul să se activeze pentru toate evenimentele personalizate.
Creați o etichetă care utilizează declanșatorul pe care tocmai l-ați creat. Sub parametrii evenimentului, adăugați variabilele pe care doriți să le capturați. În exemplul de mai sus, orderId, currency, price, shippingLine și totalTax ar fi configurate ca variabile dataLayer. De fiecare dată când se activează eticheta, aceasta va captura variabilele dataLayer respective împreună cu evenimentul.
Rețineți că cel puțin o etichetă și un declanșator trebuie să fie configurate în Google Tag Manager pentru ca transferul de date să aibă loc.
Înlocuirea apelurilor vechi dataLayer.push(event) cu analytics.publish()
Dacă ați configurat anterior Google Tag Manager, atunci trebuie să înlocuiți apelurile dataLayer.push cu apeluri Shopify.analytics.publish(). Puteți găsi apelurile dataLayer.push în fișierele dvs. theme.liquid, în secțiunea Aspect a editorului de teme.
De asemenea, trebuie să înlocuiți apelurile dataLayer.push din checkout.liquid. Cu toate acestea, deoarece checkout.liquid nu este compatibil cu Shopify Extensions, trebuie să utilizați o extensie IU pentru a trimite date către pixelii web.
Mai jos este un exemplu simplificat al unui eveniment personalizat de înscriere prin e-mail, urmărit cu ajutorul dataLayer în fișierele theme.liquid:
<script>
dataLayer.push({ event: 'email_signup', email: customer.email });
</script>Echivalentul Shopify se afișează în acest mod, care trimite datele în pixelul dvs. personalizat:
<script>
Shopify.analytics.publish('email_signup', {email: customer.email });
</script>Apoi, în codul dvs. de pixel personalizat, ați adăuga ceva de genul acesta:
analytics.subscribe("email_signup", (event) => {
window.dataLayer.push({
'event': 'email_signup',
'email': event.customData.email,
});
});Înlocuirea vechiului dataLayer.push(data)
Google Tag Manager are o funcție care vă permite să trimiteți un obiect dataLayer cu stare la fiecare eveniment. Deși sandbox-ul de pixeli Shopify nu include o funcție echivalentă, puteți obține același rezultat creându-vă propriul obiect de date și transmițându-l în evenimente personalizate.
De exemplu, definiți un obiect „customData”, înainte ca oricare dintre evenimentele dvs. personalizate să fie publicate:
<script>
const customData = {email: customer.email}
</script>Apoi, ori de câte ori doriți să includeți datele personalizate, transmiteți-le în metoda dvs. de publicare:
<script>
Shopify.analytics.publish('email_signup', customData);
</script>Sfaturi pentru configurarea Google Analytics 4
Luați în considerare următoarele sfaturi pentru configurarea Google Analytics 4 (GA4) atunci când utilizați Google Tag Manager ca pixel personalizat.
URL-uri de pagină mai clare
Când GA4 rulează într-un sandbox, este posibil să observați că URL-urile paginilor includ informații despre sandbox-ul în care funcționează. Dacă doriți să eliminați informațiile despre sandbox din acele URL-uri, atunci puteți dezactiva urmărirea automată a paginilor în GA4 și, în schimb, să o implementați pe a dvs., utilizând evenimentul standard page_viewed.
analytics.subscribe('page_viewed', (event) => {
window.dataLayer.push({
'event': 'page_viewed',
'page_location': event.context.window.location.href,
'page_title': event.context.document.title,
});
});După ce vă publicați propriul eveniment în dataLayer, puteți crea o etichetă GA4 page_view care se declanșează la evenimentul page_viewed. Cel mai frecvent, puteți utiliza tipul de etichetă Google Analytics: Eveniment GA4 și să setați Numele evenimentului la page_view. După ce setați tipul de etichetă și numele evenimentului, trebuie să adăugați un parametru pentru page_location și să setați valoarea la aceeași valoare pe care ați transmis-o în dataLayer din pixelul dvs. personalizat.
Măsurare îmbunătățită
La încărcarea GA4 în sandbox-ul de pixeli Shopify, unele evenimente care în mod normal sunt deduse automat vor trebui configurate manual. De exemplu, clicurile pe linkurile externe, ca parte a setării de Măsurare îmbunătățită a GA4, nu pot fi declanșate automat din motive de securitate atunci când se utilizează pixeli personalizați. Cu toate acestea, este posibil să implementați singur evenimentele de măsurare îmbunătățită ale GA4 ca evenimente personalizate.
Codul de mai jos include un exemplu simplificat de urmărire a clicurilor pe linkurile externe:
<script>
function detectOutboundLink() {
// add your logic for determining if a link click is outbound
// if the link click is outbound then publish it
if (isOutboundLink) {
Shopify.analytics.publish('outbound_link', { link_url: link_url });
}
}
</script>În final, în GTM, creați o etichetă GA4 care trimite clicul pe link către GA4, asigurându-vă că numele evenimentului este click, pentru a corespunde cu denumirea îmbunătățită a evenimentelor GA4.
Puteți realiza aceeași urmărire pentru oricare dintre indicatorii de măsurare îmbunătățită de la Google.
Testați și depanați pixelul dvs. personalizat
Când sunteți gata să vă testați pixelul personalizat GTM, utilizați Shopify Pixel Helper pentru a vă asigura că toate evenimentele pe care doriți să le urmăriți sunt adăugate în sandbox fără erori.
De asemenea, puteți utiliza extensia de pagină Google Tag Assistant pentru a testa ce etichete Google sunt încărcate pe pagină. Cu toate acestea, funcția Depanare etichetă a Google Tag Assistant nu este compatibilă cu pixelii personalizați și nu detectează nicio etichetă Google într-un pixel personalizat sau alți pixeli încărcați de GTM.