Third Party Libraries

@next/third-parties Next.js uygulamanızda popüler üçüncü taraf kütüphaneleri yüklemenin performansını ve geliştirici deneyimini iyileştiren bir dizi bileşen ve yardımcı program sağlayan bir kütüphanedir.

@next/third-parties tarafından sağlanan tüm üçüncü taraf entegrasyonları performans ve kullanım kolaylığı için optimize edilmiştir.

Getting Started

Başlamak için @next/third-parties kütüphanesini yükleyin:

Terminal

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

@next/third-parties şu anda aktif geliştirme aşamasında olan deneysel bir kütüphanedir. Daha fazla üçüncü taraf entegrasyonu eklemek için çalışırken en son veya kanarya bayraklarıyla yüklemenizi öneririz.

Google Third-Parties

Google'ın desteklenen tüm üçüncü taraf kütüphaneleri @next/third-parties/google adresinden içe aktarılabilir.

Google Tag Manager

GoogleTagManager bileşeni, sayfanıza bir Google Tag Manager konteyneri örneklemek için kullanılabilir. Varsayılan olarak, sayfada hidrasyon gerçekleştikten sonra orijinal satır içi komut dosyasını getirir.

Tüm rotalar için Google Tag Manager'ı yüklemek için bileşeni doğrudan kök düzeninize ekleyin ve GTM kapsayıcı kimliğinizi iletin:

app/layout.tsx

import { GoogleTagManager } from '@next/third-parties/google'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleTagManager gtmId="GTM-XYZ" />
    </html>
  )
}

Google Tag Manager'ı tek bir rotaya yüklemek için bileşeni sayfa dosyanıza ekleyin:

app/page.js

import { GoogleTagManager } from '@next/third-parties/google'
 
export default function Page() {
  return <GoogleTagManager gtmId="GTM-XYZ" />
}

Sending Events

sendGTMEvent işlevi, dataLayer nesnesini kullanarak olaylar göndererek sayfanızdaki kullanıcı etkileşimlerini izlemek için kullanılabilir. Bu işlevin çalışması için <GoogleTagManager /> bileşeninin bir üst düzene, sayfaya veya bileşene ya da doğrudan aynı dosyaya dahil edilmesi gerekir.

app/page.js

'use client'
 
import { sendGTMEvent } from '@next/third-parties/google'
 
export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        Send Event
      </button>
    </div>
  )
}

Fonksiyona aktarılabilecek farklı değişkenler ve olaylar hakkında bilgi edinmek için Tag Manager geliştirici belgelerine bakın.

Options

Google Etiket Yöneticisi'ne iletilecek seçenekler. Seçeneklerin tam listesi için Google Tag Manager dokümanlarını okuyun .

Name	Type	Description
`gtmId`	Required	Your GTM container ID. Usually starts with `GTM-`.
`dataLayer`	Optional	Data layer array to instantiate the container with. Defaults to an empty array.
`dataLayerName`	Optional	Name of the data layer. Defaults to `dataLayer`.
`auth`	Optional	Value of authentication parameter (`gtm_auth`) for environment snippets.
`preview`	Optional	Value of preview parameter (`gtm_preview`) for environment snippets.

Google Analytics

GoogleAnalytics bileşeni, Google etiketi (gtag.js) aracılığıyla sayfanıza Google Analytics 4 eklemek için kullanılabilir. Varsayılan olarak, sayfada hidrasyon gerçekleştikten sonra orijinal komut dosyalarını getirir.

Öneri: Google Tag Manager uygulamanıza zaten dahil edilmişse, Google Analytics'i ayrı bir bileşen olarak dahil etmek yerine doğrudan onu kullanarak yapılandırabilirsiniz. Tag Manager ve gtag.js arasındaki farklar hakkında daha fazla bilgi edinmek için belgelerinebakın.

Tüm rotalar için Google Analytics'i yüklemek üzere bileşeni doğrudan kök düzeninize ekleyin ve ölçüm kimliğinizi iletin:

app/layout.tsx

import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  )
}

Google Analytics'i tek bir rotaya yüklemek için bileşeni sayfa dosyanıza ekleyin:

app/page.js

