Opprett en egendefinert Google Tag Manager-piksel

Du kan bruke Google Tag Manager (GTM) som en egendefinert piksel for å administrere tredjepartspikslene dine.

Når du er klar til å teste den egendefinerte GTM-pikselen din, kan du bruke Shopify Pixel Helper for å sikre at alle hendelsene du vil spore, legges til i sandkassen uten feil.

Du kan også bruke utvidelsen Google Tag Assistant for å teste hvilke Google-tagger som lastes inn på siden. Funksjonen Feilsøk tagg i Google Tag Assistant er imidlertid ikke kompatibel med egendefinerte piksler, og oppdager ingen Google-tagger i en egendefinert piksel, eller andre piksler som lastes inn av GTM.

På denne siden

Forberedelser til å opprette en egendefinert piksel

Før du oppretter en egendefinert piksel med Google Tag Manager, må du gå gjennom følgende informasjon for å sikre at du forstår hvordan du konfigurerer pikselen:

Opprett eller åpne en Google Tag Manager-konto og hent GTM-beholder-ID-en.
Av sikkerhetsgrunner har taggbehandlere som lastes inn i sandkassen vår, de samme begrensningene som andre piksler. Finn ut mer om begrensningene for piksel-sandkassen.

Opprett en egendefinert Google Tag Manager-piksel

Du kan opprette en egendefinert Google Tag Manager-piksel for å administrere tredjepartspikslene dine.

Trinn:

Åpne Google Tag Manager-kontoen din og velg kontoen du vil konfigurere en egendefinert piksel med.
Klikk på Administrator, og deretter på Installer Google Tag Manager for å åpne installasjonskoden.
Kopier kodeblokken som hører hjemme i head-seksjonen på en side.
Fjern HTML-taggene fra kodeblokken. For eksempel <script></script>.
Sett inn den gjenværende koden i en ny Shopify Egendefinert piksel.
Abonner på kundeaktiviteter og send dem til GTMs dataLayer.
For å se gjennom hvordan koden skal vises, kan du se eksempelet på en egendefinert piksel for Google Tag Manager.
Konfigurer Google Tag Manager til å godta hendelser fra den egendefinerte pikselen din.
Valgfritt: Hvis du har eksisterende dataLayer.push(event)-kall i checkout.liquid-filen, kan du erstatte det med analytics.publish().

Abonner på kundeaktiviteter og send dem til GTMs dataLayer

Du kan abonnere på kundeaktiviteter ved hjelp av GTM dataLayer i koden for den egendefinerte pikselen din.

Som standard finnes det et sett med standardhendelser du kan abonnere på. Hvis du vil spore kundeaktiviteter som ikke er en del av standardhendelsene som tilbys, kan du imidlertid publisere dine egne, egendefinerte hendelser fra Liquid-malfiler.

Under er et eksempel på abonnement på standardhendelsen «product_viewed», som indikerer når noen ser på et produkt. Når hendelsen utløses, sender den hendelsen til dataLayer.

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

I dette eksempelet sendes produkttittelen med i hendelsens nyttelast. Du kan bruke en Google Tag Manager-variabel for å hente ut produkttittelen fra hendelsens nyttelast i en valgfri tagg.

Eksempel på egendefinert piksel for Google Tag Manager

Eksempelet nedenfor er en forenklet versjon av en egendefinert piksel for Google Tag Manager som viser hvordan du sender data til Google Tag Manager. For å sende flere hendelser til dataLayer kan du abonnere på flere standard- og egendefinerte hendelser.

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

Konfigurer Google Tag Manager til å godta hendelser fra den egendefinerte pikselen din

Når du har opprettet den egendefinerte pikselen din, må du konfigurere Google Tag Manager til å godta hendelser fra den egendefinerte pikselen. For å gjøre dette trenger du en tagg, en utløser og dataLayer-variabler i Google Tag Manager.

Noen eksempler på utvalgte standard kundeaktiviteter og deres ekvivalenter i Google Tag Manager er oppført i tabellen nedenfor:

Liste over standard Shopify-kundeaktiviteter for bruk med piksler, sammenlignet med deres tilsvarende kundeaktiviteter i Google Tag Manager, pluss utløseren som kreves for at hendelsene skal utløses.
Shopify-hendelse	Utløser	GTM-hendelse
payment_info_submitted	Send inn betalingsinformasjon	add_payment_info
checkout_address_info_submitted	Send inn fraktinformasjon	add_shipping_info
product_added_to_cart	Legg til en vare i handlekurven	add_to_cart
checkout_started	Start betaling	begin_checkout
checkout_completed	Fullfør betaling	purchase
product_removed_from_cart	Fjern vare fra handlekurven	remove_from_cart
cart_viewed	Vis handlekurv	view_cart
product_viewed	Vis produktdetaljside	view_item
collection_viewed	Viser en liste over varer	view_item_list

Hendelsesparametrene for GTM-taggen må samsvare med forventede navnekonvensjoner for at hendelsene fra dataLayer for den egendefinerte pikselen skal kunne behandles.

