إنشاء رمز بكسل مخصص
تتضمن هذه الصفحة إرشادات لإنشاء رمز بكسل مخصص لبكسل تابع لجهة خارجية، بحيث يمكنك تتبع أحداث محددة للعميل. بعد إنشاء الرمز لبكسل مخصص، يمكنك إضافة البكسل إلى متجر Shopify الخاص بك.
التحضير لإنشاء بكسل مخصص
قبل إنشاء بكسل مخصص، راجع المعلومات التالية للتأكد من فهم كيفية تكوين البكسل الخاص بك:
- المخاطر المرتبطة بالبكسلات.
- قيود بيئة الاختبار المعزولة للبكسل في Shopify.
- استخدام واجهة برمجة التطبيقات لبيئة الاختبار المعزولة للبكسل في Shopify.
- مخطط تتبع أحداث العميل.
عند إضافة بكسل مخصص، يمكنك تحديد المعلومات التالية:
- بكسل JavaScript التابع لجهة خارجية.
- الأحداث السلوكية التي تريد تتبعها.
- إعدادات الموافقة على خصوصية العميل.
إنشاء الرمز لبكسل مخصص
يتضمن إنشاء الرمز لبكسل مخصص الخطوات التالية:
- إعداد حزمة SDK التابعة لجهة خارجية بلغة Javascript.
- تكوين البكسل الخاص بك لـ تتبع أحداث العميل.
- تكوين إعدادات الموافقة لخصوصية العميل للبكسل الخاص بك.
إعداد حزمة SDK التابعة لجهة خارجية بلغة Javascript
توفر لك الخدمة الخارجية التي تعمل معها الرمز المدمج مع البكسل. يحتوي البكسل عادةً على مكونين: حزمة SDK بلغة Javascript ورمز التتبع. يجب إزالة أي رموز 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 -->بعد إزالة HTML من رمز Meta، يتبقى لديك حزمة SDK ورمز لتهيئة بكسل Meta. تمت إزالة رمز تتبع حدث 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 لبكسل Meta البيانات تلقائيًا من بكسل 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');لا تنقل حزمة SDK لبكسل Google البيانات تلقائيًا من بكسل Shopify المخصص. لنقل البيانات، تحتاج إلى الاشتراك في الأحداث.
تتبع أحداث العميل
بعد تحميل حزمة SDK للبكسل وتهيئتها، تحتاج إلى تمرير الأحداث إليها لتتبعها. ويتم ذلك من خلال الاشتراك في الأحداث، ثم تمرير بيانات الحدث إلى حزمة SDK للبكسل لتتم معالجتها بواسطة الخدمة الخارجية.
الاشتراك في الأحداث القياسية
تقدم Shopify مجموعة قياسية من الأحداث، مما يسهل ضمان قيام البكسل الخاص بك بجمع البيانات التي يحتاجها.
يمكنك الاشتراك في الأحداث باستخدام واجهة برمجة التطبيقات لامتداد بكسلات Shopify. ستحتاج إلى وضع رمز البكسل الخارجي مع الحدث الذي تشترك فيه.
هذا مثال على حدث PageView لبكسل Meta. لاحظ أن fbq("track") جزء من رمز Meta، وسيكون لكل شركة إصدار خاص بها ستحتاج إلى الرجوع إلى وثائقها بشأنه.
analytics.subscribe("page_viewed", async (event) => {
fbq('track', 'PageView');
});تحتوي بعض الأحداث على بيانات وصفية يمكنك تمريرها إلى البكسل الخاص بك. إليك مثال على تمرير بعض تفاصيل المنتج إلى حدث ViewContent في Meta:
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.
تكوين إعدادات الموافقة وبيع البيانات
في الأسواق المُعدَّة لطلب الموافقة، مثل المنطقة الاقتصادية الأوروبية (EEA) والمملكة المتحدة، لا يتم تشغيل بكسلات الويب إلا عندما يمنح زوار الموقع الإلكتروني الأذونات المطلوبة في إعدادات البكسل.
حسب الإعداد الافتراضي، تتطلب البكسلات المخصصة الجديدة أذونات التسويق والتحليلات. يمكنك تخصيص الأذونات المطلوبة في قسم خصوصية العميل > الإذن ضمن تفاصيل البكسل المخصص.
وبالمثل، لن يتم تشغيل البكسلات المُعدّة كبيع للبيانات للعملاء الذين اختاروا إلغاء الاشتراك في بيع البيانات أو مشاركتها، ما لم يكن البكسل يدعم استخدام البيانات المحدود. حسب الإعداد الافتراضي، تُصنّف البكسلات المخصصة الجديدة على أنها بيع للبيانات. يمكنك تخصيص ما إذا كانت البيانات المجمّعة تُصنّف كبيع للبيانات في قسم خصوصية العميل > بيع البيانات ضمن تفاصيل البكسل المخصص.
يمكن لمطوري البكسلات المخصصة التعرف على المزيد حول جمع الموافقة وتسجيلها.
قد يكون لكل بكسل اسم مختلف لكل غرض. يجب عليك الرجوع إلى وثائق البكسل الخاصة بالطرف الخارجي لفهم كيف تتوافق مع تعريفات Shopify.
على سبيل المثال، يوضح ما يلي كيفية توافق أغراض التسويق والتحليلات مع وضع الموافقة (Consent Mode) من 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,
});
});