import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function Page() {
  return <GoogleAnalytics gaId="G-XYZ" />
}

Sending Events

sendGAEvent işlevi, dataLayer nesnesini kullanarak olaylar göndererek sayfanızdaki kullanıcı etkileşimlerini ölçmek için kullanılabilir. Bu işlevin çalışması için <GoogleAnalytics /> bileşeninin bir üst düzene, sayfaya veya bileşene ya da doğrudan aynı dosyaya dahil edilmesi gerekir.

app/page.js

'use client'
 
import { sendGAEvent } from '@next/third-parties/google'
 
export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGAEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        Send Event
      </button>
    </div>
  )
}

Etkinlik parametreleri hakkında daha fazla bilgi edinmek için Google Analytics geliştirici belgelerine bakın.

Tracking Pageviews

Google Analytics, tarayıcı geçmişi durumu değiştiğinde sayfa görüntülemelerini otomatik olarak izler. Bu, Next.js rotaları arasında istemci tarafında yapılan gezintilerin herhangi bir yapılandırma olmadan sayfa görüntüleme verilerini göndereceği anlamına gelir.

İstemci tarafı gezinmelerinin doğru şekilde ölçüldüğünden emin olmak için, Yönetici panelinizde "Gelişmiş Ölçüm " özelliğinin etkinleştirildiğini ve "Tarayıcı geçmişi olaylarına dayalı sayfa değişiklikleri" onay kutusunun seçili olduğunu doğrulayın.

Not: Sayfa görüntüleme olaylarını manuel olarak göndermeye karar verirseniz, yinelenen verilere sahip olmamak için varsayılan sayfa görüntüleme ölçümünü devre dışı bıraktığınızdan emin olun. Daha fazla bilgi edinmek için Google Analytics geliştirici belgelerinebakın.

Options

<GoogleAnalytics> bileşenine aktarılacak seçenekler.

Name	Type	Description
`gaId`	Required	Your measurement ID. Usually starts with `G-`.
`dataLayerName`	Optional	Name of the data layer. Defaults to `dataLayer`.

Google Maps Embed

GoogleMapsEmbed bileşeni, sayfanıza bir Google Maps Embed eklemek için kullanılabilir. Varsayılan olarak, yerleştirmeyi katlamanın altına lazy-load etmek için loading özniteliğini kullanır.

app/page.js

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"
    />
  )
}

Options

Google Maps Embed'e aktarılacak seçenekler. Seçeneklerin tam listesi için Google Map Embed dokümanlarını okuyun.

Name	Type	Description
`apiKey`	Required	Your api key.
`mode`	Required	Map mode
`height`	Optional	Height of the embed. Defaults to `auto`.
`width`	Optional	Width of the embed. Defaults to `auto`.
`style`	Optional	Pass styles to the iframe.
`allowfullscreen`	Optional	Property to allow certain map parts to go full screen.
`loading`	Optional	Defaults to lazy. Consider changing if you know your embed will be above the fold.
`q`	Optional	Defines map marker location. This may be required depending on the map mode.
`center`	Optional	Defines the center of the map view.
`zoom`	Optional	Sets initial zoom level of the map.
`maptype`	Optional	Defines type of map tiles to load.
`language`	Optional	Defines the language to use for UI elements and for the display of labels on map tiles.
`region`	Optional	Defines the appropriate borders and labels to display, based on geo-political sensitivities.

YouTube Embed

YouTubeEmbed bileşeni, bir YouTube yerleştirmesini yüklemek ve görüntülemek için kullanılabilir. Bu bileşen aşağıdakileri kullanarak daha hızlı yüklenir lite-youtube-embed Kaputun altında.

app/page.js

import { YouTubeEmbed } from '@next/third-parties/google'
 
export default function Page() {
  return <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
}

Options

Name	Type	Description
`videoid`	Required	YouTube video id.
`width`	Optional	Width of the video container. Defaults to `auto`
`height`	Optional	Height of the video container. Defaults to `auto`
`playlabel`	Optional	A visually hidden label for the play button for accessibility.
`params`	Optional	The video player params defined here. Params are passed as a query param string. Eg: `params="controls=0&start=10&end=30"`
`style`	Optional	Used to apply styles to the video container.