Luo mukautettu pikselikoodi

Varoitus

Mukautetut pikselit on edistynyt ominaisuus, joka edellyttää JavaScript-osaamista. Sovellettavien lakien noudattaminen, suostumukset, koodin turvallisuus, vianmääritys ja päivitykset ovat sinun vastuullasi. Pikseleihin sovelletaan Shopifyn käyttöehtoja.

Mukautettujen pikseleiden lisääminen ja käyttäminen ei kuulu Shopifyn tuen piiriin. Jos tarvitset apua mukautetun pikselin lisäämisessä tai käyttämisessä, voit palkata Shopify Partnerin.

Tällä sivulla on ohjeet mukautetun pikselikoodin luomiseen kolmannen osapuolen pikseliä varten, jotta voit seurata tiettyjä asiakastapahtumia. Kun olet luonut koodin mukautetulle pikselillesi, voit lisätä pikselin Shopify-kauppaasi.

Huomautus

Ennen kuin luot mukautetun pikselin, sinun kannattaa tarkistaa saatavilla olevat sovellukset paremman vakauden, turvallisuuden ja tehokkuuden varmistamiseksi. Jos tarpeitasi vastaavaa sovellusta ei kuitenkaan ole saatavilla, voit luoda mukautetun pikselin.

Valmistautuminen mukautetun pikselin luomiseen

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

• Pikseleihin liittyvät riskit.
• Shopifyn pikselien hiekkalaatikon rajoitukset.
• Shopifyn pikselien hiekkalaatikon API:n käyttäminen.
• Asiakastapahtumien seurannan skeema.

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

• Kolmannen osapuolen JavaScript-pikseli.
• Käyttäytymistapahtumat, joita haluat seurata.
• Asiakkaan tietosuojaa koskevat suostumusasetukset.

Mukautetun pikselin koodin luominen

Kasvata liiketoimintaasi

Tämä on edistynyt tutoriaali, eikä se kuulu Shopifyn tuen piiriin. Jos tarvitset apua mukautetun pikselin lisäämisessä, voit palkata Shopify Partnerin.

Mukautetun pikselin koodin luominen sisältää seuraavat vaiheet:

1. Valmistele kolmannen osapuolen JavaScript SDK.
2. Määritä pikselisi seuraamaan asiakastapahtumia.
3. Määritä pikselillesi asiakkaan tietosuojaa koskevat suostumusasetukset.

Kolmannen osapuolen Javascript SDK:n valmisteleminen

Kolmannen osapuolen palvelu, jonka kanssa työskentelet, toimittaa sinulle pikseliin integroidun koodin. Pikselissä on yleensä kaksi osaa: Javascript SDK ja seurantakoodi. Kolmannen osapuolen palvelun koodista on poistettava kaikki HTML, koska Shopifyn pikselihiekkalaatikko tukee vain JavaScriptiä.

Tässä on esimerkki Meta-pikselistä. Pikselit eroavat hieman toisistaan eri kolmansien osapuolten välillä.

​​<!-- 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ää Metan pikselin SDK ja koodi sen alustamista varten. Myös PageView-tapahtuman seurantakoodi 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);

Metan pikselin SDK ei lähetä tietoja automaattisesti Shopifyn mukautetusta pikselistä. Jotta voit lähettää tietoja, sinun on tilattava tapahtumia.

Saatat törmätä pikseleihin, jotka ladataan script src= -komennolla. HTML-koodia ei tueta Shopifyn pikseleissä, joten sinun on korvattava script src= vastaavalla JavaScript-komennolla.

Seuraavassa on esimerkki Google Analytics -pikselistä, joka latautuu script src= -komennolla:

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

Osa script src= voidaan korvata vastaavalla JavaScript-komennolla. Varmista aina, että src-attribuuttisi 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');

Googlen pikselin SDK ei lähetä tietoja automaattisesti Shopifyn mukautetusta pikselistä. Jotta voit lähettää tietoja, sinun on tilattava tapahtumia.

Asiakastapahtumien seuraaminen

Pikselin SDK:n lataamisen ja alustamisen jälkeen sinun on välitettävä sille tapahtumia seurantaa varten. Tämä tehdään tilaamalla tapahtumia ja välittämällä sitten tapahtumatiedot pikselin SDK:lle kolmannen osapuolen palvelun käsiteltäväksi.

Vakiotapahtumien tilaaminen

