Opprett en egendefinert Google Tag Manager-piksel

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

Når du er klar til å teste din egendefinerte GTM-piksel, bruk Shopify Pixel Helper for å sikre at alle hendelsene du vil spore blir lagt til i sandkassen uten feil.

Du kan også bruke sideutvidelsen Google Tag Assistant for å teste hvilke Google-tagger som lastes inn på siden. Google Tag Assistants Troubleshoot tag funksjon 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 en piksel:

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

Opprette en egendefinert Google Tag Manager-piksel

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

Trinn:

Åpne Google Tag Manager-kontoen, og velg kontoen du vil konfigurere en egendefinert piksel for.
Klikk på Administrator, og installer Google Tag Manager for å åpne installasjonskoden.
Kopier kodeblokken som skal legges i head-delen av en side.
Fjern HTML-taggene fra kodeblokken. For eksempel <script></script>.
Sett inn den gjenværende koden i en ny egendefinert Shopify-piksel.
Abonner på kundehendelser og anrop til GTMs dataLayer.
Se eksempelet på en egendefinert Google Tag Manager-piksel for å se hvordan koden skal vises.
Konfigurer Google Tag Manager for å godta hendelser fra den tilpassede pikselen.
Valgfritt: Hvis du har eksisterende anrop for dataLayer.push(event) i checkout.liquid-filen, må du erstatte dem med analytics.publish().

Abonner på kundehendelser og send til GTMs datalag

Du kan abonnere på kundehendelser ved hjelp av GTMs dataLayer i egendefinert pikselkode.

Som standard finnes et sett standardhendelser du kan abonnere på. Hvis du ønsker å spore kundehendelser som ikke er en del av standardhendelsene, kan du imidlertid publisere dine egne tilpassede hendelser fra Liquid-malfilene.

Nedenfor ser du et eksempel på abonnement på standardhendelsen «product_viewed», som indikerer når noen har sett på et produkt. Når hendelsen utløses, sendes den til dataLayer.

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

I dette eksempelet sendes produkttittelen i hendelsens nyttelast. Du kan bruke en variabel for Google Tag Manager til å hente produkttittelen fra hendelsens nyttelast i den valgfrie taggen.

Eksempel på en egendefinert Google Tag Manager-piksel

Eksempelet under er en forenklet versjon av en egendefinert Google Tag Manager-piksel 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

Når du oppretter den egendefinerte pikselen, 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 variabler for dataLayer i Google Tag Manager.

Noen eksempler på utvalgte standard kundehendelser, og deres motsvar i Google Tag Manager, er oppgitt i tabellen nedenfor:

Liste over standard Shopify-kundehendelser som kan brukes med piksler, sammenlignet med tilsvarende kundehendelser i Google Tag Manager, samt 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 betalingen	kjøp
product_removed_from_cart	Fjern vare fra handlekurven	remove_from_cart
cart_viewed	Vis handlekurv	view_cart
product_viewed	Vis side med produktdetaljer	view_item
collection_viewed	Viser en liste over varer	view_item_list

Parametere for GTM-tagghendelser må samsvare med de forventede navngivningskonvensjonene for at dataLayer-hendelser for egendefinerte piksler skal kunne behandles.

Noen eksempler på utvalgte egendefinerte egenskaper for dataLayer-hendelser fra piksler, og deres motsvarende hendelsesparametere for Google Analytics 4 (GA4), er som følger:

Liste over egendefinerte `dataLayer`-hendelser for piksler som bruker GA4-navngivningskonvensjonen
`dataLayer`-hendelser for egendefinert piksel	GA4-hendelsesparametere
`event.data?.checkout?.currencyCode`	`valuta`
`event.data?.checkout?.totalPrice?.amount`	`value`
`event.data?.checkout?.order?.id`	`transaction_id`
`event.data?.checkout?.discountAllocations`	`kupong`
`event.data?.checkout?.shippingLine?.price?.amount`	`frakt`
`event.data?.checkout?.totalTax`	`tax`
`event.data?.checkout?.lineItems`	`varer`

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 til checkout_completed. Hendelsesnavn-feltet i utløseren må samsvare med hendelsesnøkkelen i den egendefinerte pikselen.

orderId og currency er variablene som brukes i Google Tag Manager for å registrere data fra hendelsen. De kan tilordnes en variabel for dataLayer i Google Tag Manager. Hver hendelsesvariabel krever en egen dataLayer-variabel. Angi at utløseren skal starte på alle egendefinerte hendelser.

Opprett en tagg som bruker utløseren du nettopp opprettet. Legg til variablene du vil hente inn under hendelsesparametere. I eksempelet over vil orderId, currency, price, shippingLine og totalTax bli konfigurert som dataLayer-variabler. Hver gang taggen utløses hentes disse dataLayer-variablene sammen med hendelsen.

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

Bytte ut gamle anrop til dataLayer.push(event) med analytics.publish()

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

Du må også erstatte dataLayer.push-anrop i checkout.liquid. Fordi checkout.liquid ikke er kompatibel med Shopify Extensions, må du bruke en brukergrensesnitt-utvidelse for å sende data til nettpiksler.

Nedenfor ser du et forenklet eksempel på en egendefinert hendelse for e-postregistrering som spores ved hjelp av dataLayer i theme.liquid-filene.

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

Tilsvarende for Shopify vises på denne måten, som sender data til den egendefinerte pikselen.

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

Deretter vil du legge til noe som dette i den egendefinerte pikselkoden.

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

Bytt ut gamle anrop til dataLayer.push(data)

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

Du kan for eksempel definere objektet «customData», før noen av de egendefinerte hendelsene publiseres.

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

Når du så vil legge til egendefinerte data, sender du dem til publish-metoden.

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

Tips for å konfigurere Google Analytics 4

Se gjennom følgende tips for konfigurering av Google Analytics 4 (GA4) når du bruker Google Tag Manager som en egendefinert piksel.

Renere URL-adresser til sider

Når GA4 kjører i en sandkasse, vil du kanskje oppleve at URL-adresser til sider inneholder informasjon om sandkassen de kjører i. Hvis du vil fjerne informasjon om sandkasser fra URL-adressene, kan du deaktivere GA4s automatiske sidesporing og i stedet implementere din egen, ved bruk av 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 page_view-tagg for GA4 som utløses ved hendelsen page_viewed. Det vanligste er å bruke taggtypen Google Analytics: GA4 Event og angi hendelsesnavnet til page_view. Når du har angitt taggtype og hendelsesnavn, må du legge til et parameter for page_location og angi verdien til samme verdi som du har sendt til dataLayer fra den egendefinerte pikselen.

Forbedret måling

Ved innlasting av GA4 i Shopifys pikselsandkasse må noen hendelser som vanligvis utledes automatisk konfigureres manuelt. Klikk på utgående koblinger, som er en del av GA4s forbedrede målingsinnstilling, kan for eksempel ikke utløses automatisk av sikkerhetsårsaker når du bruker egendefinerte piksler. Det er imidlertid mulig å implementere GA4s forbedrede målingshendelser selv, som egendefinerte hendelser.

Koden som er oppgitt 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 klikk på koblingen til GA4, ved å sikre at hendelsesnavnet er click, slik at det samsvarer med navngivningen i GA4s forbedrede hendelser.

Du kan oppnå samme sporing for alle Googles forbedrede målingsberegninger.

Test og feilsøk en egendefinert piksel

Når du er klar til å teste din egendefinerte GTM-piksel, bruk Shopify Pixel Helper for å sikre at alle hendelsene du vil spore blir lagt til i sandkassen uten feil.