Súgó
Bejelentkezés

Google Tag Manager egyéni pixel létrehozása

A Google Tag Manager (GTM) használatával egyéni pixelként kezelheti a harmadik féltől származó pixeleket.

Amikor készen áll a GTM egyéni pixel tesztelésére, használja a Shopify Pixel Helpert, hogy megbizonyosodjon arról, hogy az összes követni kívánt esemény hibamentesen bekerül a tesztkörnyezetbe.

A Google Tag Assistant oldalbővítményt is használhatja annak tesztelésére, hogy mely Google-címkék töltődnek be az oldalon. A Google Tag Assistant Troubleshoot tag funkciója azonban nem kompatibilis az egyéni pixelekkel, és nem észlel semmilyen Google-címkét az egyéni pixelben, illetve a GTM által betöltött egyéb pixeleket sem.

Ezen az oldalon

Felkészülés egyéni pixel létrehozására

Mielőtt egyéni pixelt hozna létre a Google Tag Manager használatával, tekintse át az alábbi információkat, hogy megbizonyosodjon arról, hogy érti a pixel konfigurálásának módját:

Google Tag Manager egyéni pixel létrehozása

Létrehozhat egy Google Tag Manager egyéni pixelt a harmadik féltől származó pixelek kezeléséhez.

Lépések:

  1. Nyissa meg a Google Tag Manager-fiókját, és válassza ki azt a fiókot, amellyel egyéni pixelt szeretne beállítani.
  2. Kattintson az Adminisztráció, majd a Google Tag Manager telepítése lehetőségre a telepítési kód megnyitásához.
  3. Másolja ki az oldal head szakaszába tartozó kódblokkot.
  4. Távolítsa el a HTML-címkéket a kódblokkból. Például: <script></script>.
  5. Illessze be a fennmaradó kódot egy új Shopify Custom Pixel-be.
  6. Feliratkozás a vásárlói eseményekre és azok továbbítása a GTM dataLayer rétegébe.
  7. A kód megjelenésének áttekintéséhez tekintse meg a Google Tag Manager egyéni pixelre vonatkozó példát.
  8. A Google Tag Manager konfigurálása az egyéni pixeltől érkező események fogadására.
  9. Opcionális: Ha a checkout.liquid fájljában már léteznek dataLayer.push(event) hívások, akkor cserélje le őket a következőre: analytics.publish().

Feliratkozás a vásárlói eseményekre és azok továbbítása a GTM adatrétegébe

Feliratkozhat a vásárlói eseményekre a GTM dataLayer használatával az egyéni pixelkódjában.

Alapértelmezés szerint van egy sor szabványos esemény, amelyekre feliratkozhat. Ha azonban olyan vásárlói eseményeket szeretne követni, amelyek nem részei a szabványos eseménykínálatnak, akkor saját egyéni eseményeket tehet közzé Liquid-sablonfájlokból.

Az alábbiakban egy példa látható a szabványos „product_viewed” eseményre való feliratkozásra, amely azt jelzi, amikor valaki megtekint egy terméket. Amikor az esemény aktiválódik, az eseményt a dataLayer-be továbbítja.

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    product_title: event.data?.productVariant?.title,
  });
});

Ebben a példában a terméknév az esemény payloadjában kerül átadásra. Egy Google Tag Manager-változó segítségével rögzítheti a terméknevet az esemény payloadjából az Ön által választott címkében.

Google Tag Manager egyéni pixel – példa

Az alábbi példa egy Google Tag Manager egyéni pixel egyszerűsített verziója, amely bemutatja, hogyan küldhet adatokat a Google Tag Managerbe. Ha további eseményeket szeretne továbbítani a dataLayer-be, feliratkozhat további szabványos és egyéni eseményekre.

// 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,
  });
});

A Google Tag Manager konfigurálása az egyéni pixeltől érkező események fogadására

