కస్టమ్ పిక్సెల్ కోడ్‌ను సృష్టించండి

హెచ్చరిక

కస్టమ్ పిక్సెల్‌లు అనేది JavaScript పరిజ్ఞానం అవసరమయ్యే ఒక అధునాతన ఫీచర్. వర్తించే చట్టాలు, సమ్మతులు, కోడ్ భద్రత, ట్రబుల్షూటింగ్ మరియు అప్‌డేట్‌లను పాటించడం మీ బాధ్యత. పిక్సెల్‌లు Shopify సేవా నిబంధనలకు లోబడి ఉంటాయి.

కస్టమ్ పిక్సెల్‌లను జోడించడానికి మరియు ఉపయోగించడానికి Shopify ద్వారా మద్దతు లేదు. కస్టమ్ పిక్సెల్‌ని జోడించడంలో లేదా ఉపయోగించడంలో మీకు సహాయం కావాలంటే, మీరు Shopify భాగస్వామిని నియమించుకోవచ్చు.

మీరు నిర్దిష్ట కస్టమర్ ఈవెంట్‌లను ట్రాక్ చేయడానికి వీలుగా, ఈ పేజీలో థర్డ్-పార్టీ పిక్సెల్ కోసం కస్టమ్ పిక్సెల్ కోడ్‌ను సృష్టించడానికి సూచనలు ఉంటాయి. మీరు మీ కస్టమ్ పిక్సెల్ కోసం కోడ్‌ను సృష్టించిన తర్వాత, మీరు మీ Shopify స్టోర్‌కు ఆ పిక్సెల్‌ను జోడించవచ్చు.

గమనిక

మీరు కస్టమ్ పిక్సెల్‌ని సృష్టించే ముందు, మెరుగైన స్థిరత్వం, భద్రత మరియు పనితీరు కోసం మీరు తప్పనిసరిగా అందుబాటులో ఉన్న యాప్‌లను రివ్యూ చేయాలి. అయితే, మీ అవసరాలను తీర్చే యాప్ లేకుంటే, మీరు కస్టమ్ పిక్సెల్‌ను సృష్టించవచ్చు.

కస్టమ్ పిక్సెల్‌ని సృష్టించడానికి సిద్ధం చేయడం

మీరు కస్టమ్ పిక్సెల్‌ని సృష్టించడానికి ముందుగా, మీ పిక్సెల్‌ని కాన్ఫిగర్ చేయడం మీకు అర్థమైందని నిర్ధారించుకోవడానికి కింది సమాచారాన్ని సమీక్షించండి:

• పిక్సెల్‌లకు సంబంధించిన నష్టాలు.
• Shopify పిక్సెల్‌ల శాండ్‌బాక్స్ పరిమితులు.
• Shopify పిక్సెల్‌ల శాండ్‌బాక్స్ API వినియోగం.
• కస్టమర్ ఈవెంట్ ట్రాకింగ్ స్కీమా.

మీరు కస్టమ్ పిక్సెల్‌ని జోడించినప్పుడు, మీరు కింది సమాచారాన్ని పేర్కొనాలి:

• థర్డ్-పార్టీ JavaScript పిక్సెల్.
• మీరు ట్రాక్ చేయాలనుకుంటున్న ప్రవర్తనా సంబంధ ఈవెంట్‌లు.
• కస్టమర్ గోప్యతా సమ్మతి సెట్టింగ్‌లు.

కస్టమ్ పిక్సెల్ కోసం కోడ్‌ని సృష్టించండి

మీ బిజినెస్‌ను వృద్ధి చేసుకోండి

ఇది అధునాతన ట్యుటోరియల్, అలాగే దీనికి Shopify ద్వారా మద్దతు లేదు. కస్టమ్ పిక్సెల్‌ని జోడించడంలో మీకు సహాయం కావాలంటే, మీరు Shopify భాగస్వామిని నియమించుకోవచ్చు.

కస్టమ్ పిక్సెల్ కోసం కోడ్‌ని సృష్టించడంలో కింది దశలు ఉంటాయి:

1. థర్డ్-పార్టీ Javascript SDKని సిద్ధం చేయండి.
2. కస్టమర్ ఈవెంట్‌లను ట్రాక్ చేయడానికి మీ పిక్సెల్‌ని కాన్ఫిగర్ చేయండి.
3. మీ పిక్సెల్ కోసం కస్టమర్ గోప్యతకు సంబంధించిన సమ్మతి సెట్టింగ్‌లను కాన్ఫిగర్ చేయండి.

థర్డ్-పార్టీ Javascript SDKని సిద్ధం చేయడం

మీరు పని చేస్తున్న థర్డ్-పార్టీ సర్వీస్, పిక్సెల్‌తో అనుసంధానించబడే కోడ్‌ని మీకు అందిస్తుంది. పిక్సెల్ సాధారణంగా 2 భాగాలను కలిగి ఉంటుంది: Javascript SDK, ట్రాకింగ్ కోడ్. Shopify పిక్సెల్ శాండ్‌బాక్స్ కేవలం JavaScriptకు మాత్రమే మద్దతు ఇస్తుంది కాబట్టి థర్డ్-పార్టీ సర్వీస్ కోడ్‌లోని ఏవైనా HTMLలను తీసివేయాలి.

Meta పిక్సెల్‌కు సంబంధించిన ఉదాహరణ ఇక్కడ ఉంది. ఒక థర్డ్-పార్టీ నుండి మరొక దానికి పిక్సెల్‌లు కొద్దిగా భిన్నంగా ఉంటాయి.

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

Meta కోడ్ నుండి HTMLను తీసివేసిన తర్వాత, మీ వద్ద Meta పిక్సెల్ SDK, దాన్ని ప్రారంభించే కోడ్ మిగిలి ఉంటాయి. PageView ఈవెంట్ ట్రాకింగ్ కోడ్ కూడా తీసివేయబడింది, ఎందుకంటే ఇది తర్వాతి దశలో జోడించబడుతుంది.

​​!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కి చెందిన పిక్సెల్ SDK అనేది Shopify కస్టమ్ పిక్సెల్ నుండి డేటాను ఆటోమేటిక్‌గా బదిలీ చేయదు. డేటాను బదిలీ చేయడానికి, మీరు ఈవెంట్‌లకు సబ్‌స్క్రయిబ్ చేసుకోవాలి.

మీరు script src= ఉపయోగించి లోడ్ చేసిన పిక్సెల్‌లను కనుగొనవచ్చు. Shopify పిక్సెల్‌లలో HTMLకు మద్దతు లేదు కాబట్టి, మీరు script src= స్థానంలో దానికి సమానమైన JavaScriptను ఉపయోగించాల్సి ఉంటుంది.

script src= ఉపయోగించి లోడ్ అయ్యే నమూనా Google ఎనలిటిక్స్ పిక్సెల్ ఇక్కడ ఉంది:

<!-- 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= భాగాన్ని దానికి సమానమైన JavaScriptతో భర్తీ చేయవచ్చు. ఎల్లప్పుడూ మీ src లక్షణం అనేది 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');

Googleకు చెందిన పిక్సెల్ SDK అనేది Shopify కస్టమ్ పిక్సెల్ నుండి డేటాను ఆటోమేటిక్‌గా బదిలీ చేయదు. డేటాను బదిలీ చేయడానికి, మీరు ఈవెంట్‌లకు సబ్‌స్క్రయిబ్ చేసుకోవాలి.

కస్టమర్ ఈవెంట్‌లను ట్రాక్ చేయండి

పిక్సెల్ SDKని లోడ్ చేసి, ప్రారంభించిన తర్వాత, ట్రాకింగ్ కోసం మీరు ఈవెంట్‌లను దానికి పంపాలి. ఈవెంట్‌లకు సబ్‌స్క్రయిబ్ చేయడం ద్వారా, ఆపై థర్డ్-పార్టీ సర్వీస్ ద్వారా ప్రాసెస్ చేయబడటం కోసం ఈవెంట్ డేటాను పిక్సెల్ SDKకి పంపడం ద్వారా ఇది చేయబడుతుంది.

ప్రామాణిక ఈవెంట్‌లకు సబ్‌స్క్రయిబ్ చేయండి

