> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# كيفية استخدام روابط UTM المباشرة إلى صفحة الدفع

> تعرّف على كيفية تشغيل مسارات ما بعد الشراء باستخدام معلمات UTM، بما في ذلك إعداد الروابط المباشرة إلى صفحة الدفع

يدعم Aftersell تشغيل المسارات (funnels) بناءً على معلمات UTM، وهي ميزة اختيارية مخصصة تحديدًا لحالات الاستخدام المتقدمة. يمكنك إعداد مسارك ليتم تفعيله عندما يزور العميل موقعك بسلسلة استعلام UTM محددة.

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

<div id="how-utm-triggers-work">
  ## كيف تعمل مشغّلات UTM
</div>

تتيح لك مشغّلات UTM عرض مسارات ما بعد شراء محددة بناءً على معلمات UTM في عنوان URL. وهذا مفيد في:

* **العروض الخاصة بالحملات** - عرض عروض بيع إضافي (upsell) مختلفة بناءً على الحملة التسويقية
* **الروابط المباشرة إلى صفحة الدفع** - تشغيل المسارات عندما يتجاوز العملاء واجهة المتجر
* **إسناد القنوات** - تخصيص العروض بناءً على مصدر الزيارات (البريد الإلكتروني، وسائل التواصل الاجتماعي، الإعلانات)
* **اختبار A/B** - اختبار عروض مختلفة لتنويعات مختلفة من الحملات

<div id="quick-start-basic-utm-trigger-setup">
  ## البدء السريع: الإعداد الأساسي لمشغّل UTM
</div>

بالنسبة لزيارات واجهة المتجر القياسية (وليس المباشرة إلى صفحة الدفع)، يمكنك إعداد مشغّلات UTM باستخدام app embed الخاص بـ Aftersell. لمعرفة كيفية البدء بسرعة مع مشغّلات UTM، شاهد هذا الفيديو:

<iframe src="https://go.screenpal.com/player/cOfD38nOD9i" title="How to set up UTM Triggers" allowFullScreen style={{ width: '100%', aspectRatio: '16/9', borderRadius: '12px' }} />

<div id="enable-the-utm-app-embed">
  ### تفعيل UTM app embed
</div>

لتتبع معلمات UTM على صفحات واجهة المتجر:

1. في لوحة تحكم Shopify، انتقل إلى **Online Store > Themes**
2. انقر على **Customize** في قالبك النشط
3. في محرر القالب، انقر على أيقونة **App embeds** (قطعة الأحجية) في الشريط الجانبي الأيسر
4. ابحث عن **Aftersell UTM Tracker** وقم بتفعيله **on**
5. انقر على **Save**

بمجرد التفعيل، سيلتقط Aftersell تلقائيًا معلمات UTM عندما يزور العملاء واجهة متجرك عبر روابط UTM.

<div id="configure-utm-triggers-in-your-funnel">
  ### إعداد مشغّلات UTM في مسارك
</div>

بعد تفعيل app embed:

1. انتقل إلى **Post-purchase Funnels** في لوحة تحكم Aftersell
2. أنشئ مسارًا أو عدّل مسارًا موجودًا
3. في قسم **Triggers**، أضف مشغّل **UTM Parameter**
4. حدّد معلمة UTM والقيمة التي تريد مطابقتها
5. احفظ مسارك

<div id="supported-utm-parameters">
  ## معلمات UTM المدعومة
</div>

يدعم Aftersell معلمات UTM القياسية التالية:

* `utm_source` - يحدد مصدر الزيارات (مثل google أو newsletter أو facebook)
* `utm_medium` - يحدد الوسيلة التسويقية (مثل email أو cpc أو social)
* `utm_campaign` - يحدد الحملة المعينة (مثل spring\_sale أو product\_launch)
* `utm_term` - يحدد كلمات البحث المدفوعة (مثل running+shoes)
* `utm_content` - يميّز المحتوى أو الروابط المتشابهة (مثل banner\_ad أو text\_link)
* `utm_id` - يحدد معرّف الحملة (مثل campaign\_123)

يتم تتبع جميع المعلمات الست ويمكن استخدامها لتشغيل المسارات.

<div id="partial-field-matching">
  ## المطابقة الجزئية للحقول
