کسٹم پکسل کا کوڈ تخلیق کریں

احتیاط

کسٹم پکسلز ایک جدید فیچر ہے جس کے لیے 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 پکسل کی ایک مثال ہے۔ پکسلز ہر تھرڈ پارٹی کے لحاظ سے قدرے مختلف ہوں گے۔

​​<!-- 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 اور اسے شروع کرنے (initialize) کا کوڈ رہ جاتا ہے۔ 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 سے تبدیل کرنا ہوگا۔

یہاں ایک نمونے کا 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 وصف (attribute) آپ کے 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 کو لوڈ اور شروع (initialize) کرنے کے بعد، آپ کو ٹریکنگ کے لیے اس میں ایونٹس پاس کرنے ہوں گے۔ یہ ایونٹس کو سبسکرائب کرنے، اور پھر تھرڈ پارٹی سروس کے ذریعے کارروائی کرنے کے لیے ایونٹ کا ڈیٹا پکسل کے 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,
  });
});

کسٹم کسٹمر ایونٹس کو سبسکرائب کریں

اگر آپ کسٹمر کے اضافی ایونٹس کو ٹریک کرنا چاہتے ہیں، جیسا کہ جب کوئی بٹن پر کلک کرتا ہے، تو آپ کسٹم کسٹمر ایونٹس شامل کر سکتے ہیں۔ کسٹم ایونٹس کو اسی طرح سبسکرائب کیا جا سکتا ہے جس طرح معیاری ایونٹس کو کیا جاتا ہے۔ اس ایونٹ کا نام بتائیں جسے آپ سبسکرائب کرنا چاہتے ہیں اور معلومات کو تھرڈ پارٹی سروس فراہم کنندہ کے پکسل پر پاس کریں۔

یہ اس بات کی ایک مثال ہے کہ آپ کے تھیم کی liquid فائلوں میں ایک شائع شدہ کسٹم ایونٹ کیسا ظاہر ہو سکتا ہے:

<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 Terms of Service، Shopify Acceptable Use Policy، اور دیگر قابل اطلاق پالیسیوں کی تعمیل کرنا ہوگی۔ کسٹمر کی پرائیویسی کے بارے میں مزید جانیں۔

ایسی مارکیٹ، جیسے کہ یورپی اقتصادی علاقہ (EEA) اور برطانیہ، جہاں رضامندی درکار ہوتی ہے، ویب پکسل صرف اس وقت چلتے ہیں جب ویب سائٹ کے وزٹر پکسل کنفیگریشن کے مطابق مطلوبہ پرمیشن فراہم کر دیں۔

ڈیفالٹ کے طور پر، نئے کسٹم پکسل کے لیے مارکیٹنگ اور اینالیٹکس کی پرمیشن درکار ہوتی ہے۔ آپ اپنے کسٹم پکسل کی تفصیلات کے کسٹمر کی پرائیویسی > پرمیشن سیکشن میں کسٹمائز کر سکتے ہیں کہ کون سی پرمیشن درکار ہیں۔

اسی طرح، ڈیٹا کی فروخت کے طور پر کنفیگر کیے گئے پکسل ان کسٹمر کے لیے کام نہیں کریں گے جنہوں نے ڈیٹا کی فروخت یا شیئرنگ سے آپٹ آؤٹ کیا ہے، جب تک کہ پکسل ڈیٹا کے محدود استعمال کو سپورٹ نہ کرے۔ ڈیفالٹ کے طور پر، نئے کسٹم پکسل ڈیٹا کی فروخت کے معیار پر پورا اترتے ہیں۔ آپ اپنے کسٹم پکسل کی تفصیلات کے کسٹمر کی پرائیویسی > ڈیٹا کی فروخت سیکشن میں کسٹمائز کر سکتے ہیں کہ آیا جمع کیا گیا ڈیٹا، ڈیٹا کی فروخت کے معیار پر پورا اترتا ہے یا نہیں۔

کسٹم پکسل کے ڈیویلپر رضامندی حاصل کرنے اور رجسٹر کرنے کے بارے میں مزید جان سکتے ہیں۔

ہر مقصد کے لیے ہر پکسل کا نام مختلف ہو سکتا ہے۔ آپ کو تھرڈ پارٹی کی پکسل دستاویزات سے رجوع کرنا چاہیے تاکہ یہ سمجھ سکیں کہ یہ Shopify کی تعریفوں کے مطابق کیسے ہے۔

مثال کے طور پر، ذیل میں بتایا گیا ہے کہ مارکیٹنگ اور اینالیٹکس کے مقاصد Google کے Consent Mode سے کیسے مماثلت رکھتے ہیں:

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