الإعدادات المتقدمة

نصائح حول عمليات التنفيذ البديلة واستخدام البيكسل من خلال تطبيقات الويب بصفحة واحدة وتتبع عمليات التحويل من خلال النقرات على الأزرار وتمرير الصفحة.

اللائحة العامة لحماية البيانات

إذا كنت تدير نشاطًا تجاريًا في بلدان تخضع لللائحة العامة لحماية البيانات (GDPR)، فيرجى الرجوع إلى مستند اللائحة العامة لحماية البيانات لمعرفة الطريقة التي تتبعها لتصبح ممتثلاً لهذه اللوائح.

تثبيت البيكسل باستخدام إشارة IMG

إذا كنت بحاجة إلى تثبيت البيكسل باستخدام عملية تنفيذ سهلة، فيمكنك تثبيته باستخدام إشارة <img>. ولإجراء ذلك، أضف الرمز البرمجي أدناه بين إشارة الفتح والإغلاق <noscript> ضمن عنوان موقع الويب أو نصه الأساسي واستبدل {pixel-id} بمعرف البيكسل المتوفر لديك، واستبدل كذلك {standard-event}بحدث قياسي.

<img src="https://www.facebook.com/tr?id=&#123;pixel-id&#125;&amp;ev=&#123;standard-event&#125;" height="1" width="1" style="display:none"/>

كما تدعم وحدات البيكسل المثبّتة باستخدام إشارة <img>المعلمات، التي يمكنك تضمينها في سلسلة الاستعلام لديك. على سبيل المثال:

<img src="https://www.facebook.com/tr?id=12345
  &amp;ev=ViewContent
  &amp;cd[content_name]=ABC%20Leather%20Sandal
  &amp;cd[content_category]=Shoes
  &amp;cd[content_type]=product
  &amp;cd[content_ids]=1234
  &amp;cd[value]=0.50
  &amp;cd[currency]=USD" height="1" width="1" style="display:none"/>

التقييدات

• يتعذر التشغيل مرات متعددة عند كل تحميل للصفحة
• يتعذر تتبع الأحداث القياسية أو المخصصة التي يتم تشغيلها من خلال تفاعلات واجهة المستخدم (مثل، النقر على زر)
• يخضع إلى تقييدات HTTP GET عند إرسال بيانات مخصصة أو عناوين URL طويلة
• يتعذر التحميل بشكل غير متزامن

مثال على تثبيت إشارة IMG

يتوفر أدناه مثال على تثبيت إشارة IMG لبيكسل Meta عبر الصفحات الأساسية لموقع ويب وهمي باستخدام معرف بيكسل زائف (12345) ومعلمات مخصصة (مثل، cd[currency]=USD).

في صفحة المنتج، يتوفر بيكسل لتتبع حدث PageView وبيكسل آخر لتتبع حدث ViewContent:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=ViewContent"/> 

في صفحة الإضافة إلى عربة التسوق، يتوفر بيكسل لتتبع حدث PageView وبيكسل آخر لتتبع حدث AddToCard مع بيانات مخصصة:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=AddToCart&cd[currency]=USD&cd[value]=0.00"/> 

في صفحة الشراء، يتوفر بيكسل واحد لتتبع حدث PageView وبيكسل آخر لتتبع حدث Purchase مع بيانات حول عملية الشراء:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=Purchase&cd[currency]=USD&cd[value]=0.00"/> 

بيكسل IMG لقياس الأحداث المُجمعة في نظام iOS 14.5 والإصدارات الأحدث

قياس الأحداث المجمعة في Meta هو بروتوكول يتيح قياس أحداث التطبيق والويب من جانب الأشخاص الذين يستخدمون الأجهزة بنظام التشغيل iOS 14.5 أو الإصدارات الأحدث. يمكن استخدام النماذج الإحصائية وهي مصممة لتوفير عرض مكتمل أكثر للنتائج عندما تكون البيانات مفقودة أو ناقصة.

نوصي بشدة باتباع قسم تثبيت البيكسل باستخدام إشارة IMG الموجود ضمن هذا المستند عند استخدام إشارة IMG للبيكسل أو التوقف عن استخدامها واتباع دليل التنفيذ الذي نوفره بدلاً من ذلك.

بيانات بيكسل IMG المفقودة

لغة JavaScript لوقت التشغيل

إذا كنت تحاول إعداد بيكسل IMG باستخدام Javascript لوقت التشغيل من أجل إنشاء فئة صورة بلغة JavaScript دون إلحاق فئة الصور هذه بشجرة نموذج DOM لموقع الويب، على سبيل المثال، عند استخدام مكتبات لغة JavaScript تابعة لجهة خارجية من أجل إرسال بيكسل IMG لديك، يجب إضافة الرمز التالي وإلا، فلن يتلقى Meta بيانات بيكسل IMG التي ترسلها.

var nativeBridge = window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.receiveImgPixel;
if (nativeBridge) {
    const postObj = {
        id: {pixel-id},
        ev: {standard-event},
        cd: {stringified-custom-data},
        dpo: {data-processing-options},          // Optional CCPA param
        dpoco: {data-processing-option-country}, // Optional CCPA param
        dpost: {data-processing-option-state},   // Optional CCPA param
    };
    nativeBridge.postMessage(JSON.stringify(postObj));
}

سمة النسخة التجريبية

إذا كنت تضع علامة IMG للبيكسل ضمن إطار iframe الذي يحتوي على السمة sandbox، فيجب إضافة القيمة allow-scripts وإلا، فلن يتلقى فيسبوك بيانات بيكسل IMG التي ترسلها.

تمكين قياس الأحداث المُجمعة لسيناريوهات إعادة التوجيه التلقائي

تم توسيع نطاق وظائف قياس الأحداث المُجمعة لتشمل التحويلات من كل صفحات الويب المرتبطة بالمعلن، حيث يتم طرح أحداث بيكسل المحسنة للمعلن (كما في السيناريوهات المحددة حيث يعتمد المعلنون على اختصارات عنوان URL أو عمليات إعادة التوجيه القائمة على الموقع الجغرافي أو قد يكون لديهم خطوط أنشطة تجارية متعددة أو قد يعتمدون على الوكالات لتشغيل إعلاناتهم). إذا واجهت أحد هذه السيناريوهات وكنت تريد تمكين قياس الأحداث المُجمعة، فإننا نوصيك بالقيام بما يلي:

• استخدام بيكسل Meta ذاته (أي، معرف البيكسل ذاته وزوج اسم حدث البيكسل) عبر النطاقات ذات الصلة التي تريد الحصول على التحويلات من جانبها
• التأكد من أن تحديد أولويات أحداث قياس الأحداث المُجمعة التي ترغب في الحصول على تحويلات منها عبر هذه النطاقات

تتبع النقرات على الأزرار

عندما يضغط الزائر على زر، يقوم رمز لغة JavaScript المُستخدَم في بيكسل Meta تلقائيًا باكتشاف حقول النموذج الملائمة وإرسالها إلى فيسبوك.

لنفترض أن لديك موقع ويب للتجارة الإلكترونية وأن الزر "إضافة إلى عربة التسوق" لا ينتقل إلى صفحة جديدة. ربما تحتاج إلى تنشيط حدث عند النقر على الزر.

في هذا المثال، سنقوم بتنشيط حدث ViewContent قياسي عند تحميل الصفحة. عندما ينقر الشخص على الزر "إضافة إلى عربة التسوق"، سنقوم بتنشيط حدث AddToCart قياسي.

للقيام بذلك، عليك أولاً تحميل رمز بيكسل Meta الذي تريد تشغيله عند تحميل الصفحة:

<!-- Facebook Pixel Code --> <script> fbq('track', 'ViewContent', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 0.50, currency: 'USD' }); </script> <!-- End Facebook Pixel Code --> 

بعد ذلك يمكنك تشغيل AddToCart إما عند تحميل صفحة جديدة أو عند النقر على الزر "إضافة إلى عربة التسوق". توجد عدة طرق لمعالجة النقرات على الأزرار. فيما يلي مثال على إضافة eventListener إلى زر.

<!-- Somewhere there is a button that performs Add to Cart --> <button id="addToCartButton">Add To Cart</button> <!-- Add Pixel Events to the button's click handler --> <script type="text/javascript"> var button = document.getElementById('addToCartButton'); button.addEventListener( 'click', function() { fbq('track', 'AddToCart', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 4.99, currency: 'USD' }); }, false ); </script> 

تتوفر العديد من الطرق التي يمكنك من خلالها معالجة أحداث النقر؛ ما عليك سوى التأكد من استدعاء الوظيفة fbq دائمًا بعد النقر.

وفقًا لطريقة تنفيذ البيكسل من جانبك، قد تعرض أداة مساعدة البيكسل خطأ قبل النقر على الزر. ويمكنك التحقق من أن البيكسل يعمل بشكل صحيح من خلال النقر على الزر مما سيؤدي إلى تجاهل الخطأ الذي تعرضه أداة المساعدة.

تشغيل الأحداث استنادًا إلى الظهور

على سبيل المثال، افترض أن لديك مدونة وتريد تتبع المستخدمين الذين يقرأون محتوى المقالة كله. ليس هناك إجراء يتخذه المستخدم سوى التمرير حتى نهاية الصفحة.

إليك عينة بلغة HTML لصفحة يتم تحميل بيكسل بها:

<!DOCTYPE html> <html> <head> <!-- Facebook 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', '<FB_PIXEL_ID>'); fbq('track', "PageView"); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=<FB_PIXEL_ID>&ev=PageView&noscript=1" /></noscript> <!-- End Facebook Pixel Code --> </head> <body> <h1>Scroll Page until the Lead event is fired</h1> <div style="height: 120vh; width: 100vw; background-color: #00f;"></div> <h1 id="fb-fire-pixel">Lead event will fire when this phrase enters the screen</h1> <div style="height: 120vh; width: 100vw; background-color: #000;"></div> </body> </html> 

عندما يظهر العنصر h1 الذي يتضمن المعرف id=fb-fire-pixel، من المفترض أن يتم تشغيل الحدث القياسي Lead. للتحقق من ظهور العنصر على الشاشة، نضيف الرمز التالي إلى الصفحة:

// This code should be loaded together with Meta Pixel

var executeWhenElementIsVisible = function(dom_element, callback) {

  if (!(dom_element instanceof HTMLElement)) {
    console.error('dom_element must be a valid HTMLElement');
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function isOnViewport(elem) {
    var rect = elem.getBoundingClientRect();
    var docElem = document.documentElement;
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || docElem.clientHeight) &&
      rect.right <= (window.innerWidth || docElem.clientWidth)
    );
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && isOnViewport(dom_element)) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  window.addEventListener('scroll', executeCallback, false);
};

بعد ذلك، نحتاج إلى تحديد كيفية تشغيل البيكسل عندما يظهر العنصر على الشاشة:

// Get the element that should be visible to trigger the pixel fire
var element = document.getElementById('fb-fire-pixel');

// Then, set the event to be tracked when element is visible
// Note that second parameter is a function, not a function call
executeWhenElementIsVisible(element, function() {
  fbq('track', 'Lead');
});

تشغيل الأحداث بناءً على طول الصفحة أو النسبة المئوية

على سبيل المثال، افترض أنك تريد تتبع المستخدمين الذين قرأوا حتى طول معين من الصفحة أو نسبة مئوية منها. ليس هناك إجراء يتخذه المستخدم سوى التمرير حتى الطول المطلوب أو النسبة المئوية المطلوبة من الصفحة.

يتوفر هذا المثال الأول لتتبع طول الصفحة التي قرأها المستخدم. في المثال، يتم تشغيل بيكسل العميل المحتمل عندما يقرأ المستخدم ما يصل إلى 500 بيكسل بطول الصفحة.

var executeWhenReachedPageLength = function(length, callback) {
  if (typeof length !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof length,
      'instead',
    );
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }

  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getCurrentScrolledLengthPosition() > length) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  if (getWindowLength() >= length) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};

executeWhenReachedPageLength(10, function() {
  fbq('track', 'Lead');
});

يتوفر هذا المثال الثاني لتتبع النسبة المئوية من الصفحة التي قرأها المستخدم. في المثال، يتم تشغيل بيكسل العميل المحتمل عندما يقرأ المستخدم 75% من الصفحة.

var executeWhenReachedPagePercentage = function(percentage, callback) {
  if (typeof percentage !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof percentage,
      'instead',
    );
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function getDocumentLength() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    )
  }

  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }

  function getScrollableLength() {
    if (getDocumentLength() > getWindowLength()) {
      return getDocumentLength() - getWindowLength();
    } else {
      return 0;
    }
  }

  var scrollableLength = getScrollableLength();

  window.addEventListener("resize", function(){
    scrollableLength = getScrollableLength();
  }, false)

  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }

  function getPercentageScrolled() {
    if (scrollableLength == 0) {
      return 100;
    } else {
      return getCurrentScrolledLengthPosition() / scrollableLength * 100;
    }
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getPercentageScrolled() > percentage) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  if (getDocumentLength() == 0 ||
    (getWindowLength()/getDocumentLength() * 100 >= percentage)) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};

executeWhenReachedPagePercentage(75, function() {
  fbq('track', 'Lead');
});

عمليات تشغيل البيكسل المتأخرة

على افتراض أنك تريد تتبع المستخدمين الذين يتفاعلون مع موقع الويب لديك لبضع ثوانٍ قبل من تشغيل حدث البيكسل. يمكنك فعل هذا من خلال الوظيفة setTimeout.

// Delay pixel fire by 3 seconds
var seconds = 3;
setTimeout(function() {
  fbq('track', 'Lead');
}, seconds * 1000);

يمكن استخدامها في تتبع الزيارات التي حدث بها "تفاعل" في الصفحة، حيث لا يتنقل الأشخاص بسرعة بل يقرأون المحتوى بالفعل.

تشغيل الأحداث استنادًا إلى المقالات التي تم عرضها بكل جلسة

إذا كنت تريد معرفة من اطلع على عدد معين من المقالات من موقعك، فيمكنك استخدام عداد الجلسة وتحميل رمز بيكسل فيسبوك عند حدوث ذلك.

ندرك أن الجلسة تمثل مجموعة من تفاعلات المستخدمين على موقع الويب والتي يمكن أن تحدث خلال إطار زمني معين حسب طلب الموقع. ويمكنك زيادة عدد مشاهدات الصفحة إذا اكتشفت أن أنشطة المستخدمين تحدث في إطار زمني معين.

على افتراض أن لديك المتغير sessionCountViews لكل site_request، يمكنك إضافة رمز بيكسل Meta استنادًا إلى عدد مشاهدات الصفحة الذي سجلته.

مثال يحسب المقالة السادسة فقط التي تم عرضها

if (site_request.sessionCountViews == 6) {
  fbq('track', "ViewContent", {
    sessionCountViews: site_request.sessionCountViews,
  });
}

تتبع الأحداث الانتقائي من خلال وحدات بيكسل متعددة

إذا كان لديك وحدات بيكسل متعددة في الصفحة نفسها وترغب في تشغيل الأحداث انتقائيًا في كل بيكسل فريد، فيجب استخدام إمكانات trackSingle وtrackSingleCustom.

قد يؤدي استخدام الوظيفة track في الصفحات التي تم تشغيل وحدات بيكسل متعددة بها (إما باستخدام رموز أساسية متعددة أو حتى دمجها في رمز واحد) إلى التشغيل الزائد أو إلى سلوك غير متوقع، ويجب تطبيقه فقط في مواقف معيّنة.

مثال حيث يتم تشغيل حدث PageView في وحدات البيكسل التي تمت تهيئتها وكذلك التشغيل الانتقائي لحدث قياسي (Purchase) في بيكسل واحد وحدث مخصص في بيكسل ثانٍ.

fbq('init', '<PIXEL_A>');
fbq('init', '<PIXEL_B>');
fbq('track', 'PageView'); //fire PageView for both initialized pixels

// only fire the Purchase event for Pixel A
fbq('trackSingle', '<PIXEL_A>', 'Purchase', {
      value: 4,
      currency: 'GBP',
});

// only fire the custom event Step4 for Pixel B
fbq('trackSingleCustom', '<PIXEL_B>', 'Step4',{
  //optional parameters
});

تتبع أحداث وحدات البيكسل الفردية

في حالات غير معتادة، قد ترغب في إرسال أحداث إلى إحدى وحدات البيكسل المثبّتة على موقع الويب لديك، على سبيل المثال، لتقييد البيانات المرسلة إلى إحدى وحدات البيكسل المثبّتة على موقع الويب لديك. تعمل هذه الطرق على تتبع عمليات تشغيل البيكسل لبيكسل واحد. ويتم استدعاؤها باستخدام ما يلي:

fbq('trackSingle', 'FB_PIXEL_ID', 'Purchase', customData);
fbq('trackSingleCustom', 'FB_PIXEL_ID', 'CustomEvent', customData);

التكوين التلقائي

سيقوم بيكسل Meta بإرسال البيانات التعريفية لنقر الأزرار والصفحات (على سبيل المثال، البيانات المهيكلة وفقًا لبروتوكول Opengraph أو تنسيقات Schema.org) من موقع الويب لديك لتحسين عرض الإعلانات وقياسها وتنفيذ إعداد البيكسل تلقائيًا. ولتكوين بيكسل Meta بحيث لا يرسل هذه المعلومات الإضافية في الرمز الأساسي لبيكسل Meta، أضف fbq('set', 'autoConfig', 'false', 'FB_PIXEL_ID') أعلى الاستدعاء الأولي.

<!-- Facebook 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'); 
// Line to enable Manual Only mode.
fbq('set', 'autoConfig', false, 'FB_PIXEL_ID'); 
//Insert Your Facebook Pixel ID below. 
fbq('init', 'FB_PIXEL_ID'); 
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=PageView&amp;noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

سياسة أمان المحتوى

إذا تضمن موقعك على الويب سياسة أمان محتوى، فيجب أن تسمح بتحميل JavaScript من https://connect.facebook.net. ملاحظة: يمكن للبيكسل تحميل البرامج النصية من مسارين: المسار /en_US/fbevents.js والمسار /signals/config/{pixelID}?v={version}.