مكتبات الطرف الثالث

@next/third-parties هي مكتبة توفر مجموعة من المكونات والأدوات التي تحسن الأداء وتجربة المطور لتحميل مكتبات الطرف الثالث الشهيرة في تطبيق Next.js الخاص بك.

جميع تكاملات الطرف الثالث المقدمة من @next/third-parties تم تحسينها للأداء وسهولة الاستخدام.

البدء

للبدء، قم بتثبيت مكتبة @next/third-parties:

npm install @next/third-parties@latest next@latest

@next/third-parties حاليًا مكتبة تجريبية قيد التطوير النشط. نوصي بتثبيتها باستخدام علامات latest أو canary بينما نعمل على إضافة المزيد من تكاملات الطرف الثالث.

مكتبات جوجل للطرف الثالث

جميع مكتبات الطرف الثالث المدعومة من جوجل يمكن استيرادها من @next/third-parties/google.

مدير علامات جوجل (Google Tag Manager)

يمكن استخدام مكون GoogleTagManager لإنشاء حاوية مدير علامات جوجل في صفحتك. افتراضيًا، يقوم بجلب النص البرمجي المضمن الأصلي بعد حدوث التمهيد (hydration) في الصفحة.

لتحميل مدير علامات جوجل لجميع المسارات، قم بتضمين المكون مباشرة في ملف _app المخصص الخاص بك ومرر معرف حاوية GTM:

import { GoogleTagManager } from '@next/third-parties/google'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <GoogleTagManager gtmId="GTM-XYZ" />
    </>
  )
}

لتحميل مدير علامات جوجل لمسار واحد، قم بتضمين المكون في ملف الصفحة الخاص بك:

import { GoogleTagManager } from '@next/third-parties/google'

export default function Page() {
  return <GoogleTagManager gtmId="GTM-XYZ" />
}

إرسال الأحداث

يمكن استخدام دالة sendGTMEvent لتتبع تفاعلات المستخدم في صفحتك عن طريق إرسال أحداث باستخدام كائن dataLayer. لكي تعمل هذه الدالة، يجب تضمين مكون <GoogleTagManager /> إما في تخطيط أصل، أو صفحة، أو مكون، أو مباشرة في نفس الملف.

import { sendGTMEvent } from '@next/third-parties/google'

export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        إرسال حدث
      </button>
    </div>
  )
}

راجع وثائق المطور لمدير العلامات لمعرفة المتغيرات والأحداث المختلفة التي يمكن تمريرها إلى الدالة.

الخيارات

خيارات لتمريرها إلى مدير علامات جوجل. للحصول على قائمة كاملة بالخيارات، اقرأ وثائق مدير علامات جوجل.

تحليلات جوجل (Google Analytics)

يمكن استخدام مكون GoogleAnalytics لتضمين تحليلات جوجل 4 في صفحتك عبر علامة جوجل (gtag.js). افتراضيًا، يقوم بجلب النصوص البرمجية الأصلية بعد حدوث التمهيد (hydration) في الصفحة.

توصية: إذا كان مدير علامات جوجل مضمنًا بالفعل في تطبيقك، يمكنك تكوين تحليلات جوجل مباشرة باستخدامه، بدلاً من تضمين تحليلات جوجل كمكون منفصل. راجع الوثائق لمعرفة المزيد عن الاختلافات بين مدير العلامات وgtag.js.

لتحميل تحليلات جوجل لجميع المسارات، قم بتضمين المكون مباشرة في ملف _app المخصص الخاص بك ومرر معرف القياس الخاص بك:

import { GoogleAnalytics } from '@next/third-parties/google'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <GoogleAnalytics gaId="G-XYZ" />
    </>
  )
}

لتحميل تحليلات جوجل لمسار واحد، قم بتضمين المكون في ملف الصفحة الخاص بك:

import { GoogleAnalytics } from '@next/third-parties/google'

export default function Page() {
  return <GoogleAnalytics gaId="G-XYZ" />
}

إرسال الأحداث

يمكن استخدام دالة sendGAEvent لقياس تفاعلات المستخدم في صفحتك عن طريق إرسال أحداث باستخدام كائن dataLayer. لكي تعمل هذه الدالة، يجب تضمين مكون <GoogleAnalytics /> إما في تخطيط أصل، أو صفحة، أو مكون، أو مباشرة في نفس الملف.

import { sendGAEvent } from '@next/third-parties/google'

export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGAEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        إرسال حدث
      </button>
    </div>
  )
}

راجع وثائق المطور لتحليلات جوجل لمعرفة المزيد عن معلمات الأحداث.

تتبع مشاهدات الصفحات

تقوم تحليلات جوجل تلقائيًا بتتبع مشاهدات الصفحات عند تغيير حالة سجل المتصفح. هذا يعني أن التنقلات بين مسارات Next.js من جانب العميل سترسل بيانات مشاهدات الصفحات دون أي تكوين.

للتأكد من قياس التنقلات من جانب العميل بشكل صحيح، تحقق من تمكين خاصية "القياس المعزز" في لوحة التحكم الخاصة بك وتحديد خانة الاختيار "تغييرات الصفحة بناءً على أحداث سجل المتصفح".

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

الخيارات

خيارات لتمريرها إلى مكون <GoogleAnalytics>.

تضمين خرائط جوجل (Google Maps Embed)

يمكن استخدام مكون GoogleMapsEmbed لإضافة تضمين خرائط جوجل إلى صفحتك. افتراضيًا، يستخدم سمة loading للتحميل البطيء (lazy-load) للتضمين أسفل الطية (below the fold).

import { GoogleMapsEmbed } from '@next/third-parties/google'

export default function Page() {
  return (
    <GoogleMapsEmbed
      apiKey="XYZ"
      height={200}
      width="100%"
      mode="place"
      q="Brooklyn+Bridge,New+York,NY"
    />
  )
}

الخيارات

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

تضمين يوتيوب (YouTube Embed)

يمكن استخدام مكون YouTubeEmbed لتحميل وعرض تضمين يوتيوب. يقوم هذا المكون بالتحميل بشكل أسرع باستخدام lite-youtube-embed في الخلفية.

import { YouTubeEmbed } from '@next/third-parties/google'

export default function Page() {
  return <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
}

الخيارات