Luo Google Tag Managerin mukautettu pikseli

Voit käyttää Google Tag Manageria (GTM) mukautettuna pikselinä kolmansien osapuolten pikselien hallintaan.

Kun olet valmis testaamaan GTM-mukautettua pikseliäsi, käytä Shopify Pixel Helperiä varmistaaksesi, että kaikki seurattavat tapahtumat lisätään sandboxiin virheettömästi.

Voit myös käyttää Google Tag Assistant -sivulaajennusta testataksesi, mitkä Google-tunnisteet ladataan sivulle. Google Tag Assistantin Troubleshoot tag -ominaisuus ei kuitenkaan ole yhteensopiva mukautettujen pikselien kanssa, eikä se tunnista Google-tunnisteita mukautetussa pikselissä tai muita GTM:n lataamia pikseleitä.

Tällä sivulla

Valmistautuminen mukautetun pikselin luomiseen

Ennen kuin luot mukautetun pikselin Google Tag Managerin avulla, tarkista seuraavat tiedot varmistaaksesi, että ymmärrät, miten pikseli määritetään:

Luo Google Tag Manager -tili tai avaa olemassa oleva ja hanki GTM-säiliön tunnus.
Turvallisuussyistä sandboxissamme ladatuilla tunnisteiden hallintaohjelmilla on samat rajoitukset kuin muillakin pikseleillä. Lue lisää pikselien sandbox-rajoituksista.

Luo Google Tag Managerin mukautettu pikseli

Voit luoda Google Tag Managerin mukautetun pikselin kolmansien osapuolten pikselien hallintaa varten.

Vaiheet:

Avaa Google Tag Manager -tilisi ja valitse tili, jolle haluat määrittää mukautetun pikselin.
Napsauta Ylläpitäjä ja sen jälkeen Asenna Google Tag Manager avataksesi asennuskoodin.
Kopioi koodilohko, joka kuuluu sivun head-osioon.
Poista HTML-tagit koodilohkosta. Esimerkiksi <script></script>.
Lisää jäljelle jäänyt koodi uuteen Shopifyn mukautettuun pikseliin.
Tilaa asiakastapahtumia ja siirrä ne GTM:n dataLayeriin.
Voit tarkastella koodin oikeaa näyttötapaa Google Tag Managerin mukautetun pikselin esimerkistä.
Määritä Google Tag Manager hyväksymään tapahtumia mukautetusta pikselistäsi.
Valinnainen: jos checkout.liquid-tiedostossasi on olemassa olevia dataLayer.push(event)-kutsuja, korvaa ne analytics.publish()-kutsulla.

Tilaa asiakastapahtumia ja siirrä ne GTM:n data layeriin

Voit tilata asiakastapahtumia käyttämällä GTM:n dataLayeria mukautetun pikselin koodissa.

Oletusarvoisesti voit tilata joukon vakiotapahtumia. Jos kuitenkin haluat seurata asiakastapahtumia, jotka eivät kuulu vakiotapahtumien valikoimaan, voit julkaista omia mukautettuja tapahtumia Liquid-mallitiedostoista.

Alla on esimerkki vakiomuotoisen ”product_viewed”-tapahtuman tilaamisesta. Tapahtuma ilmaisee, kun joku tarkastelee tuotetta. Kun tapahtuma käynnistyy, se siirtää tapahtuman dataLayeriin.

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

Tässä esimerkissä tuotenimike välitetään tapahtuman payload-osassa. Voit käyttää Google Tag Manager -muuttujaa tuotenimikkeen noutamiseen tapahtuman payload-osasta valitsemassasi tagissa.

Esimerkki Google Tag Managerin mukautetusta pikselistä

Alla oleva esimerkki on yksinkertaistettu versio Google Tag Managerin mukautetusta pikselistä, joka näyttää, miten tietoja lähetetään Google Tag Manageriin. Voit siirtää lisää tapahtumia dataLayeriin tilaamalla lisää vakio- 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,
  });
});

Määritä Google Tag Manager 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. Tätä varten tarvitset Google Tag Managerissa tagin, käynnistimen ja dataLayer-muuttujia.

Seuraavassa taulukossa on esimerkkejä tietyistä vakiomuotoisista asiakastapahtumista ja niiden Google Tag Manager -vastineista:

Luettelo Shopifyn vakiomuotoisista asiakastapahtumista, joita käytetään pikselien kanssa, verrattuna niiden vastaaviin asiakastapahtumiin Google Tag Managerissa, sekä tapahtumien käynnistämiseen tarvittava käynnistin.
Shopify-tapahtuma	Käynnistin	GTM-tapahtuma
payment_info_submitted	Lähetä maksutiedot	add_payment_info
checkout_address_info_submitted	Lähetä toimitustiedot	add_shipping_info
product_added_to_cart	Lisää tuote ostoskoriin	add_to_cart
checkout_started	Aloita kassalle siirtyminen	begin_checkout
checkout_completed	Suorita kassatapahtuma loppuun	purchase
product_removed_from_cart	Poista tuote ostoskorista	remove_from_cart
cart_viewed	Tarkastele ostoskoria	view_cart
product_viewed	Tarkastele tuotetietosivua	view_item
collection_viewed	Tarkastelee tuoteluetteloa	view_item_list

