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.

Mukautetun pikselin luonnin valmistelu

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

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

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

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

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-koodilla. 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');

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.

Esimerkkejä mukautetuista pikseleistä

Alla on esimerkki koko pikselin koodista. Pikselin koodi vaihtelee kolmannen osapuolen palveluntarjoajasta ja seurattavista tapahtumista riippuen.

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

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

analytics.subscribe("product_added_to_cart", async (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", async (event) => {
  fbq('track', 'AddPaymentInfo');
});

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

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

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi