CAPI من جانب الخادم وتتبع الأحداث

تجاوز موانع الإعلانات وقيود ITP بتوجيه زيارات MousePlayer عبر حاوية GTM خاصة بالطرف الأول من جانب الخادم، وتتبع تحليلات التجارة المتعمقة.

1. نظرة على أوضاع التتبع

يقدم MousePlayer V2 موجّه أحداث قويًا للتحكم بتدفق البيانات من متصفح المستخدم لخوادمنا. ثلاثة أوضاع:

  • الويب فقط (افتراضي): يبث كل البيانات بـ WebSockets مباشرة إلى MousePlayer. الأفضل للعرض المباشر لكن قد تحجبه موانع إعلانات قوية.
  • الوضع الهجين: يجمع المزايا: إحداثيات فأرة وتمرير خفيفة بـ WebSockets لعرض سلس، وتغييرات DOM كبيرة وأحداث مخصّصة بدفعات آمنة عبر GTM الخادمي بـ HTTP POST.
  • CAPI خالص: دفعات HTTP POST بنسبة 100%. أقصى خصوصية، دون WebSockets، ومن الطرف الأول بالكامل. ملاحظة: العرض المباشر معطّل في هذا الوضع.

2. إعداد Google Tag Manager (موصى به)

أسهل تطبيق للهجين أو CAPI الخالص قوالب مجتمع GTM الرسمية لدينا. نزّل ملفات .tpl أدناه واستوردها لمساحات GTM.

تنزيل القوالب:

↓ Web GTM: وسم MousePlayer SDK

↓ Server GTM: عميل استقبال MousePlayer

↓ Server GTM: وسم موصل MousePlayer

الخطوة 1: إعداد العميل والوسم الخادميين

استورد في حاوية GTM الخادمية قالب عميل الاستقبال . اضبطه ليستمع لمسار مخصّص (مثل /mp_capi). ثم استورد وسم الموصلواضبط تشغيله عند حدث mouseplayer_batch وانشر الحاوية.

الخطوة 2: إعداد وسم Web GTM

استورد في حاوية Web GTM وسم SDK. اختر «الإعداد والتهيئة» كنوع وسم وأدخل Channel ID، واختر الوضع الهجينوالصق URL نقطة ssGTM (مثل https://metrics.yourdomain.com/mp_capi).

3. تثبيت يدوي (دون GTM)

إن ضمّنت البرنامج ثابتًا، يجب تعريف كائن window.mp_config قبل تحميل مقتطف التتبع.

<!-- MousePlayer Config & SDK --> <script> window.mp_config = { channel: 'YOUR_UNIQUE_ID_HERE', mode: 'hybrid', // 'web_only', 'hybrid', or 'pure_capi' capi_endpoint: 'https://metrics.yourdomain.com/mp_capi' }; window.mp = window.mp || function() { (window.mp.q = window.mp.q || []).push(arguments); }; (function(w, d, s) { var f = d.getElementsByTagName(s)[0], j = d.createElement(s); j.async = true; j.src = 'https://www.mouseplayer.com/mp.js'; f.parentNode.insertBefore(j, f); })(window, document, 'script'); </script>

4. تتبع مسار تحويل التجارة الإلكترونية

تتبع الرحلة كاملة. تسمح أسماء الأحداث القياسية لـ MousePlayer بإنشاء تقارير مسارات التجارة تلقائيًا في المشروع. تتوافق كلها مع CAPI والويب فقط.

1. view_item

شغّل الحدث عند مشاهدة صفحة منتج معين.

mp('event', 'view_item', { item_id: 'SKU_98765', item_name: 'Wireless Noise-Cancelling Headphones', item_category: 'Electronics', price: 299.99 });

2. add_to_cart

شغّل الحدث عند إضافة منتج للسلة.

mp('event', 'add_to_cart', { item_id: 'SKU_98765', item_name: 'Wireless Noise-Cancelling Headphones', price: 299.99, quantity: 1 });

3. begin_checkout

شغّل الحدث عند الانتقال لشاشة إتمام الشراء.

mp('event', 'begin_checkout', { cart_value: 299.99, currency: 'USD', total_items: 1 });

4. purchase

شغّل الحدث عند نجاح الدفع أو تأكيد الطلب.

mp('event', 'purchase', { transaction_id: 'T_1002938', value: 299.99, tax: 24.00, shipping: 0.00, currency: 'USD', coupon_used: 'FREESHIP' });

5. أحداث مخصّصة وتوليد عملاء محتملين

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

توليد عميل محتمل (إرسال نموذج)

شغّل الحدث عند إرسال نموذج اتصال أو طلب عرض سعر بنجاح.

mp('event', 'generate_lead', { form_name: 'B2B Contact Form', industry: 'Software Development', company_size: '50-200' });

تفاعل واجهة مخصّص

افهم التفاعل مع عناصر معقدة كالحاسبات والنوافذ أو تبديل التبويبات.

mp('event', 'calculator_used', { loan_amount: 50000, duration_months: 48, interest_rate: 7.5 });

6. حدود المعلمات وإرشاداتها

أنواع البيانات: يكتشف MousePlayer الأنواع تلقائيًا. أرسل الأرقام كأعداد صحيحة أو عشرية (مثل 150.00، وليس "150.00") لتفعيل التصفية الرقمية المتقدمة (مثل «السعر > 100») في اللوحة.

القاعدة الوصف
طول اسم الحدث 128 حرفًا كحد أقصى. استخدم snake_case لوضوح أفضل (مثل user_signup).
طول مفتاح المعلمة 64 حرفًا كحد أقصى لكل اسم مفتاح (مثل transaction_id).
قيم نصية تُبتر المعلمات النصية عند 255 حرفًا لأفضل أداء لقاعدة البيانات.
خصوصية البيانات يُمنع إرسال بيانات شخصية (PII) كبريد خام أو أسماء حقيقية أو كلمات مرور كمعلمات أحداث.