あなたの次のもっともらしい分析を使用すること.jsアプリ

8995 ワード

react analytics plausible nextjs テキストリンク

私は個人的なホームページについて簡単な統計を得るために純粋で、軽量でプライバシーにやさしい方法を探していました.私は、彼らがプライバシーで少しの問題を維持するので、Google Analyticsを除外しました、そして、それは言及された特質に合いません.だから、何が市場では何ですか?この時点まで、次のように遭遇しました.

うまみ

単純な解析論

参考文献分析(有料)、

splitbee (有料)、

そして、もっともらしい(支払いされた、または自称の、オープンソース)

可能であれば、私はむしろ支払いサービス(少なくとも今のところ)を避けたい.最近うまいというクライアントプロジェクトのために旨味を使ったことがあったPlausible , このプロジェクトのために、欧州連合に基づくオープンソースプロジェクト.きれいにきれいな申し出をするself-hosting setup via Docker . あるいは、彼らが好む人々のために彼ら自身のプラットホームの上で支払われた管理されたサービスを提供します.
どちらももっともらしい.IOまたは自己ホストされた-あなたが簡単に提供されているもっともらしいダッシュボードのサイトを作成した後<script> 以下のようなタグです.

<script
  async
  defer
  data-domain="johnschmidt.de"
  src="https://stats.johnschmidt.cloud/js/plausible.js"
/>

もちろんsrc and data-domain 属性は設定によって異なる場合があります.それはあなたがもっともらしいことから必要なことです.

アプリケーションの設定
あなたの次で.我々が修正する必要があるJSプロジェクトcustom document /pages/_document.js ファイル.トラッカーを実装するいくつかの可能なアプローチがあります.この場合、手動で実装しました.しかし、あるsmall package Aを提供する<PlausibleProvider> ラッパー.最も簡単なアプローチは<script> タグで<Head> コンポーネント.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class HomepageDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }
  render() {
    return (
      <Html lang='en'>
        <Head>
          <script
            async
            defer
            data-domain='johnschmidt.de'
            src='https://stats.johnschmidt.cloud/js/plausible.js'
          />
        </Head>
        <body className='antialiased dark:bg-black dark:text-white'>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default HomepageDocument

最も簡単なシナリオでは、これはそれになります-あなたは行ってもいいです.スクリプトは、すべてのページ上のアプリケーションのバンドルに含まれます.一旦展開されると、スクリプトは自動的に追跡機能を実行して、訪問客とページ・ビューを数えます.結果は、ほぼ瞬時にもっともらしいダッシュボードに表示されます.

プレビュー展開でカウントを避ける
ちょっと、この1つの小さい注意点があります:あなたがスクリプトを呼ぶというわけではありません.あなたの展開のためにVercelまたはNetLifyを使用すると、非常に頻繁にプレビューURLを使用することがあります.これらのうちの1つへの訪問は、生産環境のようなイベントを引き起こすでしょう.私が評価することができた限り、基本的に避ける2つのオプションがあります.

クライアント側でのトラッキングから自分自身を除外する

スクリプトを所望のプロダクションURLだけに含める(例えばJohnschmidt . de )

最初のオプションは、ソートの拡張をブロックしているスクリプト(例えばUBlock、Adblock Plus)でカスタム規則で達成されることができました.番目のアプローチは、書き込み時にビットトリッキーです.避ける<script> プレビューURLをレンダリングするには、現在のホスト名に基づいて、条件つきでスニペットを含める必要があります.The Window オブジェクトは、window.location.hostname . それは文字列として提供されます.これはコードを/pages/_document.js to /pages/_app.js クライアント側での状況をチェックする必要があります.

import Head from 'next/head'

function HomepageApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        {typeof window !== 'undefined' &&
          window.location.hostname === 'johnschmidt.de' && (
            <script
              async
              defer
              data-domain='johnschmidt.de'
              src='https://stats.johnschmidt.cloud/js/plausible.js'
            />
          )}
      </Head>
      <Component {...pageProps} />
    </>
  )
}

export default HomepageApp

読む前にwindow.location.hostname パラメータは、クライアント側の設定でのみ呼び出されるようにする必要があります.我々は、チェックすることができますWindow オブジェクトを定義し、スクリプトタグを条件付きでレンダリングします.以降.JSは静的にサーバー側でページを生成しますWindow ノード内のオブジェクト.環境変数Window そこには存在しない.訪問者が生産のURLで我々のアプリを開くと、スクリプトは水和の上でレンダリングされるべきであり、もっともらしく、通常通りあなたのイベントを集め始めることができます.

ラッピング
もっともらしいことは、Google Analyticsに良い代替手段を提供します.唯一の欠点は、VercelまたはNetlifyのような連続的な配備環境の中で、かなり狭い調整性です.少し微調整では、それは魅力のように動作することができます.このホームページのような小さなプロジェクトのために、それは軽量統計とベースライン分析を得る最高の解決の1つのようでした.
これがこの種の私の最初のポストであるので、このポストがあなたにとって有用であって、フィードバックと考えで外へ(＠jopeperssh)に達するならば、知らせてください!

Reference

この問題について(あなたの次のもっともらしい分析を使用すること.jsアプリ), 我々は、より多くの情報をここで見つけました https://dev.to/jopesh/using-plausible-analytics-in-your-next-js-app-l4o

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Pythonコードを使用してAppを実行

D 8を引き起こしているフラッターFirestore:アンドロイドスタジオの一つのDEXファイル(