Back to docs

Links

نبضة التحويل على Shopify

ثبّت نبضة التحويل من Styrar على Shopify باستخدام نبضة مخصصة (Custom Pixel).

ClaudeChatGPTCursor

لا تدعم Shopify بعد الآن لصق وسم <script> خام في صفحة الدفع — يتم التتبع من طرف ثالث عبر النبضات المخصصة (Custom Pixels)، وهي بيئة محصورة (sandbox) مبنية على واجهة Customer Events API الخاصة بـ Shopify. يوضّح هذا الدليل كيفية ربط نبضة التحويل من Styrar بنبضة مخصصة.

لا توفّر البيئة المحصورة وصولًا مباشرًا إلى DOM، فبدلًا من تضمين وسم سكريبت Styrar، تستدعي نقطة نهاية التتبع مباشرة عبر fetch كل مرة يحدث فيها حدث عميل في Shopify.

قريبًا: إعداد تلقائي مع تطبيق Shopify من Styrar

عندما يتوفر تطبيق Shopify من Styrar ويُثبَّت على متجرك (ويرتبط بحسابك في Styrar)، ستضع Styrar نبضة التحويل نيابةً عنك ضمن الإعدادات → أحداث العملاء. لن تحتاج إلى لصق كود Custom Pixel أو السماح يدويًا لـ api.styrar.com.

حتى ذلك الحين، اتبع خطوات Custom Pixel أدناه.

الإعداد

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

  2. سمّها (مثل "تحويلات Styrar") وأضف كودًا مثل هذا:

    JavaScript
    analytics.subscribe('checkout_completed', (event) => {
  const url = new URL(window.location.href);
  const clickToken = url.searchParams.get('styrar_ck') ||
    (typeof localStorage !== 'undefined' && localStorage.getItem('styrar_ck'));
  if (!clickToken) return;

  fetch('https://api.styrar.com/v1/pixel/track', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      clickToken,
      eventName: 'purchase',
      value: event.data.checkout.totalPrice.amount,
      eventData: { currency: event.data.checkout.totalPrice.currencyCode },
    }),
    keepalive: true,
  });
});

    اشترك في أي حدث يطابق التحويل الذي تهتم به — checkout_completed، payment_info_submitted، product_added_to_cart، وأحداث أخرى متوفرة جميعها.

  3. اسمح بالوصول إلى الشبكة. تحظر Shopify الطلبات الصادرة من النبضات المخصصة بشكل افتراضي. في إعدادات تلك النبضة نفسها، أضف api.styrar.com تحت الصلاحيات ← الاتصال بخوادم طرف ثالث، وإلا سيفشل الطلب أعلاه بصمت.

  4. اضبط النبضة على نشِطة (Active).

ملاحظة بخصوص رمز النقرة

لا يمكن لبيئة Shopify المحصورة قراءة localStorage بالطريقة التي تقرأ بها صفحة عادية، لذا يجب أن يبقى styrar_ck موجودًا في العنوان (أو يُحمَل كخاصية سلة) بحلول وقت حدوث حدثك. إذا كان مسار الدفع لديك يزيل معامل الاستعلام قبل checkout_completed، اقبض الرمز في وقت أبكر — عند page_viewed — واحفظه كخاصية سلة لتقرأه مرة أخرى لاحقًا.

لا يزال هذا يستخدم نفس نقطة نهاية POST /v1/pixel/track العامة وغير المصادَق عليها كما في كل منصة أخرى.

ذو صلة