Nextjs で Plausible を使用してインバウンドリンクを追跡する方法

Plausible は、プライバシーを重視した優れた Google の代替手段です. Nextjs でのセットアップは簡単ですが、インバウンドリンクの追跡にはさらに手間がかかります.

記事上で:

Why I choose Plausible?

Set up Plausible in Nextjs

Create a custom event in Plausible

Create a link component that tracks inbound clicks

Track component clicks

Plausible を選ぶ理由

サイド プロジェクトでは、プライバシーを重視しています.というわけで、ざっくり言うとこんな感じです.

ユーザビリティに関するフィードバックを匿名で収集したいと考えています.

すべてのユーザー データを収集したくありません.

代わりに、ページの訪問とボタンのクリックを追跡したいと考えています.

これには複雑なダッシュボードは必要ありません.

プライバシー Cookie の受け入れに対処したくありません.

データ収集は GDPR に準拠する必要があります.

簡単に実装できるはずです.

Google アナリティクスは最も人気のあるツールの 1 つですが、上記のリストで 2.5/6 のスコアを獲得しています.これに加えて、Google の問題は、ビジネス モデルがプライバシー ファーストではないことです.私にとって、彼らの優先事項は別のところにあるように感じたので、別の方法を探すことにしました.

Plausible によろしく! 🤗

Plausible is lightweight and open source web analytics. No cookies and fully compliant with GDPR, CCPA, and PECR. Made and hosted in the EU, powered by European-owned cloud infrastructure.

Plausible が Google よりも優れているのはなぜですか? 🥊

プライバシー第一のビジネスモデル

シンプルな分析ツールです

完全なデータ所有権

オープンソース (透明)

GDPR、CCPA、および PERC に準拠

Cookie がないということは、ポップアップがないことを意味します

ページ パフォーマンスの向上

広告ブロックを回避します

地域密着型

NextjsでPlausibleを設定するには?

next-plausible を使用

yarn add next-plausible

_app.js に次を追加します.

import PlausibleProvider from 'next-plausible'

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

分析スクリプトをプロキシして、アドブロッカーによってブロックされないようにします.

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

module.exports = withPlausibleProxy()({
  // ...your next js config, if any
})

そして「出来上がり」、完了です!

PS: プロキシする必要がある理由.

We're blocked by some blocklist maintainers who have taken the stance that they want to block every tracking script and don't want to have the responsibility to judge what's good and what's bad.

Plausible でカスタム イベントを作成する

インバウンドリンクのクリックの追跡を開始するには、Plausible でカスタム目標を作成する必要があります.

カスタム目標は、ここで構成できます.
plausible.io/[あなたのドメイン]/settings/goals

または、次の手順に従ってください.

plausible.io/sites に移動します

Web サイトにカーソルを合わせ、歯車のアイコンをクリックします.

plausible.io/[your-domain]/settings/general

にリダイレクトする必要があります

goals をクリックします.

plausible.io/[your-domain]/settings/goals にリダイレクトする必要があります

次に、カスタム目標を作成します

+ Add goals

をクリックします.

Custom Event をクリックします.

イベント名を入力 Inbound Link: Click

クリック Add goal →

インバウンド クリックを追跡するリンク コンポーネントを作成する

Link コンポーネントで next/link をラップしましょう.

import NextLink from 'next/link';

const Link = ({ href, children, ...props }) => {
  return (
    <NextLink href={href}>
      <a {...props} onClick={() => plausible('Inbound Link: Click')}>
        {children}
      </a>
    </NextLink>
  );
};

export default Link;

Plausible をインポートし、onclick イベントを Plausible に送信します.

import NextLink from 'next/link';
import { usePlausible } from 'next-plausible';

const Link = ({ href, children, ...props }) => {
  const plausible = usePlausible();

  return (
    <NextLink href={href}>
      <a {...props} onClick={() => plausible('Inbound Link: Click')}>
        {children}
      </a>
    </NextLink>
  );
};

export default Link;

ユーザーが以下のリンク コンポーネントをクリックすると、次のようになります.

<Link href="/some-url">
  Some text
</Link>

onclick ハンドラーは、カスタム Inbound Link: Click イベントを Plausible に送信します.目標コンバージョン ダッシュボードを調べると、更新されていることがわかります. 🙌

コンポーネントのクリックを追跡する

おまけとして、ユーザーがクリックしたコンポーネントを確認するために使用できるカスタム props を追加しましょう.目標コンバージョンの概要の下に、コンポーネントのクリックの内訳が表示されます.



上の画像でわかるように、フリーランサーが compare freelance websites.

ここで、Plausible に送信するカスタム プロパティを定義できるプロパティ customProps を追加しました.

import Link from './Link';

const Header = () => {
  return (
    <Link href="/some-url" customProps={{ component: 'Header' }}>
      Some text
    </Link>
  );
};

Link コンポーネントは次のようになります.

import NextLink from 'next/link';
import { usePlausible } from 'next-plausible';

const Link = ({ href, children, customProps = { component: 'Any' }, ...props }) => {
  const plausible = usePlausible();

  return (
    <NextLink href={href}>
      <a
        {...props}
        onClick={() => {
          plausible('Inbound Link: Click', {
            props: {
              ...customProps
            }
          });
        }}>
        {children}
      </a>
    </NextLink>
  );
};

他のプロパティを使用して customProps をいつでも拡張して、カスタム イベントの内訳を拡張できます.

要約

ユーザーのプライバシーを保護することに関しては、Plausible が私の背中を押してくれました.私と同じようにPlausibleを楽しんでいただけることを願っています.