</div>

عند إعداد مشغّلات UTM، يدعم Aftersell **المطابقة الجزئية** لقيم معلمات UTM. وهذا يعني:

* ✅ **قيمة المشغّل:** `spring` ← **تطابق:** `spring_sale` و`spring_2026` و`early_spring`
* ✅ **قيمة المشغّل:** `email` ← **تطابق:** `email_newsletter` و`promotional_email`
* ✅ **قيمة المشغّل:** `sale` ← **تطابق:** `spring_sale` و`flash_sale` و`sale_2026`

تتيح لك هذه المرونة إنشاء مشغّلات أوسع تطابق تنويعات متعددة من الحملات دون إنشاء مشغّلات منفصلة لكل واحدة منها.

**مثال:** إذا حددت مشغّلًا بحيث تحتوي `utm_campaign` على `sale`، فسيطابق أي حملة تحمل كلمة "sale" في اسمها، مثل `spring_sale` أو `summer_sale` أو `flash_sale_2026`.

<div id="direct-to-checkout-utm-links">
  ## روابط UTM المباشرة إلى صفحة الدفع
</div>

الإعداد الأساسي الموضح في الفيديو أعلاه **لا** يدعم الروابط التي ترسل العملاء **مباشرة إلى صفحة الدفع**. بشكل افتراضي، لا يمكن لـ Aftersell اكتشاف معلمات UTM إلا على صفحات واجهة المتجر. ويرجع ذلك إلى اعتماده على theme app embed، الذي يعمل فقط على صفحات واجهة المتجر وليس على صفحة الدفع أو صفحة الشكر.

<div id="enable-utm-tracking-on-checkout-pages">
  ### تفعيل تتبع UTM على صفحات الدفع
</div>

لتتبع معلمات UTM على صفحة الدفع (للروابط المباشرة إلى صفحة الدفع)، تحتاج إلى **إضافة Shopify Pixel** إلى متجرك.

⚠️ **قيود مهمة:**

* يتطلب هذا الإعداد أن يكون لدى الزائر **رمز سلة (cart token)** عند وصوله إلى صفحة الدفع عبر رابط UTM. بدون رمز السلة، لن يتم التقاط بيانات UTM.
* **طرق الدفع السريع (Shop Pay وApple Pay وGoogle Pay) غير مدعومة** لأنها تتجاوز السلة ولا تُنشئ رمز سلة. العملاء الذين يستخدمون الدفع السريع لن يشغّلوا المسارات المعتمدة على UTM.

<div id="setting-up-the-shopify-pixel">
  ### إعداد بكسل Shopify
</div>

اتبع هذه التعليمات خطوة بخطوة لإعداد تتبع UTM المباشر إلى صفحة الدفع:

