Mukautettujen pikseleiden lisääminen

Jos et käytä sovellusta asiakastapahtumien seuraamiseen, voit lisätä mukautetun pikselin, jota käytetään lax-eristysympäristössä.

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

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

Kolmannen osapuolen pikselin koodin 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ä. Huomaa, että eri yritysten 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');

Tilaa vakiotapahtumia

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.

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", 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", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

Lisää mukautettu pikseli

Ennen kuin lisäät mukautetun pikselin, poista kaikki olemassa olevat pikselit varmistaaksesi, ettei asiakastapahtumia lasketa kahteen kertaan.Olemassa oleva pikselin koodi täytyy poistaa manuaalisesti kaikista paikoista, kuten theme.liquid- jacheckout.liquid-koodista (vain Plus-kauppiaat) ja muista kassan komentosarjoista.

  1. Siirry Shopify Adminissa kohtaan Asetukset > Asiakastapahtumat.
  2. Anna pikselille yksilöllinen nimi. Jos syötät jo olemassa olevan mukautetun pikselin nimen, sinua pyydetään antamaan pikselille toinen nimi.
  3. Avaa tapahtumaeditori klikkaamalla Lisää pikseli.
  4. Liitä kolmannen osapuolen JavaScript-pikseli Koodi-ikkunaan.
  5. Lisää tapahtumat, joita haluat seurata asianmukaisessa mallissa.
  6. Valinnainen: Klikkaa Lisää toimintoja muokataksesi pikselisi nimeä tai tarkastellaksesi tietoja, joita saatat tarvita, jos haluat palkata Shopify Expertin luomaan mukautettuja pikseleitä.
  7. Tallenna mukautettu pikseli klikkaamalla Tallenna.Jos olet valmis yhdistämään mukautetun pikselin nyt, voit aloittaa tapahtumien seuraamisen klikkaamalla Yhdistä pikseli.

Mukautetun pikselin yhdistäminen

Kun mukautettu pikseli on lisätty, sinun täytyy yhdistää pikseli kauppaasi.

  1. Klikkaa Shopify adminin Asiakastapahtumat-sivulla Mukautetut pikselit.
  2. Mukautetut pikselit, jotka eivät ole tällä hetkellä yhteydessä, näytetään otsikon Pikselit ilman yhteyttä alla. Klikkaa sopivan mukautetun pikselin rivillä Yhdistä.
  3. Tarkista Shopifyn käyttöehdot. Jos pikselisi täyttää palveluvaatimukset, klikkaa Yhdistä.

Esimerkkejä mukautetuista pikseleistä

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');
fbq('init', YOUR_PIXEL_ID);

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

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

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

Mukautettujen pikseleiden yhteyden katkaiseminen

Jos haluat lopettaa mukautetun pikselin avulla seuraamiesi tapahtumien seuraamisen, sinun on katkaistava pikselin yhteys verkkokaupasta manuaalisesti.

Tee näin:

  1. Klikkaa Shopify adminin Asiakastapahtumat-sivulla Mukautetut pikselit.
  2. Tällä hetkellä yhdistetyt mukautetut pikselit näkyvät mukautettujen pikselien luettelon yläosassa. Klikkaa mukautetun pikselin rivillä Katkaise yhteys. Pikselin yhteyden katkaiseminen ei poista pikseliä.

Mukautettujen pikseleiden poistaminen

Voit poistaa mukautettuja pikseleitä, joita et enää tarvitse.

Tee näin:

  1. Klikkaa Shopify adminin Asiakastapahtumat-sivulla Mukautetut pikselit.
  2. Klikkaa sopivan mukautetun pikselin rivillä ...-painiketta.
  3. Klikkaa Poista. Vahvista poistaminen, jotta mukautettu pikseli poistetaan pikselien hallinnointiohjelmasta.

Mukautetun pikselin poistoa ei voi peruuttaa, joten varmista, että poistat oikean pikselin.

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi