Vytvorenie kódu vlastného pixela

Upozornenie

Vlastné pixely sú pokročilá funkcia, ktorá si vyžaduje znalosť jazyka JavaScript. Za dodržiavanie platných zákonov, súhlasy, zabezpečenie kódu, riešenie problémov a aktualizácie nesiete zodpovednosť vy. Na pixely sa vzťahujú Zmluvné podmienky služby Shopify.

Pridávanie a používanie vlastných pixelov nie je zo strany Shopify podporované. Ak pri pridávaní alebo používaní vlastného pixela potrebujete pomoc, môžete si najať partnera Shopify.

Táto stránka obsahuje pokyny na vytvorenie kódu vlastného pixela pre pixel tretej strany, aby ste mohli sledovať konkrétne udalosti zákazníkov. Po vytvorení kódu vlastného pixela môžete pixel pridať do obchodu Shopify.

Poznámka

Pred vytvorením vlastného pixela by ste si mali pozrieť dostupné aplikácie, ktoré ponúkajú lepšiu stabilitu, zabezpečenie a výkonnosť. Ak však neexistuje aplikácia, ktorá by vyhovovala vašim potrebám, môžete si vytvoriť vlastný pixel.

Príprava na vytvorenie vlastného pixela

Pred vytvorením vlastného pixela si prečítajte nasledujúce informácie a uistite sa, že rozumiete konfigurácii svojho pixela:

• Riziká spojené s pixelmi.
• Obmedzenia sandboxu pixelov Shopify.
• Používanie rozhrania API sandboxu pixelov Shopify.
• Schéma sledovania udalostí zákazníkov.

Pri pridávaní vlastného pixela zadáte nasledujúce informácie:

• JavaScriptový pixel tretej strany.
• Udalosti správania, ktoré chcete sledovať.
• Nastavenia súhlasu s ochranou osobných údajov zákazníkov.

Vytvorenie kódu vlastného pixela

Rozšírte svoje podnikanie

Ide o pokročilý tutoriál, ktorý zo strany Shopify nie je podporovaný. Ak pri pridávaní vlastného pixela potrebujete pomoc, môžete si najať partnera Shopify.

Vytvorenie kódu vlastného pixela zahŕňa nasledujúce kroky:

1. Pripravte JavaScript SDK tretej strany.
2. Nakonfigurujte pixel na sledovanie udalostí zákazníkov.
3. Nakonfigurujte pre svoj pixel nastavenia súhlasu pre ochranu osobných údajov zákazníkov.

Príprava JavaScript SDK tretej strany

Služba tretej strany, s ktorou pracujete, vám poskytne kód integrovaný s pixelom. Pixel má zvyčajne 2 komponenty: JavaScript SDK a sledovací kód. Akýkoľvek kód HTML v kóde služby tretej strany je potrebné odstrániť, pretože sandbox pixelov Shopify podporuje iba JavaScript.

Tu je príklad Metapixela. Pixely sa budú v závislosti od tretej strany mierne líšiť.

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

Po odstránení kódu HTML z kódu Meta vám zostane súprava SDK pre Metapixel a kód na jej inicializáciu. Kód na sledovanie udalosti PageView sa rovnako odstránil, pretože sa pridá v nasledujúcom kroku.

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

SDK pre Metapixel neprenáša údaje z vlastného pixela Shopify automaticky. Ak chcete prenášať údaje, musíte sa prihlásiť na odber udalostí.

Môžete naraziť na pixely, ktoré sa načítavajú pomocou script src=. Kód HTML nie je v pixeloch Shopify podporovaný, takže budete musieť nahradiť script src= ekvivalentom v jazyku JavaScript.

Tu je ukážka pixela služby Google Analytics, ktorý sa načíta pomocou script src=:

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

Časť script src= sa dá nahradiť ekvivalentom v jazyku JavaScript. Vždy sa uistite, že sa atribút src zhoduje s verziou HTML:

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

SDK pre pixel Google neprenáša údaje z vlastného pixela Shopify automaticky. Ak chcete prenášať údaje, musíte sa prihlásiť na odber udalostí.

Sledovanie udalostí zákazníkov

Po načítaní a inicializácii súpravy SDK pixela do nej musíte na účely sledovania posunúť udalosti. Urobíte to tak, že sa prihlásite na odber udalostí a následne presuniete údaje o udalosti do súpravy SDK pixela, aby ich služba tretej strany spracovala.

Prihlásenie na odber štandardných udalostí

Shopify ponúka štandardnú množinu udalostí, vďaka čomu sa ľahko uistíte, že váš pixel zhromažďuje potrebné údaje.

Na odber udalostí sa môžete prihlásiť pomocou Shopify Pixels Extension API. Kód pixela tretej strany budete musieť vložiť spolu s udalosťou, na odber ktorej sa prihlasujete.

Toto je príklad udalosti PageView pre Metapixel. Upozorňujeme, že fbq("track") je súčasťou kódu Meta a každá spoločnosť bude mať vlastnú verziu, ktorú si budete musieť pozrieť v jej dokumentácii.

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

Niektoré udalosti majú metadáta, ktoré môžete posunúť do svojho pixela. Tu je príklad presunu niekoľkých detailov produktu do udalosti ViewContent v rámci služby Meta:

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

Prihlásenie na odber vlastných udalostí zákazníkov

Ak chcete sledovať ďalšie udalosti zákazníkov, napríklad kliknutie na tlačidlo, môžete pridať vlastné udalosti zákazníkov. Na odber vlastných udalostí sa môžete prihlásiť rovnakým spôsobom ako v prípade štandardných udalostí. Deklarujte názov udalosti, na ktorej odber sa chcete prihlásiť, a posuňte informácie do pixela poskytovateľa služby tretej strany.

Toto je príklad, ako môže zverejnená vlastná udalosť vyzerať v súboroch Liquid vašej témy:

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

Toto je príklad, ako môžete nakonfigurovať svoj pixel na prihlásenie sa na odber danej vlastnej udalosti:

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

Ďalšie informácie o vlastných udalostiach nájdete v dokumentácii Shopify Developer Documentation.

Konfigurácia nastavení súhlasu a predaja údajov

Poznámka

Za dodržiavanie ochrany súkromia nesiete zodpovednosť vy a mali by ste sa poradiť s právnym poradcom, aby ste zistili, ako môžu zákony vo vašom regióne a v regióne, v ktorom predávate, ovplyvniť vaše podnikanie. Ak chcete predávať produkty pomocou platformy Shopify, musíte dodržiavať zákony jurisdikcie svojho podnikania a svojich zákazníkov, podmienky Shopify Terms of Service, zásady Shopify Acceptable Use Policy a akékoľvek ďalšie platné zásady. Ďalšie informácie o ochrane súkromia zákazníkov.

Na trhoch, kde je nakonfigurované vyžadovanie súhlasu, ako je Európsky hospodársky priestor (EHP) a Spojené kráľovstvo, sa webové pixely spustia, až keď návštevníci webového sídla udelia povolenia požadované v konfigurácii pixelov.

V predvolenom nastavení vyžadujú nové vlastné pixely povolenia Marketing a Analytika. Požadované povolenia môžete prispôsobiť v podrobnostiach vlastného pixelu v časti Ochrana súkromia zákazníkov > Povolenia.

Podobne sa pixely nakonfigurované ako predaj údajov nespustia u zákazníkov, ktorí sa odhlásili z predaja alebo zdieľania údajov, pokiaľ pixel nepodporuje obmedzené použitie údajov. Nové vlastné pixely sa predvolene považujú za predaj údajov. To, či sa zhromaždené údaje považujú za predaj údajov, môžete prispôsobiť v podrobnostiach vlastného pixelu v časti Ochrana súkromia zákazníkov > Predaj údajov.

Vývojári vlastných pixelov môžu získať ďalšie informácie o zhromažďovaní a evidovaní súhlasu.

Každý pixel môže mať pre každý účel iný názov. Pozrite si dokumentáciu k pixelu od tretej strany, aby ste porozumeli, ako je namapovaný na definície v službe Shopify.

Napríklad takto sa mapujú účely Marketing a Analytika na Režim súhlasu od Googlu (Consent Mode):

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

Príklad vlastného pixelu

Nižšie uvádzame príklad kódu pre Metapixel. Kód pixelu sa líši v závislosti od poskytovateľa služieb tretej strany a udalostí, ktoré chcete sledovať. Zoznam dostupných udalostí nájdete v referenčnej príručke v časti udalosti zákazníkov.

Príklad vlastného Metapixelu

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