Shopify ఒక ప్రామాణిక ఈవెంట్‌ల సెట్‌ను అందిస్తుంది, ఇది మీ పిక్సెల్ దానికి కావాల్సిన డేటాను సేకరిస్తుందని నిర్ధారించుకోవడాన్ని సులభతరం చేస్తుంది.

మీరు Shopify Pixels Extension API ఉపయోగించి ఈవెంట్‌లకు సబ్‌స్క్రయిబ్ చేయవచ్చు. మీరు సబ్‌స్క్రయిబ్ చేస్తున్న ఈవెంట్‌తో థర్డ్-పార్టీ పిక్సెల్ కోడ్‌ను ఉంచాల్సి ఉంటుంది.

ఇది Meta పిక్సెల్ కోసం PageView ఈవెంట్‌కు సంబంధించిన ఒక ఉదాహరణ. ఇక్కడ గమనించాల్సిన విషయం ఏమిటంటే fbq("track") అనేది Meta కోడ్‌లో ఒక భాగం. ప్రతి కంపెనీ వారి స్వంత వెర్షన్‌ను కలిగి ఉంటుంది, దీనికి సంబంధించి మీరు వారి డాక్యుమెంటేషన్‌ను రెఫర్ చేయాల్సి ఉంటుంది.

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

కొన్ని ఈవెంట్‌లు మీ పిక్సెల్‌కి పంపగల మెటాడేటాను కలిగి ఉంటాయి. Metaకు చెందిన ViewContent ఈవెంట్‌కి కొన్ని ఉత్పత్తి వివరాలను పంపడానికి సంబంధించిన ఉదాహరణ ఇక్కడ ఉంది:

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

కస్టమ్ కస్టమర్ ఈవెంట్‌లకు సబ్‌స్క్రయిబ్ చేయండి

ఒకవేళ మీరు ఎవరైనా బటన్‌ను క్లిక్ చేయడం లాంటి అదనపు కస్టమర్ ఈవెంట్‌లను ట్రాక్ చేయాలనుకుంటే, మీరు కస్టమ్ కస్టమర్ ఈవెంట్‌లను జోడించవచ్చు. కస్టమ్ ఈవెంట్‌లు ప్రామాణిక ఈవెంట్‌ల మాదిరిగానే సబ్‌స్క్రయిబ్ చేయబడతాయి. మీరు సబ్‌స్క్రయిబ్ చేయాలనుకుంటున్న ఈవెంట్ పేరును డిక్లేర్ చేసి, ఆ సమాచారాన్ని థర్డ్-పార్టీ సర్వీస్ ప్రొవైడర్ పిక్సెల్‌కి పంపండి.

ప్రచురించిన కస్టమ్ ఈవెంట్ అనేది మీ థీమ్ లిక్విడ్ ఫైల్‌లలో ఎలా కనిపిస్తుంది అని తెలియజేయడానికి ఇదొక ఉదాహరణ:

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

ఆ కస్టమ్ ఈవెంట్‌కు సబ్‌స్క్రయిబ్ చేసుకోవడానికి మీ పిక్సెల్‌ను ఎలా కాన్ఫిగర్ చేయవచ్చు అని తెలియజేయడానికి ఇదొక ఉదాహరణ:

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

కస్టమ్ ఈవెంట్‌ల గురించి మరింత సమాచారం కోసం, Shopify డెవలపర్ డాక్యుమెంటేషన్ను రెఫర్ చేయండి.

సమ్మతి మరియు డేటా సేల్ సెట్టింగ్‌లను కాన్ఫిగర్ చేయడం

గమనిక

మీ స్వంత గోప్యతా కంప్లయన్స్ బాధ్యత మీదే, అలాగే మీ ప్రాంతంలో మరియు మీరు విక్రయాలు సాగించే ప్రాంతంలోని చట్టాలు మీ బిజినెస్‌ను ఎలా ప్రభావితం చేస్తాయనేది తెలుసుకోవడానికి మీరు మీ స్వంత న్యాయవాదిని సంప్రదించాలి. Shopify ప్లాట్‌ఫామ్‌ను ఉపయోగించి ఉత్పత్తులను విక్రయించడానికి, మీరు మీ బిజినెస్ మరియు మీ కస్టమర్‌లకు వర్తించే అధికార పరిధిలోని చట్టాలు, Shopify సేవా నిబంధనలు, Shopify ఆమోదయోగ్యమైన వినియోగ విధానం, ఏవైనా వర్తించే ఇతర విధానాలకు కట్టుబడి ఉండాలి. కస్టమర్ గోప్యత గురించి మరింత తెలుసుకోండి.

యూరోపియన్ ఆర్థిక ప్రాంతం (EEA) మరియు యునైటెడ్ కింగ్‌డమ్ లాంటి, సమ్మతి తప్పనిసరిగా కాన్ఫిగర్ చేసిన మార్కెట్‌లలో, వెబ్‌సైట్ సందర్శకులు పిక్సెల్ కాన్ఫిగరేషన్‌లో అవసరమైన అనుమతులను అందించినప్పుడు మాత్రమే వెబ్ పిక్సెల్‌లు రన్ చేయబడతాయి.

ఆటోమేటిక్‌గా, కొత్త కస్టమ్ పిక్సెల్‌లకు మార్కెటింగ్, అనలిటిక్స్ అనుమతులు అవసరం అవుతాయి. మీరు మీ కస్టమ్ పిక్సెల్ వివరాలలోని కస్టమర్ గోప్యత > అనుమతి విభాగంలో ఏ అనుమతులు అవసరమనేది అనుకూలీకరించవచ్చు.

అదేవిధంగా, డేటా సేల్‌గా కాన్ఫిగర్ చేసిన పిక్సెల్‌లు పరిమిత డేటా వినియోగానికి మద్దతిస్తే తప్ప, డేటా సేల్ లేదా షేరింగ్ నుండి నిష్క్రమించిన కస్టమర్‌ల కోసం రన్ చేయబడవు. ఆటోమేటిక్‌గా, కొత్త కస్టమ్ పిక్సెల్‌లు డేటా సేల్‌కు అర్హత పొందుతాయి. సేకరించిన డేటా అనేది డేటా సేల్‌కు అర్హత పొందుతుందో, లేదో అనేదాన్ని మీ కస్టమ్ పిక్సెల్ వివరాలలోని కస్టమర్ గోప్యత > డేటా సేల్ విభాగంలో మీరు అనుకూలీకరించవచ్చు.

కస్టమ్ పిక్సెల్స్ డెవలపర్‌లు సమ్మతిని సేకరించడం మరియు నమోదు చేయడం గురించి మరింత తెలుసుకోవచ్చు.

ప్రతి పిక్సెల్ ప్రతి ప్రయోజనం కోసం వేర్వేరు పేరును కలిగి ఉండవచ్చు. ఇది Shopify నిర్వచనాలకు ఎలా మ్యాప్ చేయబడుతుందో అర్థం చేసుకోవడానికి మీరు థర్డ్-పార్టీ పిక్సెల్ డాక్యుమెంటేషన్‌ను సంప్రదించాలి.

ఉదాహరణకు, మార్కెటింగ్, అనలిటిక్స్ ప్రయోజనాలు Google సమ్మతి మోడ్‌కి ఎలా మ్యాప్ చేయబడతాయో కింది విధంగా ఉంటుంది:

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

కస్టమ్ పిక్సెల్ ఉదాహరణ

Meta పిక్సెల్ కోసం కోడ్‌కి సంబంధించిన ఒక ఉదాహరణ దిగువ అందించబడింది. థర్డ్-పార్టీ సర్వీస్ ప్రొవైడర్ మరియు మీరు ట్రాక్ చేయాలనుకుంటున్న ఈవెంట్‌ల ఆధారంగా పిక్సెల్ కోడ్ మారుతూ ఉంటుంది. అందుబాటులో ఉన్న ఈవెంట్‌ల జాబితా కోసం కస్టమర్ ఈవెంట్ రెఫరెన్స్ను పరిశీలించండి.

కస్టమ్ Meta పిక్సెల్ ఉదాహరణ

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