Miután létrehozta az egyéni pixelt, konfigurálnia kell a Google Tag Managert, hogy fogadja az eseményeket az egyéni pixelből. Ehhez szüksége lesz egy címkére, egy kiváltóra és dataLayer-változókra a Google Tag Managerben.

A következő táblázat néhány példát sorol fel a kiválasztott szabványos vásárlói eseményekről és azok Google Tag Manager-megfelelőiről:

A pixelekkel használható szabványos Shopify vásárlói események listája, összehasonlítva a Google Tag Managerben lévő megfelelő vásárlói eseményekkel, valamint az események aktiválásához szükséges kiváltókkal.
Shopify-eseményKiváltóGTM-esemény
payment_info_submittedFizetési adatok elküldéseadd_payment_info
checkout_address_info_submittedSzállítási adatok elküldéseadd_shipping_info
product_added_to_cartTétel hozzáadása a bevásárlókosárhozadd_to_cart
checkout_startedFizetés megkezdésebegin_checkout
checkout_completedFizetés befejezésepurchase
product_removed_from_cartTétel eltávolítása a kosárbólremove_from_cart
cart_viewedBevásárlókosár megtekintéseview_cart
product_viewedTermékadatlap megtekintéseview_item
collection_viewedTételek listájának megtekintéseview_item_list

A GTM-címke eseményparamétereinek meg kell felelniük a várt elnevezési konvencióknak ahhoz, hogy az egyéni pixel dataLayer-eseményei feldolgozhatók legyenek.

Az alábbiakban néhány példa látható a kiválasztott egyéni pixel dataLayer-eseménytulajdonságaira és azok Google Analytics 4 (GA4) eseményparaméter-megfelelőire:

Az egyéni pixel dataLayer-eseményeinek listája a GA4 elnevezési konvenció használatával.
Egyéni pixel dataLayer-eseményeiGA4 eseményparaméterek
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?.totalTaxadó
event.data?.checkout?.lineItemstételek

Íme egy példa a következő checkout_completed esemény használatával:

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,
  });
});

A Google Tag Manager-kiváltó egy egyéni eseménytípus checkout_completed eseménynévvel. A kiváltó „Event name” mezőjének meg kell egyeznie az egyéni pixelben lévő event kulccsal.

Az orderId és a currency azok a változók, amelyeket a Google Tag Managerben az eseményből származó adatok rögzítésére használ. Ezek hozzárendelhetők egy dataLayer-változóhoz a Google Tag Managerben. Minden eseményváltozóhoz saját dataLayer-változó szükséges. Állítsa be a kiváltót úgy, hogy minden egyéni eseményre aktiválódjon.

Hozzon létre egy címkét, amely az imént létrehozott kiváltót használja. Az eseményparaméterek alatt adja hozzá a rögzíteni kívánt változókat. A fenti példában az orderId, a currency, a price, a shippingLine és a totalTax dataLayer-változóként lenne beállítva. Minden alkalommal, amikor a címke aktiválódik, az eseménnyel együtt rögzíti ezeket a dataLayer-változókat.

Ne feledje, hogy az adatátvitelhez legalább egy címkét és egy kiváltót be kell állítani a Google Tag Managerben.

A régi dataLayer.push(event) hívások cseréje analytics.publish()-ra

Ha korábban már beállította a Google Tag Managert, akkor a dataLayer.push hívásokat le kell cserélnie Shopify.analytics.publish() hívásokra. A dataLayer.push hívásokat a theme.liquid fájlokban, a témaszerkesztő „Layout” szakaszában találja.

A checkout.liquid fájlban lévő dataLayer.push hívásokat is le kell cserélnie. Azonban mivel a checkout.liquid nem kompatibilis a Shopify Extensionsszel, egy UI-bővítményt kell használnia az adatok webpixelekbe való továbbításához.

Az alábbiakban egy egyszerűsített példa látható egy egyéni e-mail-regisztrációs esemény követésére a dataLayer használatával a theme.liquid fájlokban:

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

