# إشعارات الويب عبر Google Tag Manager

طبّق إشعارات الدفع في أربع خطوات بدون أي برمجة!
يمكن إضافة Pushwoosh WebSDK Lite إلى موقعك الإلكتروني من خلال Google Tag Manager، مما يجعل عملية الدمج سهلة قدر الإمكان.

<Aside type="note">
#### وظائف جزئية

لاحظ أنه من بين جميع زوار موقعك الإلكتروني، سيتمكن فقط أولئك الذين يستخدمون Chrome أو Firefox من الاشتراك في إشعارات الدفع واستلامها. كما أن WebSDK Lite لديه وصول محدود إلى ميزات Pushwoosh، مثل Tags المخصصة، أو UserIDs، أو الرسائل التي يتم تشغيلها بالأحداث. لمزيد من التفاصيل، يرجى التواصل مع [فريق الدعم](https://help.pushwoosh.com/hc/en-us/requests/new/)!
</Aside>

## الدمج

### بيانات اعتماد Firebase

في [وحدة تحكم Firebase](https://console.firebase.google.com/project/_/settings/cloudmessaging/)، اختر مشروعك للحصول على **Server Key** و **Sender ID** الخاصين بـ Firebase. يرجى الاطلاع على لقطة الشاشة أدناه كمرجع:

<img src="/web-push-notifications-web-push-via-google-tag-manager-1.webp" alt=""/>

### لوحة تحكم Pushwoosh

اذهب إلى [**لوحة تحكم**](https://go.pushwoosh.com/v2/applications) Pushwoosh وأضف تطبيقًا جديدًا. في الصفحة التي تفتح، قم بتكوين منصة Chrome أو Firefox بالنقر فوق زر **Configure** في الصف الخاص بكل منهما. املأ النموذج:

* **Server Key** من وحدة تحكم Firebase في حقل **API key**؛
* **Sender ID** من وحدة تحكم Firebase في حقل **FCM Sender ID**؛
* العنوان الدقيق لموقعك الإلكتروني في حقل **Website Name**.

<img src="/web-push-notifications-web-push-via-google-tag-manager-2.webp" alt=""/>

تأكد من نسخ Application Code للتطبيق الذي تم إنشاؤه حديثًا، ستحتاج إليه لاحقًا. يتم تمييز كود التطبيق أدناه:

<img src="/web-push-notifications-web-push-via-google-tag-manager-3.webp" alt=""/>

### Google Tag Manager

**1.** في Google Tag Manager، اختر حاوية (container) أو أنشئ واحدة جديدة.

<img src="/web-push-notifications-web-push-via-google-tag-manager-4.webp" alt=""/>

**2.** أنشئ Tag جديدًا واختر **Custom HTML** في Tag Configuration.

<img src="/web-push-notifications-web-push-via-google-tag-manager-5.webp" alt=""/>

**3.** انسخ السكريبت أدناه والصقه في حقل HTML؛

```txt
<script type="text/javascript" src="//cdn.pushwoosh.com/webpush-lite/v1/pushwoosh-web-notifications-lite.js?pw_application_code=#####-#####" async></script>
```

**4.** غيّر علامات الأرقام `#####-#####` (المميزة في الصورة أدناه) في السكريبت إلى Pushwoosh Application Code الخاص بك، والذي حصلت عليه في الخطوة 2.

<img src="/web-push-notifications-web-push-via-google-tag-manager-6.webp" alt=""/>

**5.** مرر لأسفل إلى خيارات Triggering واختر **All Pages**.

<img src="/web-push-notifications-web-push-via-google-tag-manager-7.webp" alt=""/>

**6.** انقر على "Save". الـ Tag الخاص بك جاهز!

### زر الاشتراك في الإشعارات

اسمح للمستخدمين بالاشتراك في إشعارات الدفع باستخدام زر الاشتراك في الإشعارات. لإعداد الزر، ما عليك سوى إضافة السكريبت التالي عبر Google Tag Manager.

```txt
<div style="text-align:center;margin:90px 0;">
  <button style="color:#000000;background: none;font-size: 16px;cursor: pointer;font-weight: 700;padding:0 60px;line-height: 60px;border:3px solid #000000;" type="button" name="button" onclick="window.pushwooshLite.instance.showSubscriptionWindow()">Subscribe Now</button>
</div>
```

اكتمل كل شيء! يمكن لزوار موقعك الإلكتروني الآن الاشتراك في رسائل الدفع واستلامها.