next plausibleダウンロード - next plausibleソースコードのダウンロード

next plausible

AI ソースコード

1.0.0

ダウンロード

次のプリザブル・

https://nextjs.orgおよびhttps://plausible.io分析の簡単な統合。

https://next-plausible.vercel.appで動作中の動作を参照してください。

重要：次に11.1.0未満のバージョンを使用している場合はnext-plausible@2を使用して、タイプのチェックエラーを避けてください（＃25を参照）。

使用法

分析スクリプトを含めます

next.jsアプリでもっともらしい分析を有効にするには、 _app.js内のアプリケーションの最上位レベルで、もっともらしいコンテキスト<PlausibleProvider />を公開する必要があります。

 // pages/_app.js
import PlausibleProvider from 'next-plausible'

export default function MyApp ( { Component , pageProps } ) {
  return (
    < PlausibleProvider domain = "example.com" >
      < Component { ... pageProps } />
    </ PlausibleProvider >
  )
}

単一ページでのみもっともらしい分析を有効にする場合は、もっともPlausibleProviderコンポーネントでページをラップできます。

 // pages/home.js
import PlausibleProvider from 'next-plausible'

export default Home ( ) {
  return (
    < PlausibleProvider domain = "example.com" >
      < h1 > My Site </ h1 >
      { /* ... */ }
    </ PlausibleProvider >
  )
}

App Directoryを使用している場合、ルートレイアウト内にPlausibleProviderが含まれています。

 // app/layout.js
import PlausibleProvider from 'next-plausible'

export default function RootLayout ( { children } ) {
  return (
    < html >
      < head >
        < PlausibleProvider domain = "example.com" />
      </ head >
      < body > { children } </ body >
    </ html >
  )
}

`PlausibleProvider`小道具

名前	説明
`domain`	監視するサイトのドメイン。
`customDomain`	カスタムドメインを使用して分析スクリプトを提供する場合は、これを設定します。デフォルトはhttps://plausible.ioです。詳細については、https：//plausible.io/docs/custom-domainを参照してください。
`trackOutboundLinks`	アウトバウンドリンククリックトラッキングを有効にする場合は、これを`true`に設定します。
`trackFileDownloads`	ファイルのダウンロード追跡を有効にする場合は、これを`true`に設定します。
`taggedEvents`	HTML要素でカスタムイベントトラッキングを有効にする場合は、これを`true`に設定します。
`trackLocalhost`	LocalHostトラッキングを有効にする場合は、これを`true`に設定します。
`manualPageviews`	自動PageViewイベントを無効にする場合は、これを`true`に設定します。
`pageviewProps`	PageViewsのカスタムプロパティを設定します。 `event-` - プレフィックスは自動的に追加されます。例を参照してください。
`revenue`	eコマース収益追跡を有効にする場合は、これを`true`に設定します。
`hash`	ハッシュベースのルーティングを使用する場合は、これを`true`に設定します。
`exclude`	トラッキングされてからページのセットを除外する場合は、これを設定します。詳細については、https：//plausible.io/docs/excluding-pagesを参照してください。
`selfHosted`	もっともらしいインスタンスを自己ホストしている場合は、これを`true`に設定します。それ以外の場合は、スクリプトを要求するときに404を取得します。
`enabled`	これを使用して、スクリプトをレンダリングするかどうかを明示的に決定します。渡されない場合、スクリプトは実稼働環境でレンダリングされます（node_envとvercel_envのチェック）。
`integrity`	オプションでは、追加のセキュリティのためにサブリソースの整合性属性を定義します。
`scriptProps`	オプションで、スクリプト要素に渡された小道具のいずれかをオーバーライドします。例を参照してください。

分析スクリプトをプロキシ

Adblockersによってブロックされることを避けるために、もっともらしいことは、スクリプトをプロキシすることをお勧めします。これを行うには、 next.config.jsをwithPlausibleProxy関数でラップする必要があります。

 const { withPlausibleProxy } = require ( 'next-plausible' )

module . exports = withPlausibleProxy ( ) ( {
  // ...your next js config, if any
  // Important! it is mandatory to pass a config object, even if empty
} )

これにより、ここで説明したように必要な書き換えを設定し、このように使用し続けることができるように、 PlausibleProviderローカルURLを使用するように構成します。

  < PlausibleProvider domain = "example.com" >
    ...
  </ PlausibleProvider >
}

オプションで、プロキシされたスクリプトサブディレクトリと名前、および元のスクリプトのカスタムドメインを上書きすることができます。

 const { withPlausibleProxy } = require ( 'next-plausible' )

module . exports = withPlausibleProxy ( {
  subdirectory : 'yoursubdirectory' ,
  scriptName : 'scriptName' ,
  customDomain : 'http://example.com' ,
} ) ( {
  // ...your next js config, if any
  // Important! it is mandatory to pass a config object, even if empty
} )

これにより、 /yoursubdirectory/js/scriptName.js /scriptname.jsからスクリプトが読み込まれ、 http://example.com/js/script.jsからフェッチします。

注：

プロキシは、 next startを使用してサイトにサービスを提供する場合にのみ機能します。静的に生成されたサイトは、リクエストを書き換えることができません。
自己ホスティングがもっともらしい場合は、インスタンスにcustomDomainを設定する必要があります。そうしないと、データは送信されません。

追跡リクエストは同じドメインに行われるため、Cookieが転送されることに注意してください。＃67を参照してください。これがあなたにとって問題である場合、 [email protected]からミドルウェアを使用して、次のようなクッキーを剥ぎ取ることができます。

 import { NextResponse } from 'next/server'

export function middleware ( request ) {
  const requestHeaders = new Headers ( request . headers )
  requestHeaders . set ( 'cookie' , '' )
  return NextResponse . next ( {
    request : {
      headers : requestHeaders ,
    } ,
  } )
}

export const config = {
  matcher : '/proxy/api/event' ,
}

カスタムイベントを送信します

https://plausible.io/docs/custom-event-goalsで説明されているように、妥当なカスタムイベントをサポートします。このパッケージは、このようplausible関数に安全にアクセスするためusePlausibleフックを提供します。

 import { usePlausible } from 'next-plausible'

export default function PlausibleButton ( ) {
  const plausible = usePlausible ( )

  return (
    < >
      < button onClick = { ( ) => plausible ( 'customEventName' ) } > Send </ button >

      < button
        id = "foo"
        onClick = { ( ) =>
          plausible ( 'customEventName' , {
            props : {
              buttonId : 'foo' ,
            } ,
          } )
        }
      >
        Send with props
      </ button >
    </ >
  )
}

TypeScriptを使用する場合は、このようなカスタムイベントをチェックすると入力できます。

 import { usePlausible } from 'next-plausible'

type MyEvents = {
  event1 : { prop1 : string }
  event2 : { prop2 : string }
  event3 : never
}

const plausible = usePlausible < MyEvents > ( )