> ## 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.

# تكوين وحدات بكسل الويب في Shopify

> إعداد تتبع التحويلات باستخدام وحدات بكسل الويب مع عروض البيع الإضافي لما بعد الشراء

[وحدات بكسل الويب في Shopify](https://help.shopify.com/en/manual/promoting-marketing/pixels) هي حل Shopify لتتبع بيانات المشتريات مثل معدلات التحويل. هناك طريقتان رئيسيتان للتعامل معها:

* وحدات بكسل الويب الخاصة بالتطبيقات
* وحدات بكسل الويب المخصصة

<div id="app-web-pixels">
  # وحدات بكسل الويب الخاصة بالتطبيقات
</div>

بعض وحدات بكسل التطبيقات (مثل Omega Facebook Pixel) تتكامل مباشرةً مع وحدات بكسل الويب في Shopify. لا تتطلب هذه التطبيقات أي إعداد إضافي للعمل مع Aftersell.

<div id="custom-web-pixels">
  # وحدات بكسل الويب المخصصة
</div>

تتيح وحدات البكسل المخصصة حلولًا مخصصة إذا لم تجد بكسل تطبيق في سوق Shopify يلبي احتياجاتك. فيما يلي تفاصيل كيفية تحويل نصوص التتبع الحالية في صفحة حالة الطلب لاستخدام وحدات البكسل المخصصة. يرجى الاطلاع على [المخاطر المحتملة لوحدات البكسل المخصصة](https://help.shopify.com/en/manual/promoting-marketing/pixels/overview#potential-risks) قبل المتابعة.

إذا كنت تستخدم Google Tag Manager تحديدًا، فإن Shopify توفر [وثائق مفيدة لإتمام هذا الترحيل](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial).

هناك 3 خطوات أساسية لإنشاء بكسل مخصص لتتبع التحويلات.

1. تجهيز حزمة JavaScript SDK الخاصة بالطرف الثالث
2. إعداد تتبع التحويلات باستخدام وحدات بكسل الويب
3. ربط البكسل المخصص الخاص بك

<div id="1-preparing-the-3rd-party-javascript-sdk">
  ## 1. تجهيز حزمة JavaScript SDK الخاصة بالطرف الثالث
</div>

سترغب في إزالة أي HTML موجود في كود البكسل المقدَّم. أي JavaScript يتم تحميله عبر وسم HTML من نوع `<script>` يجب تحميله بدلاً من ذلك بأسلوب يعتمد على JavaScript فقط.

يتم تناول هذه العملية بمزيد من التفصيل [هنا](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/code#third-party-sdk).

مثال باستخدام Google Tag Manager

*كود البكسل الأصلي:*

```
<!-- 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>
```

*بعد إزالة HTML وإعادة صياغة وسوم `<script>`:*

```
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 المخصص. لنقل البيانات، تحتاج إلى الاشتراك في الأحداث.

<div id="2-setting-up-conversion-tracking-using-web-pixels">
  ## 2. إعداد تتبع التحويلات باستخدام وحدات بكسل الويب
</div>

لتتبع التحويلات باستخدام وحدات البكسل المخصصة، اشترك في حدث `checkout_completed` الذي توفره Shopify. يتم تشغيل هذا الحدث إما في صفحة ما بعد الشراء، إذا عُرضت على عميلك، أو في صفحة الشكر إذا لم تُعرض. يتم تشغيل هذا الحدث مرة واحدة فقط في كلتا الحالتين، لذا لا حاجة إلى منطق إضافي لتجنّب احتساب عملية الشراء مرتين.

```
analytics.subscribe("checkout_completed", (event) => {  
  // process event using 3rd party pixel tracking code  
});
```

استخدم هذا المرجع لمعرفة نقاط البيانات التي يمكنك استرجاعها من `event`.

[حدث checkout\_completed في Shopify](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed)

مثال على بكسل 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);  
  
analytics.subscribe("checkout_completed", (event) => {  
  fbq('track', 'Purchase', {  
    currency: event.data?.checkout?.currencyCode,  
    value: event.data?.checkout?.totalPrice?.amount,  
  });  
});
```

<div id="3-connecting-your-custom-pixel">
  ## 3. ربط البكسل المخصص الخاص بك
</div>

قبل إضافة بكسل مخصص، قم بإزالة أو تعديل أي وحدات بكسل حالية لضمان عدم احتساب أحداث العملاء مرتين. يجب إزالة كود البكسل الحالي يدويًا من أي مكان يوجد فيه، مثل `theme.liquid` و`checkout.liquid` (لتجار Plus فقط) وقسم Additional scripts في إعدادات الدفع لديك.

بعد الانتهاء من ذلك، اتبع هذه الخطوات لربط بكسل مخصص بمتجرك.

1. انتقل إلى Settings > Customer Events > Custom Pixels > Add Custom Pixel

   1. أدخل اسمًا للبكسل المخصص الخاص بك.
2. الصق كود البكسل المخصص في قسم "Code".
3. تأكد من تكوين إعدادات خصوصية العملاء بشكل صحيح.
4. انقر على "Save" في البكسل المخصص الخاص بك.
5. انقر على "Connect" لتفعيل البكسل المخصص مباشرةً!