Luo mukautettu Google Tag Manager -pikseli

Tämän sivun ohjeissa on ohjeet siihen, miten Google Tag Manageria (GTM) käytetään mukautetuna pikselinä kolmannen osapuolen pikseleiden hallintaan.

Huomaa

Suosittelemme, että tarkistat käytettävissä olevat sovellukset ennen kuin luot mukautettuja pikseleitä, jotta voit parantaa vakautta, turvallisuutta ja tehokkuutta. Jos käytettävissä ei kuitenkaan ole tarpeittasi vastaavaa sovellusta, voit mahdollisesti päättää käyttää Google Tag Manageria mukautettuna pikselinä.

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:

• Luo tai avaa Google Tag Manager -tili ja hanki GTM Container -tunnus.
• Turvallisuuden vuoksi hiekkalaatikkoomme ladattuja tunnisteiden hallintatyökaluja koskevat samat rajoitukset kuin muissa pikseleissä. Lisätietoja pikseleiden hiekkalaatikkorajoituksista.

Luo mukautettu Google Tag Manager -pikseli

Huomaa

Tämä on edistyneille käyttäjille tarkoitettu tutoriaali, jota Shopify ei tue. Jos tarvitset apua mukautettujen pikselien lisäämisessä, voit palkata Shopify Expertin.

Tee näin

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.
5. Lisää jäljellä oleva koodi uuteen Shopifyn mukautettuun pikseliin.
6. Alusta dataLayer-objekti window.dataLayer = window.dataLayer || [];.

Mukautetun pikselin koodin pitäisi näyttää tältä, ja kohdan GTM-XXXXXXX pitäisi vastata omaa GTM-säilötunnustasi.

(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');

window.dataLayer = window.dataLayer || [];

Tilaa asiakastapahtumia ja vie GTM:n dataLayeriin

Sen sijaan, että lisäisit dataLayer.push() -kutsut liquid-mallitiedostoihin, teet kaiken GTM-datalayer -työn mukautetulla pikselin koodilla.

Oletusarvoisesti on olemassa joukko tavallisia mukautettuja tapahtumia, jotka voit tilata suoraan, mutta voit myös julkaista omia mukautettuja tapahtumia 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ä välitetään tiedot tuotteen nimestä, jotka voidaan välittää Google Tag Manager -muuttujia käyttämällä muille tunnisteille.

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.

Alla on yksinkertaistettu esimerkki mukautetusta sähköpostin kirjautumistapahtumasta, joka seurataan dataLayerin avulla.

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

Shopify-vastine näyttää tältä, ja se vie tiedot mukautettuun pikseliisi.

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

Mukautetun pikselin koodisi lisäisi sitten 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 tietokerrosobjektin jokaisessa tapahtumassa. Vaikka Shopifyn pikselin hiekkalaatikko 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>

Huomaa

Shopify ei tällä hetkellä tue mukautettujen tietojen lisäämistä vakiotapahtumiin. Jos tarvitset tätä, voit julkaista omia mukautettuja tapahtumiasi vakiotapahtumien korvaamista varten.

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 GTM:lle. Jos haluat saada dataLayerille lisää tapahtumia, voit tilata enemmän vakiotapahtumia ja mukautettuja tapahtumia.

(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');

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.product.id,
   'product_title': event.data.product.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.order.id,
   'currency': event.data.checkout.currencyCode,
  });
});

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 dataLayerissa, voit luoda GA4 page_view -tunnisteen, joka käynnistyy page_viewed -tapahtumassa.Yleisimmin voit käyttää Google Analytics GA4 Event -tunnisteen tyyppiä ja määrittää tapahtuman nimeksi page_view.Kun olet määrittänyt tunnisteen tyypin ja tapahtuman nimen, lisää parametri kohteelle page_location ja määritä arvoksi sama arvo, jonka olet siirtynyt tietokerrokseesi asiakaspikseliltä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.

Testaus ja virheenkorjaus

Huomaa

Google-tunnisteiden kumppani ei toimi mukautettujen pikseleiden kanssa. Google Analytics Debug -selainlaajennuksen avulla debug-signaali lähetetään kohteeseen GA4, jotta tapahtumasi näkyvät sovelluksessa.

1. Avaa Shopify-kauppa Chrome-selaimessa.
2. Avaa verkkovälilehti selaimessasi ja etsi pyyntö nimeltä collect?..., joka sisältää GA4-mittauksesi tunnuksen, jos tietoja lähetetään kohteeseen GA4 Google Tag Managerista.
3. Klikkaa Google Analytics -tililläsi Adminja klikkaa sitten Debug View (Virheenkorjausnäkymä).
4. Varmista, että olet lisännyt GA Debug Google -laajennuksen Chrome-selaimeesi:
   • Ota GA-virheenkorjaus käyttöön.
   • Avaa Shopify-kauppa erilliselle välilehdelle.
   • Palaa virheenkorjausnäkymässä takaisin kohtaan GA4 ja tarkista page_viewed -tapahtumat.