このガイドは、Webサイトにトラッキングをインストールするすべての方法をカバーしています。
トラッキングコードを見つける
まず、一意のトラッキングコードを取得してください。
- Zenovayダッシュボードにログインします
- Domainsを開き、トラッキングしたいサイトを選択します
- Webサイトの設定を開き、Generalタブに移動します
- Tracking Scriptセクションからスクリプトをコピーします
トラッキングコードは、一意の12文字の識別子です（例：aB3xYz9kLm2P）。コピーするスクリプトスニペットに埋め込まれているため、通常は個別に処理する必要はありません。
インストール方法
トラッキングを追加する最も簡単な方法はスクリプトタグです。Webサイトの<head>セクションに次のコードを追加します。
<script
defer
src="https://api.zenovay.com/z.js"
data-tracking-code="YOUR_TRACKING_CODE"
></script>
YOUR_TRACKING_CODEを実際のトラッキングコードに置き換えてください。
ReactおよびSPAフレームワークの場合は、同じスクリプトタグをindex.htmlまたはルートレイアウトに追加します。
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js"
></script>
次に、コンポーネントでグローバルzenovay関数を使用します。
// スクリプトが読み込まれた後にカスタムイベントを追跡する
function handleSignup() {
zenovay('track', 'signup_click', { plan: 'pro' });
}
Next.jsの場合は、_app.tsxまたはlayout.tsxにスクリプトを追加します。
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html>
<head>
<Script
defer
src="https://api.zenovay.com/z.js"
data-tracking-code="YOUR_TRACKING_CODE"
/>
</head>
<body>{children}</body>
</html>
)
}
バンドラーを使う場合は、スクリプトタグの代わりに@zenovay/tracker npmパッケージをインストールしてください。ワイヤーフォーマットはスクリプトタグのインストールと同一です。
npm install @zenovay/tracker
import { init, track } from '@zenovay/tracker';
init('YOUR_TRACKING_CODE');
// 任意のコンポーネントやハンドラーから:
track('Signup clicked', { source: 'hero' });
@zenovay/tracker v0.1.0+として公開済みです。この方法も上記のスクリプトタグ版もどちらも完全にサポートされています。ご自身のスタックに合うほうを選んでください。
スクリプトオプション
追加のデータ属性を使用してトラッキングの動作をカスタマイズできます。
| 属性 | 説明 | デフォルト |
|---|---|---|
data-tracking-code | 一意のトラッキングコード（必須） | - |
data-api-url | カスタムAPIエンドポイントURL | https://api.zenovay.com |
data-debug | コンソールでデバッグモードを有効化 | false |
data-ignore-dnt | Do Not Trackをオーバーライドして追跡します | false |
data-allow-localhost | localhostでトラッキングを有効にします | false |
data-heartbeat | 定期的なハートビートピングを送信します | true |
data-track-outbound | アウトバウンドリンククリックを追跡します | false |
data-silent | すべてのコンソール出力を抑制します | false |
DNT（Do Not Track）およびGPC（Global Privacy Control）はデフォルトで尊重されます。これを有効にするために属性は必要ありません。この動作をオーバーライドする必要がある場合のみdata-ignore-dnt="true"を使用してください。IP匿名化やプライバシーモードなどの他のプライバシー設定は、ダッシュボードの設定で構成されます。
オプション付きの例
<script
defer
src="https://api.zenovay.com/z.js"
data-tracking-code="YOUR_TRACKING_CODE"
data-debug="true"
></script>
ファーストパーティトラッキング
Scale プラン広告ブロッカーに強いトラッキングの場合は、独自のドメインからスクリプトを提供してください。以下のカスタムドメイン（CNAME）設定にはScaleまたはEnterpriseプランが必要です。
CNAMEレコードを追加する
サブドメイン（例：
analytics.yourdomain.com）をproxy.zenovay.comに指すCNAME DNSレコードを追加します。スクリプトURLを更新する
スクリプトソースを変更してサブドメインを使用します。
<script defer src="https://analytics.yourdomain.com/z.js" data-tracking-code="YOUR_TRACKING_CODE" ></script>DNS伝播を待つ
DNS変更の完全な伝播には最大48時間かかる場合があります。
ファーストパーティトラッキングにより、訪問者が広告ブロッカーやプライバシー拡張機能を使用している場合でも、アナリティクスが機能することが保証されます。
インストールの確認
スクリプトを追加した後：
- 新しいブラウザタブでWebサイトを開きます
- ブラウザのDevTools（F12）を開き、ネットワークタブに移動します
- 「zenovay」または「tracker」でフィルタリングします
- Zenovay APIへのリクエストが行われているはずです
または、ダッシュボードでLive Viewタブを選択して、訪問がリアルタイムで表示されるのを確認してください。
トラブルシューティング
スクリプトが読み込まれていませんか？
- スクリプトが
<head>セクション内にあることを確認します - ブラウザコンソールでJavaScriptエラーを確認します
- トラッキングコードが正しいことを確認します
- Content Security Policy（CSP）の問題がないことを確認します
次のステップ
- インストールを確認するすべてが正常に機能することを確認するために
- カスタムイベントを追跡する重要なユーザーアクション用
- ゴールを設定するコンバージョンを測定するために