A Shopify-megfelelő a következő, amely az adatokat az egyéni pixelbe továbbítja:

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

Ezután az egyéni pixelkódjába valami hasonlót kell hozzáadnia:

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

A régi dataLayer.push(data) lecserélése

A Google Tag Manager rendelkezik egy olyan funkcióval, amely lehetővé teszi, hogy minden eseménynél egy állapotinformációt tartalmazó dataLayer-objektumot továbbítson. Bár a Shopify-pixel homokozója nem tartalmaz ezzel egyenértékű funkciót, ugyanazt az eredményt érheti el, ha létrehoz egy saját adatobjektumot, és azt átadja az egyéni eseményeknek.

Például definiáljon egy „customData” objektumot, mielőtt bármelyik egyéni eseményét közzétenné:

<script>
  const customData = {email: customer.email}
</script>

Ezután, amikor az egyéni adatait is bele szeretné foglalni, adja át a közzétételi metódusnak:

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

Tippek a Google Analytics 4 beállításához

Vegye figyelembe a következő tippeket a Google Analytics 4 (GA4) beállításához, amikor a Google Tag Managert egyéni pixelként használja.

Tisztább oldal URL-ek

Amikor a GA4 homokozóban fut, észreveheti, hogy az oldal URL-jei információkat tartalmaznak arról a homokozóról, amelyben működik. Ha el szeretné távolítani a homokozóval kapcsolatos információkat ezekből az URL-ekből, akkor kikapcsolhatja a GA4 automatikus oldalkövetését, és helyette sajátot implementálhat a standard page_viewed esemény használatával.

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

Miután közzétette saját eseményét a dataLayer-ben, létrehozhat egy GA4 page_view címkét, amely a page_viewed eseményre aktiválódik. Leggyakrabban a Google Analytics: GA4 Event címketípust használhatja, és az „Event Name” (eseménynév) mezőt page_view-ra állíthatja. Miután beállította a címketípust és az eseménynevet, hozzá kell adnia egy page_location paramétert, és az értékét ugyanarra az értékre kell beállítania, amelyet az egyéni pixelből a dataLayer-nek átadott.

Továbbfejlesztett mérés

Amikor a GA4-et a Shopify-pixel homokozójában tölti be, egyes eseményeket, amelyeket a rendszer általában automatikusan kikövetkeztet, manuálisan kell beállítani. Például a kimenő linkekre való kattintások, amelyek a GA4 Továbbfejlesztett mérés beállításának részét képezik, biztonsági okokból nem aktiválhatók automatikusan egyéni pixelek használatakor. Azonban a GA4 továbbfejlesztett mérési eseményeit Ön is implementálhatja egyéni eseményként.

Az alábbi kód egy egyszerűsített példát tartalmaz a kimenő linkekre való kattintások követésére:

<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>

Végül a GTM-ben hozzon létre egy GA4-címkét, amely elküldi a linkre kattintást a GA4-nek. Az eseménynévnek click-nek kell lennie, hogy megfeleljen a GA4 továbbfejlesztett eseményelnevezésének.

Ugyanezt a követést valósíthatja meg a Google bármely továbbfejlesztett mérési mérőszámára.

Az egyéni pixel tesztelése és hibakeresése

Amikor készen áll a GTM egyéni pixel tesztelésére, használja a Shopify Pixel Helpert, hogy megbizonyosodjon arról, hogy az összes követni kívánt esemény hibamentesen bekerül a tesztkörnyezetbe.

A Google Tag Assistant oldalbővítményt is használhatja annak tesztelésére, hogy mely Google-címkék töltődnek be az oldalon. A Google Tag Assistant Troubleshoot tag funkciója azonban nem kompatibilis az egyéni pixelekkel, és nem észlel semmilyen Google-címkét az egyéni pixelben, illetve a GTM által betöltött egyéb pixeleket sem.