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

# تثبيت SDK المتصفح

> أضف نص تتبع Scanova إلى موقعك مباشرةً في HTML أو عبر Google Tag Manager. يعمل مع أي موقع أو نظام إدارة محتوى أو إطار عمل واجهة أمامية.

يتكوّن SDK من وسم `<script>` واحد فقط. تثبّته مرة واحدة داخل `<head>` موقعك، ويُحمَّل بشكل غير متزامن دون أي أثر على أداء الصفحة.

## الخطوة 1: انسخ النص البرمجي من لوحة التحكم

1. في لوحة تحكم Scanova، افتح **التحليلات ← تتبع التحويلات**
2. اختر **إعداد تتبع التحويلات**
3. اختر **إعداد التتبع** لموقعك، في علامة التبويب **تضمين النص**
4. فعّل مفاتيح التتبع التلقائي التي تريدها
5. انسخ النص البرمجي المُولَّد

سيبدو النص البرمجي على هذا النحو، مع `site_id` الخاص بك مُدرجًا مسبقًا:

```html theme={null}
<script>
(function(w,d,s,o,f,js,fjs){
  w['ScanovaTrackingObject']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
  js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
  js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
})(window,document,'script','scanova','https://cdn.scanova.io/ct/js/qcg.min.js');

scanova('init', 'YOUR_SITE_ID', {
  autoPageview: true,
  autoClicks: true,
  autoForms: true,
  autoScroll: true
});
</script>
```

## الخيار أ: التثبيت مباشرةً في HTML (موصى به)

الصق النص البرمجي داخل وسم `<head>` في موقعك، **قبل إغلاق `</head>`**:

```html theme={null}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your Page</title>

  <!-- Scanova Conversion Tracking -->
  <script>
  (function(w,d,s,o,f,js,fjs){
    w['ScanovaTrackingObject']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  })(window,document,'script','scanova','https://cdn.scanova.io/ct/js/qcg.min.js');

  scanova('init', 'YOUR_SITE_ID', {
    autoPageview: true,
    autoClicks: true,
    autoForms: true,
    autoScroll: true
  });
  </script>
</head>
<body>
  <!-- your content -->
</body>
</html>
```

**أين تلصقه في المنصات الشائعة:**

| المنصة      | أين تضيف النص البرمجي                                             |
| ----------- | ----------------------------------------------------------------- |
| WordPress   | Appearance ← Theme Editor ← `header.php`، قبل `</head>`           |
| Shopify     | Online Store ← Themes ← Edit Code ← `theme.liquid`، قبل `</head>` |
| Webflow     | Project Settings ← Custom Code ← Head Code                        |
| Squarespace | Settings ← Advanced ← Code Injection ← Header                     |
| Wix         | Settings ← Custom Code ← Add Code ← Head                          |
| HTML مخصص   | مباشرةً داخل `<head>` في قالب HTML الخاص بك                       |

## الخيار ب: Google Tag Manager

استخدم GTM إذا كنت تدير كل الوسوم من وحدة تحكم GTM ولا يمكنك تعديل HTML موقعك مباشرةً.

1. افتح حاوية GTM الخاصة بك
2. انقر على **Tags ← New**
3. اختر **Custom HTML** كنوع للوسم
4. الصق نص Scanova البرمجي كاملًا
5. اضبط المُشغّل على **All Pages**
6. سمِّ الوسم (مثلًا "Scanova Conversion Tracking") وانقر على **Save**
7. اضغط **Submit** ثم **Publish** لنشر الحاوية

<Warning>
  لا تثبّت النص البرمجي مباشرةً في HTML وعبر GTM على الصفحة نفسها في آنٍ واحد. سيؤدي ذلك إلى تحميل SDK مرتين وإرسال أحداث مكرّرة.
</Warning>

**نصائح لـ GTM:**

* اجعل الوسم يُطلَق في أبكر وقت ممكن — استخدم المُشغّلين "DOM Ready" أو "Page View"، وليس "Window Loaded"
* إذا كان موقعك تطبيق صفحة واحدة (SPA)، فاقرأ [دليل SPA وأطر العمل](/ar/conversion-tracking/browser/spa-frameworks) قبل ضبط مُشغّلات GTM

## الخطوة 2: تحقّق من التثبيت

بعد نشر النص البرمجي:

1. افتح موقعك في متصفح
2. افتح DevTools، علامة التبويب **Network**
3. رشّح باستخدام `/ct`
4. أعد تحميل الصفحة

من المفترض أن ترى طلب `POST` إلى `https://t.scanova.io/ct` يُعيد الحالة `200`.

للاطلاع على قائمة تحقق كاملة، راجع [التحقق وتصحيح الأخطاء](/ar/conversion-tracking/browser/verify).

## الخطوات التالية

<CardGroup cols={2}>
  <Card title="إعداد SDK" icon="sliders" href="/ar/conversion-tracking/browser/sdk-configuration">
    كل خيارات init وما الذي يتحكم فيه كل مفتاح.
  </Card>

  <Card title="الأحداث المخصصة" icon="sparkles" href="/ar/conversion-tracking/browser/custom-events">
    تتبّع إجراءات محددة للمستخدم من شيفرة JavaScript لديك.
  </Card>

  <Card title="أطر عمل SPA" icon="react" href="/ar/conversion-tracking/browser/spa-frameworks">
    الإعداد الخاص بـ React وNext.js وVue.
  </Card>

  <Card title="التحقق وتصحيح الأخطاء" icon="bug" href="/ar/conversion-tracking/browser/verify">
    التأكد من استقبال الأحداث بشكل صحيح.
  </Card>
</CardGroup>
