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.

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:

Crearea unui pixel personalizat Google Tag Manager

Puteți crea un pixel personalizat Google Tag Manager pentru a vă gestiona pixelii externi.

Pași:

  1. Deschideți contul dvs. Google Tag Manager și selectați contul în care doriți să configurați un pixel personalizat.
  2. Faceți clic pe Admin, apoi faceți clic pe Install Google Tag Manager pentru a deschide codul de instalare.
  3. Copiați blocul de cod care aparține secțiunii head a unei pagini.
  4. Eliminați etichetele HTML din blocul de cod. De exemplu, <script></script>.
  5. Introduceți codul rămas într-un nou Pixel personalizat Shopify.
  6. Abonați-vă la evenimentele clienților și transmiteți-le în dataLayer-ul GTM.
  7. Pentru a examina cum ar trebui să se afișeze codul, consultați exemplul de pixel personalizat Google Tag Manager.
  8. Configurați Google Tag Manager pentru a accepta evenimente de la pixelul dvs. personalizat.
  9. 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:

Lista evenimentelor standard ale clienților Shopify de utilizat cu pixeli, în comparație cu evenimentele echivalente ale clienților din Google Tag Manager, plus declanșatorul necesar pentru ca evenimentele să se activeze.
Eveniment ShopifyDeclanșatorEveniment GTM
payment_info_submittedTransmiterea informațiilor de platăadd_payment_info
checkout_address_info_submittedTransmiterea informațiilor de expediereadd_shipping_info
product_added_to_cartAdăugarea unui articol în coșul de cumpărăturiadd_to_cart
checkout_startedÎnceperea plățiibegin_checkout
checkout_completedFinalizarea plățiipurchase
product_removed_from_cartEliminarea articolului din coșremove_from_cart
cart_viewedVizualizarea coșului de cumpărăturiview_cart
product_viewedVizualizarea paginii cu detaliile produsuluiview_item
collection_viewedVizualizarea unei liste de articoleview_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ă:

Lista evenimentelor dataLayer ale pixelului personalizat care utilizează convenția de denumire GA4
Evenimente dataLayer ale pixelului personalizatParametrii evenimentului GA4
event.data?.checkout?.currencyCodecurrency
event.data?.checkout?.totalPrice?.amountvalue
event.data?.checkout?.order?.idtransaction_id
event.data?.checkout?.discountAllocationscoupon
event.data?.checkout?.shippingLine?.price?.amountshipping
event.data?.checkout?.totalTaxtaxă
event.data?.checkout?.lineItemsitems

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.