Noen eksempler på utvalgte hendelsesegenskaper i dataLayer for egendefinerte piksler og deres tilsvarende hendelsesparametere for Google Analytics 4 (GA4) er som følger:

Liste over hendelser i `dataLayer` for egendefinerte piksler som bruker GA4-navnekonvensjonen
Hendelser i `dataLayer` for egendefinerte piksler	GA4-hendelsesparametere
`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`

Her er et eksempel som bruker følgende checkout_completed-hendelse:

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-utløseren er en egendefinert hendelsestype med hendelsesnavnet checkout_completed. Hendelsesnavn-feltet i utløseren må samsvare med event-nøkkelen i den egendefinerte pikselen.

orderId og currency er variablene du bruker i Google Tag Manager til å hente inn data fra hendelsen. De kan tilordnes en dataLayer-variabel i Google Tag Manager. Hver hendelsesvariabel krever sin egen dataLayer-variabel. Angi at utløseren skal aktiveres for alle egendefinerte hendelser.

Opprett en tagg som bruker utløseren du nettopp opprettet. Under hendelsesparametere legger du til variablene du vil hente inn. I eksempelet over konfigureres orderId, currency, price, shippingLine og totalTax som dataLayer-variabler. Hver gang taggen aktiveres, vil den hente inn disse dataLayer-variablene med hendelsen.

Merk at minst én tagg og én utløser må konfigureres i Google Tag Manager for at dataoverføring skal finne sted.

Erstatte gamle dataLayer.push(event)-kall med analytics.publish()

Hvis du tidligere har konfigurert Google Tag Manager, må du erstatte dataLayer.push-kallene med Shopify.analytics.publish()-kall. Du finner dataLayer.push-kallene i theme.liquid-filene, i Layout-seksjonen i temaredigeringsprogrammet.

Du må også erstatte dataLayer.push-kallene i checkout.liquid. Ettersom checkout.liquid ikke er kompatibel med Shopify Extensions, må du imidlertid bruke en UI-utvidelse for å sende data til sporingspiksler.

Nedenfor er et forenklet eksempel på en egendefinert hendelse for e-postregistrering som spores ved hjelp av dataLayer i theme.liquid-filer:

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

Shopify-ekvivalenten vises på denne måten, som sender dataene til den egendefinerte pikselen din:

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

Deretter legger du til noe slikt i den egendefinerte pikselkoden:

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

Erstatt gamle dataLayer.push(data)

Google Tag Manager har en funksjon som lar deg sende et tilstandsfullt dataLayer-objekt med hver hendelse. Selv om Shopifys piksel-sandkasse ikke inneholder en tilsvarende funksjon, kan du oppnå samme resultat ved å opprette ditt eget dataobjekt og sende det med i egendefinerte hendelser.

Du kan for eksempel definere et «customData»-objekt før noen av de egendefinerte hendelsene dine publiseres:

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

Når du vil inkludere de egendefinerte dataene, kan du deretter sende dem med i publiseringsmetoden:

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

Tips for konfigurering av Google Analytics 4

Vurder følgende tips for å konfigurere Google Analytics 4 (GA4) når du bruker Google Tag Manager som en egendefinert piksel.

Renere URL-adresser for sider

Når GA4 kjører i en sandkasse, legger du kanskje merke til at URL-adressene for sidene inneholder informasjon om sandkassen den kjører i. Hvis du vil fjerne sandkasseinformasjonen fra disse URL-adressene, kan du slå av GA4s automatiske sidesporing og i stedet implementere din egen ved å bruke standardhendelsen 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,
  });
});

Når du har publisert din egen hendelse til dataLayer, kan du opprette en GA4 page_view-tagg som utløses av page_viewed-hendelsen. Som oftest kan du bruke taggtypen Google Analytics: GA4 Event og angi hendelsesnavnet til page_view. Når du har angitt taggtype og hendelsesnavn, bør du legge til en parameter for page_location og angi verdien til den samme verdien som du har sendt til dataLayer fra den egendefinerte pikselen.

Forbedret måling

Når du laster inn GA4 i Shopifys piksel-sandkasse, må noen hendelser som normalt utledes automatisk, konfigureres manuelt. Klikk på utgående koblinger kan for eksempel ikke utløses automatisk av sikkerhetsgrunner når du bruker egendefinerte piksler. Dette er en del av GA4s innstilling for forbedret måling. Det er imidlertid mulig å implementere GA4s hendelser for forbedret måling selv som egendefinerte hendelser.

Koden nedenfor inneholder et forenklet eksempel på sporing av klikk på utgående koblinger:

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

Til slutt oppretter du en GA4-tagg i GTM som sender koblingsklikket til GA4. Sørg for at hendelsesnavnet er click, slik at det samsvarer med GA4s navnekonvensjon for forbedrede hendelser.

Du kan oppnå den samme sporingen for alle Googles målestokker for forbedret måling.

Test og feilsøk den egendefinerte pikselen

Når du er klar til å teste den egendefinerte GTM-pikselen din, kan du bruke Shopify Pixel Helper for å sikre at alle hendelsene du vil spore, legges til i sandkassen uten feil.