Luo mukautettu Google Tag Manager -pikseli

Tämän sivun ohjeissa on ohjeet siihen, miten Google Tag Manageria (GTM) käytetään mukautetuna pikselinä kolmannen osapuolen pikseleiden hallintaan.

Mukautetun pikselin luonnin valmistelu

Ennen kuin luot mukautetun pikselin Google Tag Managerin avulla, tutustu seuraaviin tietoihin varmistaaksesi, että ymmärrät, miten pikselisi määritetään:

Mukautetun Google Tag Manager -pikselin luominen

Vaiheet:

  1. Avaa Google Tag Manager -tili ja valitse tili, jolla haluat määrittää mukautetun pikselin.
  2. Avaa asennuskoodi klikkaamalla Adminja sitten Asenna Google Tag Manager.
  3. Kopioi koodilohko, joka kuuluu sivun osaan head.
  4. Poista HTML-tunnisteet tästä koodilohkosta. Voit esimerkiksi <script></script>.
  5. Lisää jäljellä oleva koodi uuteen Shopifyn mukautettuun pikseliin.
  6. Tilaa asiakastapahtumia ja vie ne GTM:n dataLayeriin.
  7. Jos haluat tarkistaa, miten koodin pitäisi näkyä, tutustu mukautetun Google Tag Manager -pikselin esimerkkiin.
  8. Määritä Google Tag Manager hyväksymään tapahtumia mukautetusta pikselistäsi.
  9. Valinnainen: Jos sinulla on olemassa olevia dataLayer.push(tapahtuma) -kutsuja check.liquid-tiedostossasi, korvaa se analytics.publish()-kutsuilla.

Asiakastapahtumien tilaaminen ja vienti GTM:n datalayeriin

Voit tilata asiakastapahtumia käyttämällä mukautetussa pikselikoodissasi olevaa GTM:n dataLayeria.

Oletusarvoisesti sinulla on vakioasiakastapahtumia, joita voit tilata. Jos haluat kuitenkin seurata asiakastapahtumia, jotka eivät ole osa vakiotapahtumatarjontaa, voit julkaista omia mukautettuja tapahtumia liquid-mallitiedostoista.

Alla on esimerkki tavallisen "product_viewed" -tapahtuman tilaamista varten. Tämä osoittaa, kun joku katsoo tuotetta. Kun tapahtuma käynnistyy, se vie tapahtuman dataLayeriin.

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

Tässä esimerkissä tuotteen nimi siirretään tapahtuman hyötykuormaan. Voit käyttää Google Tag Manager -muuttujaa, kun haluat napata tuotenimikkeen valitsemaasi tapahtumaan liittyvästä hyötykuormasta.

Esimerkki mukautetusta Google Tag Manager -pikselistä

Alla oleva esimerkki on mukautetun Google Tag Manager -pikselin yksinkertaistettu versio, jossa näytetään, miten tiedot lähetetään Google Tag Managerille. Jos haluat saada dataLayerille lisää tapahtumia, voit tilata enemmän vakiotapahtumia ja mukautettuja tapahtumia.

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

Google Tag Managerin määrittäminen hyväksymään tapahtumia mukautetusta pikselistäsi

Kun olet luonut mukautetun pikselin, sinun on määritettävä Google Tag Manager hyväksymään tapahtumia mukautetusta pikselistäsi. Tarvitset tätä varten tunnisteen, käynnistimen ja Google Tag Managerin dataLayer-muuttujat.

Esimerkkejä valikoidusta vakioasiakastapahtumista ja niiden vastaavista Google Tag Manager -tapahtumista on lueteltu seuraavassa taulukossa:

Luettelo Shopifyn vakioasiakastapahtumista ja niiden vastaavista tapahtumista GTM:ssä
Shopify-tapahtuma Käynnistin GTM-tapahtuma
payment_info_submitted Maksutietojen lähettäminen add_payment_info
checkout_address_info_submitted Toimitustietojen lähettäminen add_shipping_info
product_added_to_cart Tuotteen lisääminen ostoskoriin add_to_cart
checkout_started Aloita kassavaihe begin_checkout
checkout_completed Suorita maksutapahtuma loppuun osta
product_removed_from_cart Poista tuotteet ostoskorista remove_from_cart
cart_viewed Näytä ostoskori view_cart
product_viewed Tuotetietosivun näyttäminen view_item
collection_viewed Tuoteluettelon näyttäminen view_item_list

GTM-tunnisteen tapahtumaparametrien on vastattava odotettuja nimeämiskäytäntöjä, jotta mukautetut dataLayer-pikselitapahtumasi voidaan käsitellä.

Seuraavassa on esimerkkejä mukautetun pikselin dataLayer-tapahtuman ominaisuuksista ja niiden vastaavista Google Analytics 4 (GA4) -tapahtumaparametreista:

Mukautettujen dataLayer-pikselitapahtumien luettelon valitseminen GA4-nimeämiskäytäntöä käyttämällä
Mukautetut dataLayer-pikselitapahtumat GA4-tapahtumaparametrit
event.data?.checkout?.currencyCode valuutta
event.data?.checkout?.totalPrice?.amount value
event.data?.checkout?.order?.id transaction_id
event.data?.checkout?.discountAllocations kuponki
event.data?.checkout?.shippingLine?.price?.amount toimitus
event.data?.checkout?.totalTax vero
event.data?.checkout?.lineItems tuotteet

Esimerkki, jossa käytetään seuraavaa checkout_completed-tapahtumaa:

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

Google Tag Manager -käynnistin on mukautettu tapahtumatyyppi, jonka nimi on checkout_completed. Käynnistimen Tapahtuman nimi -kentän on vastattava mukautetun pikselisi tapahtuma-avainta.

orderId ja currency ovat muuttujia, joita käytät Google Tag Managerissa tietojen tallentamiseen tapahtumasta. Ne voidaan yhdistää Google Tag Managerin dataLayer-muuttujaan. Jokainen tapahtumamuuttuja edellyttää omaa dataLayer-muuttujaa. Aseta käynnistin käynnistymään kaikissa mukautetuissa tapahtumissa.

Luo tunniste, joka käyttää juuri luomaasi käynnistintä. Lisää tapahtumaparametrit-kohdassa muuttujat, jotka haluat tallentaa. Yllä olevassa esimerkissä orderId, valuutta, hinta, shippingLine ja totalTax määritettäisiin dataLayer-muuttujiksi. Joka kerta, kun tunniste käynnistyy, se poimii nämä dataLayer-muuttujat tapahtumasta.

Huomaa, että Google Tag Managerissa on määritettävä vähintään yksi tunniste ja käynnistin, jotta tiedonsiirto voisi tapahtua.

Vanhojen dataLayer.push(event) -kutsujen korvaaminen analytics.publish() -palvelulla

Jos olet aiemmin määrittänyt Google Tag Managerin, sinun on vaihdettava dataLayer.push-kutsusi Shopify.analytics.publish()-kutsuihin. Löydät dataLayer.push-kutsut teemaeditorin Asettelu-osiossa olevista theme.liquid-tiedostoistasi.

Sinun täytyy myös korvata dataLayer.push-kutsut checkout.liquidissa. Koska checkout.liquid ei kuitenkaan ole yhteensopiva kassavaiheen laajennusten kanssa, sinun on käytettävä käyttöliittymälaajennuksia tietojen viemiseen verkkopikseleihin push-toiminnolla.

Alla on yksinkertaistettu esimerkki mukautetusta sähköpostien kirjautumistapahtumasta, jota seurataan theme.liquid-tiedostojen dataLayerin avulla.

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

Shopify-vastine näyttää tältä, ja se vie tiedot mukautettuun pikseliisi.

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

Mukautetun pikselin koodisi lisäisi sitten jotain tällaista.

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

