メインコンテンツへスキップ
無料5 minutes初級

ウェブサイトにトラッキングスクリプトをインストールする方法は?

あらゆるウェブサイトにZenovayを追加する5ステップのチェックリスト — トラッキングコードを取得し、スクリプトタグを貼り付け、デプロイし、確認し、 イベントが流れていることを確かめます。

installquickstartscriptchecklistfirst-time
最終更新日:

Zenovayトラッカーは1つの<script>タグです。あらゆるウェブサイトに追加するのは5ステップのプロセスです。

5つのステップ

  1. トラッキングコードを取得

    app.zenovay.comにサインインします。まだサイトを追加していない場合は、サイトを追加をクリックします — ウィザードの最後にあなたのスニペット(トラッキングコードはすでに入力されています)が表示されます。

    すでに追加したサイトの場合は、ドメインから開き、設定に移動して一般タブを選択します。コピー可能なスニペットはトラッキングスクリプトセクションの下にあります。トラッキングコードはaB3xK9mP2qR7のような12文字の文字列です。

  2. サイトのHTML headにスクリプトタグを貼り付け

    デフォルトのインストールは、各ページの<head>セクションに1つのタグを置きます:

    <script
      defer
      src="https://api.zenovay.com/z.js"
      data-tracking-code="YOUR_TRACKING_CODE"
    ></script>
    

    YOUR_TRACKING_CODEをステップ1の値に置き換えます。

  3. 変更をデプロイ

    正確なデプロイステップはプラットフォームによって異なります — コミットをプッシュ、CMSでSaveをクリック、またはノーコードサイトを再公開します。実際のドメインで変更がライブになるまで(ステージングだけでなく)待ちます。

  4. サイトを訪問してLiveタブを見る

    シークレットウィンドウでサイトを開きます。30秒以内に、訪問が正しい位置情報とともにZenovayダッシュボードのLiveタブに表示されるはずです。

  5. 何も表示されない場合 — 診断

    60秒経っても訪問が表示されない場合、最初のイベントが表示されないでインストールをチェックします。最も一般的な原因は:トラッキングコードの不一致、テストブラウザの広告ブロッカー、localhostでのテストです。

プラットフォーム別ガイド

スタックに合うページを選択してください:

プラットフォームガイド
WebflowWebflowにインストール
WordPressWordPressとの統合
ShopifyShopifyとの統合
Next.jsNext.jsとの統合
React(Create React App、Viteなど)Reactとの統合
VueVueとの統合
Google Tag ManagerGTM経由でインストール
その他カスタムフレームワーク

スクリプトタグを置く場所

スクリプトタグは、トラッキングしたい各ページの<head>に置きます。正確な場所はプラットフォームによって異なります:

  • 手書きHTML<head>内、</head>の直前
  • WordPress — テーマのheader.phpまたはwp_headアクション経由
  • Shopifytheme.liquid</head>の直前
  • Next.js — ルートレイアウトの<Script>strategy="afterInteractive"付き
  • Webflow — Site settings → Custom code → Head code
  • GTMAll Pagesトリガー付きカスタムHTMLタグ

defer属性が行うこと

deferはブラウザに次のように指示します:「このスクリプトはページのパース中に読み込み、パース完了まで実行しないでください」。これは、トラッカーがページのレンダリングをまったく遅くしないことを意味します — Lighthouseスコアはきれいなままです。

必要ないもの

以下は不要です:

  • npmパッケージのインストール(バンドラーを使用しない限り — npmインストールを参照)
  • Zenovayのためだけにクッキーバナーを追加(クッキーレスモードがデフォルト — クッキーバナーが必要ですかを参照)
  • プライバシーポリシーエントリの設定(推奨ですが、トラッカーは無くても動作します)
  • 厳格なCSPがない限り、CSPで何かをホワイトリスト化 — その場合はhttps://api.zenovay.comscript-srcconnect-srcで許可します

関連情報

この記事は役に立ちましたか?