1. في لوحة تحكم Shopify، انتقل إلى **Settings > Customer Events**.
2. انقر على **Add Custom Pixel** وأعطه أي اسم تريده.
3. ضمن القائمة المنسدلة **Permission**، اختر **Analytics**. هذا هو الإذن الوحيد المطلوب.
4. بالنسبة للقائمة المنسدلة **Data Sale**، يمكنك اختيار **Data collected does not qualify as data sale**. يحافظ Aftersell على خصوصية جميع البيانات التي يتم جمعها ولا يشاركها أبدًا مع أي جهة أخرى غيرك.
5. في محرر الأكواد الذي يظهر، الصق الكود المتوفر أدناه.
6. انقر على **Save**، ثم **Connect**.

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
/**  
 * IMPORTANT: This pixel can only fire on sessions where the  
 * customer has a cart object, otherwise it will be skipped.  
 * For example, clicking "Buy Now" on a product page skips the cart,  
 * going directly to checkout.  
**/  
function processData({event, cartToken}) {  
  // TODO: Edit MYSHOPIFY_DOMAIN to your domain. E.g.  
  // const MYSHOPIFY_DOMAIN = 'example-store.myshopify.com';  
  const MYSHOPIFY_DOMAIN = '';  
  
  const enableDebug = false;  
  
  // DO NOT EDIT PAST HERE  
  const SESSION_STORAGE_KEY = 'as-customer-trigger-data';  
  const HOST = 'https://start.aftersell.app';  
  
  if (!MYSHOPIFY_DOMAIN) {  
    if (enableDebug) {  
      console.log("UTM pixel didn't fire because of missing Shopify domain");  
    }  
    return;  
  }  
  if (!cartToken) {  
    if (enableDebug) {  
      console.log("UTM pixel didn't fire because of missing cart token");  
    }  
  }  
    
  let existingCustomerData = null;  
  try {  
      existingCustomerData = JSON.parse(  
          sessionStorage.getItem(SESSION_STORAGE_KEY) || 'null'  
      );  
  } catch (ignore) {  
    if (enableDebug) {  
      console.log("UTM pixel didn't fire because malformed user data json");  
    }  
  }  
    
  const allowedUrlParams = [  
        'utm_source',  
        'utm_medium',  
        'utm_campaign',  
        'utm_term',  
        'utm_id',  
        'utm_content',  
    ];  
    
  const searchParams = new URLSearchParams(event.context.window.location.search);  
  let hasCustomerData = false;  
  const customerData = {};  
  for (const param of allowedUrlParams) {  
    const paramValue = searchParams.get(param) || existingCustomerData?.[param];  
    if (paramValue) {  
        hasCustomerData = true;  
        customerData[param] = paramValue;  
    }  
  }  
  
  if (hasCustomerData) {  
    sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(customerData));  
  
    const postBody = {  
      shop: MYSHOPIFY_DOMAIN,  
      cartToken,  
      checkoutToken: event.data.checkout.token ?? undefined,  
      customerTriggerData: customerData,  
    };  
  
    if (enableDebug) {  
      console.log("UTM pixel fired with the following data:", postBody);  
    }  
      
    fetch(`\${HOST}/api/v1/storefrontSessions`, {  
        method: 'POST',  
        headers: {  
            'Content-Type': 'application/json',  
        },  
        body: JSON.stringify(postBody),  
    });  
  } else {  
    if (enableDebug) {  
      console.log("UTM pixel didn't fire because there was no data to send");  
    }  
  }  
}  
  
analytics.subscribe('checkout_started', (event) => {  
   // minimum realistic time between adding item to cart and clicking checkout  
    const COOKIE_POLLING_INTERVAL_MS = 500;  
  
    let currentCookieValue = getCookieValue({ cookie: document.cookie, cookieName: 'cart' });  
    processData({event, cartToken: currentCookieValue});  
  
    setInterval(() => {  
        const newCookieValue = getCookieValue({ cookie: document.cookie, cookieName: 'cart' });  
        if (newCookieValue !== currentCookieValue) {  
            currentCookieValue = newCookieValue;  
            processData({event, cartToken: newCookieValue});  
        }  
    }, COOKIE_POLLING_INTERVAL_MS);  
});  
  
