Opprett en egendefinert Google Tag Manager-piksel

Denne siden ble skrevet ut den Apr 24, 2024. Gå til https://help.shopify.com/nb/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial for nyeste versjon.

Denne siden inneholder instruksjoner om hvordan du bruker Google Tag Manager (GTM) som en egendefinert piksel for å administrere tredjepartspiksler.

På denne siden

Forberedelser til å opprette en egendefinert piksel
Opprette en egendefinert Google Tag Manager-piksel

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

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 det et sett med standardkundehendelser som du kan abonnere på. Hvis du vil spore kundehendelser som ikke er en del av standardhendelsene som tilbys, kan du imidlertid publisere dine egne egendefinerte hendelser fra Liquid-malfiler.

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, og deres motsvar i GTM
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:

Utvalgt liste over egendefinerte `dataLayer`-hendelser fra piksler i henhold til 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 kasseutvidelser, må du imidlertid bruke en grensesnittutvidelse 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>

Den tilsvarende Shopify-hendelsen ser slik ut, og sender data til den egendefinerte pikselen.

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

Deretter legger du 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 ved egendefinerte data, kan du sende dem til publiseringsmetoden.

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

Testing og feilsøking

Åpne Shopify-butikken i en Chrome-nettleser.
Legg til Google Tag Assistant Legacy Chrome-utvidelsen i nettleseren din.
Klikk på utvidelsesikonet og klikk deretter på Aktiver.
Naviger til nettstedet og utløs hendelsene du vil teste.
I utvidelsen klikker du på Google Tag Manager-taggen . Datalag-seksjonen skal vise nyttelasten av hendelsen som ble utløst.
Alle andre tagger som lastes inn av Google Tag Manager vises også i utvidelsen. Du kan klikke på disse taggene for å gå gjennom dataene som ble sendt til dem.

Opprett en egendefinert Google Tag Manager-piksel

På denne siden

Forberedelser til å opprette en egendefinert piksel

Opprette en egendefinert Google Tag Manager-piksel

Trinn:

Abonner på kundehendelser og send til GTMs datalag

Eksempel på en egendefinert Google Tag Manager-piksel

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

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

Bytt ut gamle anrop til dataLayer.push(data)

Tips for å konfigurere Google Analytics 4

Renere URL-adresser til sider

Forbedret måling

Testing og feilsøking

Er du klar til å begynne å selge med Shopify?