कस्टम पिक्सेल कोड तयार करा

सावधानता

कस्टम पिक्सेल्स हे एक प्रगत वैशिष्ट्य आहे ज्यासाठी 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 च्या Consent Mode शी कसे मॅप होतात ते खालीलप्रमाणे आहे:

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