function getCookieValue({ cookie, cookieName }) {  
    const cartCookieRegex = new RegExp(`^\${cookieName}=`);  
    const cartCookie = cookie  
        .split(';')  
        .map((val) => val.trim())  
        .find((val) => cartCookieRegex.test(val));  
    if (!cartCookie) return null;  
    const cartCookieValue = cartCookie.replace(`\${cookieName}=`, '');  
    return cartCookieValue;  
}
```

**ملاحظات مهمة حول الإعداد:**

* **عدّل `MYSHOPIFY_DOMAIN`:** يجب استبدال السلسلة الفارغة بنطاق myshopify.com الخاص بمتجرك (مثل `'example-store.myshopify.com'`)
* **تفعيل وضع التصحيح (اختياري):** عيّن `enableDebug = true` لعرض سجلات وحدة التحكم لاستكشاف الأخطاء وإصلاحها
* **المعلمات المدعومة:** يتتبع البكسل جميع معلمات UTM القياسية الست المدرجة في المصفوفة `allowedUrlParams`

<div id="testing-your-utm-trigger-setup">
  ## اختبار إعداد مشغّل UTM الخاص بك
</div>

بعد إعداد مشغّلات UTM، استخدم قائمة التحقق هذه للتأكد من أن كل شيء يعمل بشكل صحيح:

<div id="for-storefront-utm-tracking-app-embed">
  ### لتتبع UTM على واجهة المتجر (app embed)
</div>

* ✅ **تفعيل app embed:** تحقق من تفعيل Aftersell UTM Tracker app embed في إعدادات قالبك
* ✅ **عنوان URL للاختبار:** قم بزيارة متجرك بمعلمة UTM (مثل `yourstore.com?utm_campaign=test`)
* ✅ **إكمال عملية شراء:** أضف منتجًا إلى السلة وأكمل عملية الدفع
* ✅ **التحقق من المسار:** تأكد من ظهور المسار الصحيح في صفحة الشكر
* ✅ **متصفح الطلبات:** تحقق من Aftersell Order Browser للتأكد من اكتشاف مشغّل UTM

<div id="for-direct-to-checkout-utm-tracking-shopify-pixel">
  ### لتتبع UTM المباشر إلى صفحة الدفع (بكسل Shopify)
</div>

* ✅ **تثبيت البكسل:** تحقق من حفظ البكسل المخصص وتوصيله في Settings > Customer Events
* ✅ **إعداد النطاق:** تأكد من تعيين `MYSHOPIFY_DOMAIN` بشكل صحيح في كود البكسل
* ✅ **وجود رمز السلة:** تأكد من أن العميل لديه منتجات في السلة قبل الانتقال إلى صفحة الدفع (مطلوب للتتبع)
* ✅ **عنوان URL للاختبار:** استخدم رابطًا مباشرًا إلى صفحة الدفع بمعلمات UTM (مثل `yourstore.com/checkout?utm_campaign=test`)
* ✅ **إكمال عملية شراء:** أكمل عملية الدفع
* ✅ **التحقق من المسار:** تأكد من ظهور المسار الصحيح في صفحة الشكر
* ✅ **متصفح الطلبات:** تحقق من Aftersell Order Browser للتأكد من اكتشاف مشغّل UTM
* ⚠️ **الدفع السريع:** تذكّر أن Shop Pay وApple Pay وGoogle Pay لن تعمل مع مشغّلات UTM

<div id="troubleshooting-tips">
  ### نصائح استكشاف الأخطاء وإصلاحها
</div>

إذا لم تكن مشغّلات UTM تعمل:

1. **فعّل وضع التصحيح:** عيّن `enableDebug = true` في كود البكسل وتحقق من وحدة تحكم المتصفح بحثًا عن رسائل الخطأ
2. **تحقق من رمز السلة:** تأكد من أن العملاء لديهم منتجات في السلة قبل الوصول إلى صفحة الدفع (يتطلب البكسل رمز سلة)
3. **تحقق من إعداد المشغّل:** تأكد من أن معلمة UTM والقيمة في مشغّل مسارك تطابقان معلمات عنوان URL
4. **اختبر المطابقة الجزئية:** تذكّر أن المشغّلات تستخدم المطابقة الجزئية - `sale` ستطابق `spring_sale` و`flash_sale` وما إلى ذلك
5. **تحقق من أولوية المسار:** إذا تطابقت عدة مسارات، فسيظهر فقط المسار ذو الأولوية الأعلى
6. **راجع متصفح الطلبات:** استخدم Aftersell Order Browser لمعرفة المشغّلات التي تم تفعيلها لكل طلب

<div id="best-practices-for-utm-triggers">
  ## أفضل الممارسات لمشغّلات UTM
</div>

* **استخدم تسمية متسقة:** ضع اصطلاح تسمية لمعلمات UTM الخاصة بك (مثل `utm_campaign=email_spring_2026`)
* **استفد من المطابقة الجزئية:** استخدم قيم مشغّل أوسع لمطابقة تنويعات متعددة من الحملات
* **اختبر قبل الإطلاق:** اختبر دائمًا روابط UTM ومشغّلاتك قبل إرسالها إلى العملاء
* **وثّق حملاتك:** احتفظ بسجل لمعلمات UTM التي تستخدمها لكل حملة
* **ادمجها مع مشغّلات أخرى:** استخدم مشغّلات UTM إلى جانب مشغّلات المنتج أو قيمة الطلب لاستهداف أكثر دقة
* **راقب الأداء:** تحقق بانتظام من Order Browser لمعرفة حملات UTM التي تحقق أكبر عدد من عمليات البيع الإضافي