কাস্টম পিক্সেল কোড তৈরি করুন

সতর্কতা

কাস্টম পিক্সেল হলো একটি অ্যাডভান্সড ফিচার যার জন্য JavaScript-এর বিষয়ে জ্ঞানের প্রয়োজন হয়। প্রযোজ্য আইন মেনে চলা, সম্মতি, কোড নিরাপত্তা, ট্রাবলশুটিং এবং আপডেটগুলোর দায়িত্ব আপনার। পিক্সেলগুলো Shopify-এর পরিষেবার শর্তাবলি-এর অধীন।

কাস্টম পিক্সেল যোগ এবং ব্যবহার করা Shopify দ্বারা সমর্থিত নয়। একটি কাস্টম পিক্সেল যোগ করতে বা ব্যবহার করতে আপনার সহায়তার প্রয়োজন হলে, আপনি একজন Shopify পার্টনার নিয়োগ করতে পারেন।

এই পেজে একটি তৃতীয়-পক্ষ পিক্সেলের জন্য কাস্টম পিক্সেল কোড তৈরির নির্দেশিকা রয়েছে, যাতে আপনি নির্দিষ্ট গ্রাহকের ইভেন্টগুলো ট্র্যাক করতে পারেন। আপনার কাস্টম পিক্সেলের জন্য কোড তৈরি করার পর, আপনি আপনার Shopify স্টোরে পিক্সেলটি যোগ করতে পারবেন।

টীকা

কাস্টম পিক্সেল তৈরি করার আগে, উন্নত স্ট্যাবিলিটি, নিরাপত্তা এবং পারফরম্যান্সের জন্য আপনার উপলব্ধ অ্যাপগুলো পর্যালোচনা করা উচিত। তবে, আপনার প্রয়োজন মেটাতে পারে এমন কোনো অ্যাপ না থাকলে, আপনি একটি কাস্টম পিক্সেল তৈরি করতে পারেন।

কাস্টম পিক্সেল তৈরির প্রস্তুতি

কাস্টম পিক্সেল তৈরি করার আগে, কীভাবে আপনার পিক্সেল কনফিগার করতে হয় তা বুঝতে নিচের তথ্যগুলো দেখে নিন:

• পিক্সেলের সাথে সম্পর্কিত ঝুঁকি।
• Shopify-এর পিক্সেল স্যান্ডবক্সের সীমাবদ্ধতা।
• Shopify পিক্সেল স্যান্ডবক্স API-এর ব্যবহার।
• গ্রাহকের ইভেন্ট ট্র্যাকিং স্কিমা।

কাস্টম পিক্সেল যোগ করার সময়, আপনাকে নিচের তথ্যগুলো নির্দিষ্ট করতে হবে:

• তৃতীয়-পক্ষ JavaScript পিক্সেল।
• আচরণগত যেসব ইভেন্ট আপনি ট্র্যাক করতে চান।
• গ্রাহকের গোপনীয়তার সম্মতি সংক্রান্ত সেটিংস।

কাস্টম পিক্সেলের জন্য কোড তৈরি করুন

ব্যবসার প্রসার ঘটান

এটি একটি উন্নত টিউটোরিয়াল এবং এটি Shopify দ্বারা সমর্থিত নয়। কাস্টম পিক্সেল যোগ করতে সাহায্যের প্রয়োজন হলে, আপনি একজন Shopify পার্টনার নিয়োগ করতে পারেন।

কাস্টম পিক্সেলের কোড তৈরি করার জন্য নিচের ধাপগুলো অনুসরণ করতে হবে:

1. তৃতীয়-পক্ষ Javascript SDK প্রস্তুত করুন।
2. গ্রাহকের ইভেন্ট ট্র্যাক করতে আপনার পিক্সেল কনফিগার করুন।
3. আপনার পিক্সেলের জন্য গ্রাহকের গোপনীয়তার সম্মতি সংক্রান্ত সেটিংস কনফিগার করুন।

তৃতীয়-পক্ষ Javascript SDK প্রস্তুত করা

আপনি যে তৃতীয়-পক্ষ পরিষেবার সাথে কাজ করছেন সেটি আপনাকে পিক্সেলের সাথে ইন্টিগ্রেট করার কোড প্রদান করে। একটি পিক্সেলের সাধারণত ২-টি উপাদান থাকে: একটি 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 এবং এটি ইনিশিয়ালাইজ করার কোড থাকবে। 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 অ্যাট্রিবিউটটি 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-এর 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,
  });
});