Korvaa vanha dataLayer.push(data)

Google Tag Managerissa on ominaisuus, jonka avulla voit viedä eri tiloja tukevan dataLayer-objektin jokaisessa tapahtumassa. Vaikka Shopifyn pikselin eristysympäristö ei sisällä vastaavaa ominaisuutta, voit saavuttaa saman tuloksen luomalla oman dataobjektisi ja viemällä sen mukautettuihin tapahtumiin.

Määritä esimerkiksi "customData"-objekti, ennen kuin mitään mukautettua tapahtumaasi julkaistaan.

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

Siirrä se sitten julkaisumenetelmääsi aina, kun haluat sisällyttää mukautetut tietosi.

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

Vinkkejä Google Analytics 4:n määrittämiseen

Ota huomioon seuraavat Google Analytics 4:n (GA4) määrittämiseen liittyvät vihjeet, kun käytät Google Tag Manageria mukautettuna pikselinä.

Selkeämmät sivun URL-osoitteet

Kun GA4 on käynnissä hiekkalaatikossa, saatat huomata, että sivun URL-osoitteet sisältävät tietoja hiekkalaatikosta, jossa se toimii. Jos haluat poistaa hiekkalaatikkotiedot kyseisistä URL-osoitteista, voit poistaa GA4:n automaattisen sivujen seurannan käytöstä ja sen sijaan ottaa käyttöön oman page_viewed-vakiotapahtuman avulla.

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

Kun olet julkaissut oman tapahtumasi dataLayer-koodissa, voit luoda GA4 page_view-tunnisteen, joka käynnistyy page_viewed-tapahtumassa. Yleisimmin voit käyttää Google Analytics GA4 Event ‑tunnistetyyppiä ja määrittää tapahtuman nimeksi page_view. Kun olet määrittänyt tunnistetyypin ja tapahtuman nimen, lisää parametri kohteelle page_location ja määritä arvoksi sama arvo, jonka olet siirtänyt dataLayer-koodiin mukautetulta pikseliltäsi.

Tehostettu mittaus

Kun lataat GA4:n Shopifyn pikselin hiekkalaatikkoon, jotkin tapahtumat, jotka normaalisti päätellään automaattisesti, on määritettävä manuaalisesti. Esimerkiksi lähtevien linkkien klikkauksia, osana GA4:n tehostetun mittauksen asetusta, ei voi käynnistää automaattisesti turvallisuussyistä, kun käytät mukautettuja pikseleitä. Voit kuitenkin ottaa itse käyttöön GA4:n tehostetun mittauksen tapahtumat mukautettuina tapahtumina.

Alla oleva koodi sisältää yksinkertaistetun esimerkin sivulta pois vievien linkkien klikkausten seurannasta.

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

Luo lopuksi GTM:ssä GA4-tunniste, joka lähettää linkin klikkauksen GA4:lle varmistamalla, että tapahtuman nimeä klikataan, jotta voidaan vastata GA4:n tehostetun tapahtuman nimeämiseen.

Voit saavuttaa saman seurannan kaikilla Googlen tehostetun tapahtuman mittareilla.

Testaus ja virheenkorjaus

  1. Avaa Shopify-kauppa Chrome-selaimessa.
  2. Lisää Google Tag Assistantin vanha Chrome-laajennus selaimeesi.
  3. Klikkaa laajennuksen kuvaketta ja valitse sitten Ota käyttöön.
  4. Siirry sivustollesi ja käynnistä sitten tapahtumat, joita haluat testata.
  5. Klikkaa laajennuksessa Google Tag Manager -tunnistetta. Data Layer -osiossa tulisi näkyä käynnistetyn tapahtuman hyötykuorma.
  6. Myös muut Google Tag Managerin lataamat tunnisteet on lueteltu laajennuksessa. Voit tarkistaa näille tunnisteille lähetetyt tiedot klikkaamalla näitä tunnisteita.

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi