Luo mukautettu Google Tag Manager -pikseli

Voit käyttää Google Tag Manageria (GTM) mukautettuna pikselinä, jolla hallinnoit kolmannen osapuolen pikseleitä.

Kun olet valmis testaamaan mukautettua pikseliä, voit testata sen Google Tag Assistantin vanhalla Chrome-laajennuksella. Google Tag Assistant ei toimi mukautettujen pikselien kanssa.

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

Voit luoda mukautetun Google Tag Manager -pikselin, jolla hallinnoit kolmannen osapuolen pikseleitä.

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 joukko vakiotapahtumia, joita voit tilata. Jos haluat kuitenkin seurata asiakastapahtumia, jotka eivät ole osa vakiotapahtumatarjontaa, voit julkaista omia mukautettuja tapahtumiasi 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 normaaleista asiakastapahtumista, joita käytetään yhdessä pikseleiden kanssa, ja niitä vastaavat asiakastapahtumat Google Tag Managerissa, sekä käynnistin, joka aloittaa tapahtumat.
Shopify-tapahtumaKäynnistinGTM-tapahtuma
payment_info_submittedMaksutietojen lähettäminenadd_payment_info
checkout_address_info_submittedToimitustietojen lähettäminenadd_shipping_info
product_added_to_cartTuotteen lisääminen ostoskoriinadd_to_cart
checkout_startedAloita kassavaihebegin_checkout
checkout_completedSuorita maksutapahtuma loppuunosta
product_removed_from_cartPoista tuotteet ostoskoristaremove_from_cart
cart_viewedNäytä ostoskoriview_cart
product_viewedTuotetietosivun näyttäminenview_item
collection_viewedTuoteluettelon näyttäminenview_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:

GA4-nimeämiskäytäntöä käyttävä mukautettujen dataLayer-pikselitapahtumien luettelo
Mukautetut dataLayer-pikselitapahtumatGA4-tapahtumaparametrit
event.data?.checkout?.currencyCodevaluutta
event.data?.checkout?.totalPrice?.amountvalue
event.data?.checkout?.order?.idtransaction_id
event.data?.checkout?.discountAllocationskuponki
event.data?.checkout?.shippingLine?.price?.amounttoimitus
event.data?.checkout?.totalTaxvero
event.data?.checkout?.lineItemstuotteet

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>

Shopifyn vastine näkyy näin, ja se vie tiedot mukautettuun pikseliisi.

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

Lisää sitten Mukautetun pikselin koodisi ‑kohtaan 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.

Mukautetun pikselin testaus ja virheenkorjaus

Vaiheet:

  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.
Etkö löydä hakemaasi vastausta? Autamme mielellämme.