कस्टम पिक्सेल कोड बनाएं

सावधानी

कस्टम पिक्सेल एक उन्नत सुविधा है, जिसके लिए JavaScript का ज्ञान ज़रूरी है। लागू कानूनों का पालन, सहमति, कोड सुरक्षा, समस्या हल करना और अपडेट आपकी ज़िम्मेदारी है। पिक्सेल, Shopify की सेवा की शर्तों के अधीन हैं।

Shopify, कस्टम पिक्सेल जोड़ने और उनका उपयोग करने में सहायता नहीं करता है। अगर आपको कस्टम पिक्सेल जोड़ने या उपयोग करने में सहायता चाहिए, तो आप किसी Shopify पार्टनर को काम पर रख सकते हैं।

इस पेज में थर्ड-पार्टी पिक्सेल के लिए कस्टम पिक्सेल कोड बनाने के निर्देश शामिल हैं, ताकि आप खास ग्राहक इवेंट ट्रैक कर सकें। अपने कस्टम पिक्सेल के लिए कोड बना लेने के बाद, आप अपने Shopify स्टोर में पिक्सेल जोड़ सकते हैं।

ध्यान दें

कस्टम पिक्सेल बनाने से पहले, आपको बेहतर स्थिरता, सुरक्षा और परफ़ॉर्मेंस के लिए उपलब्ध ऐप की समीक्षा करनी चाहिए। हालांकि, अगर ऐसा कोई ऐप नहीं है जो आपकी ज़रूरतों को पूरा करता हो, तो आप एक कस्टम पिक्सेल बना सकते हैं।

कस्टम पिक्सेल बनाने की तैयारी

कस्टम पिक्सेल बनाने से पहले, यह पक्का करने के लिए नीचे दी गई जानकारी की समीक्षा करें कि आप अपने पिक्सेल को कॉन्फ़िगर करने का तरीका समझते हैं:

• पिक्सेल से जुड़े जोखिम.
• Shopify के पिक्सेल सैंडबॉक्स की सीमाएं.
• Shopify पिक्सेल सैंडबॉक्स API का उपयोग करना.
• ग्राहक इवेंट ट्रैकिंग स्कीमा.

जब आप एक कस्टम पिक्सेल जोड़ते हैं, तो आप निम्नलिखित जानकारी निर्दिष्ट करते हैं:

• थर्ड-पार्टी JavaScript पिक्सेल.
• वे व्यवहार संबंधी इवेंट जिन्हें आप ट्रैक करना चाहते हैं.
• ग्राहक निजता सहमति सेटिंग.

कस्टम पिक्सेल के लिए कोड बनाएं

अपना व्यवसाय बढ़ाएं

यह एक एडवांस्ड ट्यूटोरियल है और Shopify इसकी सहायता नहीं करता है। अगर आपको कस्टम पिक्सेल जोड़ने में मदद चाहिए, तो आप किसी Shopify पार्टनर को काम पर रख सकते हैं।

कस्टम पिक्सेल के लिए कोड बनाने में निम्नलिखित चरण शामिल हैं:

1. थर्ड-पार्टी Javascript SDK तैयार करें.
2. अपने पिक्सेल को ग्राहक इवेंट ट्रैक करने के लिए कॉन्फ़िगर करें.
3. अपने पिक्सेल के लिए ग्राहक निजता सहमति सेटिंग कॉन्फ़िगर करें.

थर्ड-पार्टी Javascript SDK तैयार करना

जिस थर्ड-पार्टी सेवा के साथ आप काम कर रहे हैं, वह आपको वह कोड देती है जो पिक्सेल के साथ इंटीग्रेट होता है। एक पिक्सेल में आमतौर पर 2 घटक होते हैं: एक Javascript SDK और ट्रैकिंग कोड। थर्ड-पार्टी सेवा कोड में मौजूद किसी भी HTML को हटाने की ज़रूरत होती है, क्योंकि Shopify पिक्सेल सैंडबॉक्स सिर्फ़ JavaScript को सपोर्ट करता है।

यहां मेटा पिक्सेल का एक उदाहरण दिया गया है। पिक्सेल, अलग-अलग थर्ड-पार्टी के हिसाब से थोड़े अलग-अलग होते हैं।

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

मेटा के कोड से HTML हटाने के बाद, आपके पास मेटा का पिक्सेल 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);

मेटा का पिक्सेल SDK, Shopify के कस्टम पिक्सेल से अपने-आप डेटा ट्रांसमिट नहीं करता है। डेटा ट्रांसमिट करने के लिए, आपको इवेंट के लिए सब्सक्राइब करना होगा।

हो सकता है कि आपको ऐसे पिक्सेल मिलें जो script src= का उपयोग करके लोड किए जाते हैं। Shopify के पिक्सेल में HTML सपोर्ट नहीं है, इसलिए आपको script src= को JavaScript के समकक्ष से बदलना होगा।

यहां एक नमूना Google Analytics पिक्सेल है जो 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>

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 का उपयोग करके इवेंट की सदस्यता ले सकते हैं। आपको जिस इवेंट की आप सदस्यता ले रहे हैं, उसके साथ थर्ड-पार्टी पिक्सेल कोड डालना होगा।

यह मेटा के पिक्सेल के लिए PageView इवेंट का एक उदाहरण है। ध्यान दें कि fbq("track") मेटा के कोड का हिस्सा है और हर कंपनी का अपना वर्शन होगा, जिसके लिए आपको उनके दस्तावेज़ को देखना होगा।

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

कुछ इवेंट में मेटा-डेटा होता है जिसे आप अपने पिक्सेल में पास कर सकते हैं। यहां मेटा के 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',
});

कस्टम पिक्सेल का उदाहरण

नीचे मेटा पिक्सेल के लिए कोड का एक उदाहरण दिया गया है। पिक्सेल कोड, थर्ड-पार्टी सेवा प्रोवाइडर और उन इवेंट के आधार पर अलग-अलग होता है, जिन्हें आप ट्रैक करना चाहते हैं। उपलब्ध इवेंट की सूची के लिए ग्राहक इवेंट संदर्भ देखें।

कस्टम मेटा पिक्सेल का उदाहरण

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