Next.js
كيف تضيف تفسير بوب أب إلى Next.js: مكوّن Script باستراتيجية afterInteractive.
مكوّن Script باستراتيجية afterInteractive.
ما تحتاجه
- موقعك مضافًا في تفسير بوب أب مع كود التثبيت الخاص به. افتح المواقع الإلكترونية واضغط عرض كود التثبيت.
- صلاحية الوصول إلى مكان الكود العام في Next.js.
يبدو الكود هكذا مع مفتاح موقعك:
<script>
(function (w, d, s, id) {
if (d.getElementById(id)) return;
var js = d.createElement(s); js.id = id; js.async = true;
js.src = 'https://popup.beta.tafsee.com/embed/v1.js';
js.dataset.site = 'pk_your_site_key';
d.head.appendChild(js);
})(window, document, 'script', 'tafsee-popup');
</script>الخطوات
- استورد Script من next/script في app/layout.tsx.
- اعرضه مع strategy="afterInteractive" ورابط src من الكود.
- أعد النشر وتحقّق من التثبيت.
- عُد إلى تفسير بوب أب وافتح المواقع الإلكترونية واضغط افحص موقعي.
الخطوات نفسها موجودة داخل التطبيق بجانب كود التثبيت في تبويب التثبيت والأدلة للموقع.
معلومات مفيدة
- يقرأ السكربت مفتاح موقعك من الخاصية data-site في وسمه. في app/layout.tsx يبدو هكذا:
import Script from "next/script";
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Script src="https://popup.beta.tafsee.com/embed/v1.js" data-site="pk_your_site_key" strategy="afterInteractive" />
</body>
</html>
);
}
النتيجة المتوقعة
يظهر على الموقع الكود مثبّت. انشر حملة مضبوطة على فور فتح الصفحة وافتح موقعك في نافذة خاصة: تظهر النافذة.
إن لم ينجح الأمر
- لا شيء يُحمَّل: الخاصية data-site مفقودة أو فيها القيمة المثال. استخدم مفتاحك الذي يبدأ بـ pk_.
- سياسة Content-Security-Policy تحجبه: اسمح بالسكربتات والطلبات من النطاق الموجود في src.
- تأكد أن الكود في كل الصفحات مرة واحدة.
- أضف ?tafsee-debug=1 إلى عنوان صفحة في موقعك. تسرد لوحة الاختبار كل حملة وما تنتظره.
- أسباب وحلول أخرى: فحص التثبيت لا ينجح.
مواضيع ذات صلة
آخر تحديث: ١٢/١٠/٢٠٢٦