GTM-tagien tapahtumaparametrien on vastattava odotettuja nimeämiskäytäntöjä, jotta mukautetun pikselin dataLayer-tapahtumat voidaan käsitellä.

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

Luettelo mukautetun pikselin `dataLayer`-tapahtumista GA4-nimeämiskäytäntöä käyttäen
Mukautetun pikselin `dataLayer`-tapahtumat	GA4-tapahtumaparametrit
`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`

Tässä on 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 mukautetun tapahtuman tyyppi, jonka tapahtuman nimi on checkout_completed. Käynnistimen Event name -kentän on vastattava mukautetun pikselisi event-avainta.

orderId ja currency ovat muuttujia, joita käytät Google Tag Managerissa tapahtuman tietojen kaappaamiseen. Ne voidaan yhdistää dataLayer-muuttujaan Google Tag Managerissa. Jokainen tapahtumamuuttuja vaatii oman dataLayer-muuttujansa. Aseta käynnistin aktivoitumaan kaikista mukautetuista tapahtumista.

Luo tunniste, joka käyttää juuri luomaasi käynnistintä. Lisää tapahtumaparametrien alle muuttujat, jotka haluat kaapata. Yllä olevassa esimerkissä orderId, currency, price, shippingLine ja totalTax määritettäisiin dataLayer-muuttujiksi. Aina kun tunniste aktivoituu, se kaappaa nämä dataLayer-muuttujat tapahtuman mukana.

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

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

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

Sinun on myös korvattava dataLayer.push-kutsut checkout.liquid-tiedostossa. Koska checkout.liquid ei kuitenkaan ole yhteensopiva Shopify Extensions -laajennusten kanssa, sinun on käytettävä UI-laajennusta tietojen lähettämiseen verkkopikseleihin.

Alla on yksinkertaistettu esimerkki siitä, miten mukautettua sähköpostirekisteröitymistapahtumaa seurataan dataLayerin avulla theme.liquid-tiedostoissa:

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

Shopifyn vastine näyttää tältä, ja se lähettää tiedot mukautettuun pikseliisi:

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

Lisää sitten mukautettuun pikselikoodiisi esimerkiksi seuraava koodi:

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

Vanhojen dataLayer.push(data)-kutsujen korvaaminen

Google Tag Managerissa on ominaisuus, jonka avulla voit lähettää tilallisen dataLayer-objektin jokaisessa tapahtumassa. Vaikka Shopifyn pikselien hiekkalaatikossa ei ole vastaavaa ominaisuutta, voit saavuttaa saman lopputuloksen luomalla oman dataobjektisi ja välittämällä sen mukautettuihin tapahtumiin.

Määritä esimerkiksi ”customData”-objekti, ennen kuin julkaiset mukautettuja tapahtumia:

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

Aina kun haluat sisällyttää mukautetut tietosi, välitä ne julkaisumetodiisi:

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

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

Seuraavassa on vinkkejä Google Analytics 4:n (GA4) määrittämiseen, kun käytät Google Tag Manageria mukautettuna pikselinä.

Selkeämmät sivujen URL-osoitteet

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

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 dataLayeriin, voit luoda GA4:n page_view-tunnisteen, joka aktivoituu page_viewed-tapahtumasta. Yleisimmin voit käyttää Google Analytics: GA4 Event -tunnistetyyppiä ja asettaa tapahtuman nimeksi page_view. Kun olet asettanut tunnistetyypin ja tapahtuman nimen, lisää page_location-parametri ja aseta sen arvoksi sama arvo, jonka olet välittänyt mukautetusta pikselistäsi dataLayeriin.

Tehostettu mittaus

Kun GA4 ladataan Shopifyn pikselien hiekkalaatikossa, jotkin tapahtumat, jotka normaalisti päätellään automaattisesti, on määritettävä manuaalisesti. Esimerkiksi lähtevien linkkien klikkauksia, jotka ovat osa GA4:n tehostetun mittauksen asetusta, ei voida turvallisuussyistä käynnistää automaattisesti, kun käytetään mukautettuja pikseleitä. Voit kuitenkin itse toteuttaa GA4:n tehostetun mittauksen tapahtumat mukautettuina tapahtumina.

Alla oleva koodi on yksinkertaistettu esimerkki lähtevien 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:ään, ja varmista, että tapahtuman nimi on click, jotta se vastaa GA4:n tehostettujen tapahtumien nimeämiskäytäntöä.

Voit toteuttaa saman seurannan kaikille Googlen tehostetun mittauksen mittareille.

Mukautetun pikselin testaus ja vianmääritys

Kun olet valmis testaamaan GTM-mukautettua pikseliäsi, käytä Shopify Pixel Helperiä varmistaaksesi, että kaikki seurattavat tapahtumat lisätään sandboxiin virheettömästi.