Luo mukautetun pikselin koodi

Tällä sivulla on ohjeet asiakastapahtumien seurantaan käytettävän mukautetun pikselin koodin luomiseen kolmannen osapuolen pikselille. Kun olet luonut koodin mukautetulle pikselillesi, voit lisätä pikselin Shopify-kauppaasi.

Huomaa

Ennen kuin luot mukautetun pikselin, tarkista saatavilla olevat sovellukset vakauden, suojauksen ja suorituskyvyn parantamiseksi. Luo mukautettu pikseli, jos käytettävissä ei ole tarpeitasi vastaavaa sovellusta.

Mukautetun pikselin luonnin valmistelu

Ennen kuin lisäät mukautetun pikselin, tutustu seuraaviin tietoihin varmistaaksesi, että ymmärrät, miten pikselisi määritetään:

• pikseleihin liittyvät riskit
• Shopifyn pikselien eristysympäristöä koskevat rajoitukset
• Shopify-pikseleiden eristysympäristön API:n käyttäminen
• asiakastapahtuman seurannan malli

Kun lisäät mukautetun pikselin, määritä seuraavat tiedot:

• kolmannen osapuolen JavaScript-pikseli
• mitä käyttäytymiseen liittyviä tapahtumia haluat seurata.

Luo mukautetun pikselin koodi

Huomaa

Tämä on edistyneille käyttäjille tarkoitettu tutoriaali, jota Shopify ei tue. Jos tarvitset apua mukautetun pikselin lisäämisessä, voit palkata Shopify Partnerin.

Mukautetun pikselin koodin luominen koostuu seuraavista vaiheista:

1. Kolmannen osapuolen JavaScript-SDK:n valmistelu.
2. Määritä pikseli seurataksesi asiakastapahtumia.

Kolmannen osapuolen Javascript SDK:n valmistelu

Käyttämäsi kolmannen osapuolen palvelu antaa sinulle pikseliin integroidun koodin. Pikselissä on yleensä kaksi komponenttia: SDK ja seurantakoodi. Kaikki kolmannen osapuolen palvelukoodin HTML-koodi on poistettava, koska Shopify-pikselin eristys tukee vain JavaScriptiä.

Tässä on esimerkki Meta-pikselistä. Kolmansien osapuolien pikselit voivat erota toisistaan hieman.

​​<!-- Meta Pixel Code -->
​​<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"/></noscript>
<!-- End Meta Pixel Code -->

Kun olet poistanut HTML:n Metan koodista, jäljelle jää Meta-pikselin SDK ja koodi alustaaksesi sen. Myös PageView-tapahtumanseurantakoodi on poistettu, koska se lisätään seuraavassa vaiheessa.

​​!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);

Meta's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

Saatat törmätä pikseleihin, jotka on ladattu script src=:n avulla. Shopify-pikselit eivät tue HTML:ää, joten sinun täytyy korvata script src= sen JavaScript-vastineella.

Tässä on malli Google Analytics -pikselistä:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', ''YOUR_PIXEL_ID'');
</script>

Script src=-osa voidaan korvata seuraavalla JavaScript-vastineella. Varmista aina, että src-määritteesi vastaa HTML-versiota:

const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');
script.setAttribute('async', '');
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_PIXEL_ID');

Google's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

Seuraa asiakastapahtumia

Kun olet ladannut ja alustanut pikselin SDK:n, sinun on siirrettävä tapahtumat siihen seurantaa varten. Tämä tehdään tilaamalla tapahtumat ja syömällä sitten tapahtumatiedot pikselin SDK:hon kolmannen osapuolen palvelun käsiteltäviksi.

Tilaa vakiotapahtumia

Shopify tarjoaa käyttöösi vakiotapahtumien joukon, jonka avulla voit helposti varmistaa, että pikselisi kerää oikeat tiedot.

Voit tilata tapahtumia Shopify-pikselin laajennus-API:n avulla. Sinun on sijoitettava kolmannen osapuolen pikselin koodi tapahtumaan, jonka haluat tilata.

Tämä on esimerkki Meta-pikselin PageView-tapahtumasta. Huomaa, että fbq("track") on osa Metan koodia, ja jokaisella yrityksellä on oma versionsa, joka sinun täytyy tarkistaa ohjeista.

analytics.subscribe("page_viewed", async (event) => {
  fbq('track', 'PageView');
});

Joissakin tapahtumissa on metatietoja, jotka voit siirtää pikseliisi. Alla on esimerkki tuotetietojen syöttämisestä Metan ViewContent-tapahtuman kautta:

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price?.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

Mukautettujen asiakastapahtumien tilaaminen

Jos haluat seurata muita asiakastapahtumia, kuten sitä, milloin joku klikkaa painiketta, voit lisätä mukautettuja asiakastapahtumia. Voit tilata mukautettuja tapahtumia samalla tavalla kuin tavallisia tapahtumia. Ilmoita tapahtuman nimi, jonka haluat tilata, ja välitä tiedot kolmannen osapuolen palveluntarjoajan pikselille.

Esimerkki siitä, miten julkaistu mukautettu tapahtuma voi näkyä teemasi liquid-tiedostoissa:

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

Esimerkki siitä, miten voit määrittää pikselisi tilaamaan mukautetun tapahtuman:

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

Lue lisää mukautetuista tapahtumista Shopify-kehittäjän ohjeista.

Suostumuksen määrittäminen

Verkkopikseliä suoritetaan vain, kun kävijät ovat suostuneet markkinointiin ja analytiikkaan markkinoilla, joilla olet määrittänytsuostumuksesi pakolliseksi. Jokaisella pikselillä voi olla eri nimi jokaista tarkoitusta varten. Tutustu pikselidokumentaatioon, jotta ymmärrät, miten se yhdistetään Shopifyn määritelmiin.

Esimerkiksi seuraavassa kerrotaan, miten markkinointi- ja analytiikkatarkoitukset yhdistetään Googlen suostumustilaan:

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

Esimerkkejä mukautetuista pikseleistä

Alla on esimerkki Meta-pikselin koodista. Pikselin koodi vaihtelee kolmannen osapuolen palveluntarjoajasta ja seurattavista tapahtumista riippuen. Katso käytettävissä olevien tapahtumien luettelo asiakastapahtuman viitteestä.

Mukautettu Meta-pikseli

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

// replace YOUR_PIXEL_ID with the pixel ID provided by third-party
fbq('init', YOUR_PIXEL_ID);

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", (event) => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

analytics.subscribe("search_submitted", (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data?.cartLine?.merchandise?.productVariant?.id],
    content_name: event.data?.cartLine?.merchandise?.productVariant?.title,
    currency: event.data?.cartLine?.merchandise?.productVariant?.price?.currencyCode,
    value: event.data?.cartLine?.merchandise?.productVariant?.price.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", (event) => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", (event) => {
  fbq('track', 'Purchase', {
    currency: event.data?.checkout?.currencyCode,
    value: event.data?.checkout?.totalPrice?.amount,
  });
});