Shopify tarjoaa joukon vakiotapahtumia, joiden avulla on helppo varmistaa, että pikselisi kerää tarvitsemansa tiedot.

Voit tilata tapahtumia Shopify Pixels Extension API:n avulla. Sinun on sijoitettava kolmannen osapuolen pikselikoodi sen tapahtuman yhteyteen, jonka tilaat.

Tämä on esimerkki PageView-tapahtumasta Metan pikselille. Huomaa, että fbq("track") on osa Metan koodia, ja jokaisella yrityksellä on oma versionsa, jota varten sinun on tutustuttava niiden dokumentaatioon.

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

Joissakin tapahtumissa on metatietoja, joita voit välittää pikseliisi. Seuraavassa on esimerkki joidenkin tuotetietojen välittämisestä Metan ViewContent-tapahtumaan:

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 painikkeen napsauttamista, voit lisätä mukautettuja asiakastapahtumia. Mukautettuja tapahtumia voi tilata samalla tavalla kuin vakiotapahtumia. Määritä sen tapahtuman nimi, jonka haluat tilata, ja välitä tiedot kolmannen osapuolen palveluntarjoajan pikseliin.

Tässä on esimerkki siitä, miltä julkaistu mukautettu tapahtuma voi näyttää teemasi liquid-tiedostoissa:

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

Tässä on esimerkki siitä, miten voit määrittää pikselisi tilaamaan kyseisen mukautetun tapahtuman:

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

Lisätietoja mukautetuista tapahtumista on Shopifyn kehittäjädokumentaatiossa.

Suostumuksen ja tietojen myynnin asetusten määrittäminen

Huomautus

Olet vastuussa tietosuojakäytäntöjesi noudattamisesta, ja sinun tulisi neuvotella oman lakimiehesi kanssa määrittääksesi, miten oman alueesi ja myyntialueidesi lait voivat vaikuttaa liiketoimintaasi. Myydäksesi tuotteita Shopify-alustalla sinun on noudatettava yrityksesi ja asiakkaidesi toimivallan lakeja, Shopifyn käyttöehtoja, Shopifyn sallitun käytön käytäntöä ja kaikkia muita sovellettavia käytäntöjä. Lue lisää asiakkaiden tietosuojasta.

Markkina-alueilla, jotka on määritetty vaatimaan suostumusta, kuten Euroopan talousalueella (ETA) ja Yhdistyneessä kuningaskunnassa, verkkopikselit toimivat vain, kun verkkosivuston vierailijat ovat antaneet pikselin kokoonpanossa vaaditut käyttöoikeudet.

Oletusarvoisesti uudet mukautetut pikselit vaativat markkinoinnin ja analytiikan käyttöoikeudet. Voit mukauttaa vaadittavia käyttöoikeuksia mukautetun pikselisi tietojen Asiakkaiden tietosuoja > Käyttöoikeus -osiossa.

Vastaavasti tietojen myyntiä varten määritetyt pikselit eivät toimi niiden asiakkaiden osalta, jotka ovat kieltäytyneet tietojensa myynnistä tai jakamisesta, ellei pikseli tue tietojen rajoitettua käyttöä. Oletusarvoisesti uudet mukautetut pikselit luokitellaan tietojen myynniksi. Voit mukauttaa, luokitellaanko kerätyt tiedot tietojen myynniksi mukautetun pikselisi tietojen Asiakkaiden tietosuoja > Tietojen myynti -osiossa.

Mukautettujen pikselien kehittäjät voivat lukea lisää suostumuksen keräämisestä ja rekisteröinnistä.

Jokaisella pikselillä voi olla eri nimi kuhunkin tarkoitukseen. Sinun kannattaa tutustua kolmannen osapuolen pikselidokumentaatioon ymmärtääksesi, miten se vastaa Shopifyn määritelmiä.

Seuraavassa on esimerkki siitä, miten markkinointi- ja analytiikkatarkoitukset vastaavat Googlen suostumustilaa:

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

Esimerkki mukautetusta pikselistä

Alla on esimerkki Meta-pikselin koodista. Pikselikoodi vaihtelee kolmannen osapuolen palveluntarjoajan ja seurattavien tapahtumien mukaan. Luettelo käytettävissä olevista tapahtumista on asiakastapahtumien viiteoppaassa.

Esimerkki mukautetusta Meta-pikselistä

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