On this page

For AI agents: a documentation index is available at /docs/llms.txt. Append .md to any page URL for markdown, or send Accept: text/markdown.

ページURLエンリッチメントプラグイン

ページURLエンリッチメントプラグインは、Browser SDKがamplitude.track()を通じて追跡するすべてのイベントに、ページURL関連のプロパティを自動的に追加します。この設定は自動キャプチャされたイベントには影響しません。このプラグインは、現在のページと前のページのナビゲーションに関するコンテキスト情報でイベントデータを充実させます。これにより、ユーザーのジャーニーとページの遷移を理解するのに役立ちます。

デフォルトで有効

Browser SDKバージョン2.x以降、自動キャプチャではデフォルトでこのプラグインが有効になります。カスタム構成が必要な場合や、自動キャプチャを完全に無効にした場合にのみ、手動でインストールしてください。

プラグインを使用する際は、以下の点に注意してください。

  • プラグインは有効にされるとページ変更の追跡を開始します。
  • セッションストレージは状態を維持するため、同じセッション内ではページが更新されても以前のページ情報が保持されます。
  • このプラグインは、従来の複数ページアプリケーションと単一ページアプリケーションの両方で動作します。
  • セッションストレージが使用できない場合でも、プラグインは機能しますが、以前のページの追跡には制限がある場合があります。

インストール

npmまたはyarnを使用して、npmレジストリからこのパッケージをインストールします。

bash
# npm
npm install @amplitude/plugin-page-url-enrichment-browser
# yarn
yarn add @amplitude/plugin-page-url-enrichment-browser

使用方法

自動キャプチャによりデフォルトで有効

Browser SDKバージョン2.xの自動キャプチャでは、このプラグインが自動的に有効になります。カスタム構成が必要な場合や、自動キャプチャを完全に無効にしている場合にのみ、以下の手動インストール手順を実行してください。

このプラグインはAmplitude Browser SDK上で動作し、ページURLエンリッチメントプロパティをすべてのイベントに追加します。このプラグインを使用するには、@amplitude/analytics-browserバージョンv2.0.0以降を使用する必要があります。

ページURLエンリッチメントを無効にする

自動のページURLエンリッチメントを無効にするには、autocapture.pageUrlEnrichmentをfalseに設定します。

typescript
import * as amplitude from "@amplitude/analytics-browser";
amplitude.init("YOUR_API_KEY", {
  autocapture: {
    pageUrlEnrichment: false,
  },
});

プラグインの手動インストール

カスタム設定が必要な場合や、自動キャプチャを完全に無効にしている場合は、プラグインを手動でインストールしてください。

1. Amplitudeパッケージのインポート

typescript
import * as amplitude from "@amplitude/analytics-browser";
import { pageUrlEnrichmentPlugin } from "@amplitude/plugin-page-url-enrichment-browser";

2. ページURLエンリッチメントプラグインのインスタンス化

このプラグインは、プラグインを設定するためのObject型のオプションパラメータを受け付けます。

typescript
const pageUrlEnrichment = pageUrlEnrichmentPlugin();

3. Amplitude SDKへのプラグインのインストール

typescript
amplitude.add(pageUrlEnrichment);

4. Amplitude SDKを初期化する

typescript
amplitude.init("API_KEY");

イベントプロパティ

このプラグインは、すべてのイベントに次のプロパティを追加します。

プロパティ概要
[Amplitude] Page DomainWebサイトのホスト名（location.hostname）です。
[Amplitude] Page LocationWebサイトの完全なURL（location.href）です。
[Amplitude] Page PathWebサイトのパス名（location.pathname）です。
[Amplitude] Page TitleWebサイトのタイトル（document.title）です。タイトルをマスクするには、<title>エレメントにdata-amp-mask属性を追加します。
[Amplitude] Page URLクエリパラメータを除いたウェブサイトの URL です。
[Amplitude] Previous Page Locationユーザーが以前訪問したページの URL。
[Amplitude] Previous Page Type前のページタイプの分類です。

前のページタイプ分類

[Amplitude] Previous Page Typeプロパティは、次のロジックに基づいて前のページを分類します。

  • direct：前のページやリファラーがない（ユーザーが直接サイトを訪問）。
  • internal：前のページが同じドメイン（同じホスト名）から来ている。
  • external：前のページが別のドメインから来ている。

プラグインの仕組み

ページURLエンリッチメントプラグイン:

  1. ページ変更の追跡：pushState、replaceStateおよびpopstateなどのナビゲーションイベントを監視し、シングルページアプリケーションでのページ変更を検出します。
  2. ナビゲーション履歴を保存:セッションストレージを使用して、ページナビゲーション全体で現在および前のページのURLを維持します。
  3. すべてのイベントを強化:ブラウザSDKが追跡するすべてのイベントにページURLプロパティを追加します。
  4. 既存のプロパティの保持：イベントにページのURLプロパティがすでに存在する場合、プラグインは既存の値を保持します。

ページタイトルのマスキング

ページURLエンリッチメントプラグインは、ページの<title>エレメント上のdata-amp-mask属性を通して、ページタイトルのマスキングをサポートしています。この属性は、あなたがユーザーに対してページタイトルを隠しており、そのマスクされた値を[Amplitude] Page Titleプロパティで使用したいことをプラグインに伝えます。

例えば：

html
<head>
  <!-- Masked page title
  This page title is fully masked in the `[Amplitude] Page Title`
  of all events enriched by the Page URL Enrichment plugin on this page
  Page title: "*****"
  -->
  <title data-amp-mask>Private Dashboard For John Doe</title>
</head>

ページURLエンリッチメントプラグインは、このプラグインがエンリッチメントするすべてのイベントにおいて、実際のページタイトルをマスク値（*****）に置き換えます。

セッションストレージ

このプラグインはセッションストレージを使用して、ページの変更後もナビゲーション情報を保持します。 プラグインは次のキーを使用してデータを保存します：

  • AMP_URL_INFO：現在および前のページのURLを保存します。

セッションストレージを使用すると、同じセッション内で単一ページのアプリケーションナビゲーションまたはページ更新が行われる間も、以前のページ情報が確実に保持されます。

例

ページURLエンリッチメントプラグインを設定する方法の完全な例を次に示します：

typescript
import * as amplitude from "@amplitude/analytics-browser";
import { pageUrlEnrichmentPlugin } from "@amplitude/plugin-page-url-enrichment-browser";
// Create the plugin instance
const pageUrlEnrichment = pageUrlEnrichmentPlugin();
// Add the plugin to Amplitude
amplitude.add(pageUrlEnrichment);
// Initialize Amplitude
amplitude.init("YOUR_API_KEY");
// Track an event - it automatically includes page URL properties
amplitude.track("Button Clicked", {
  button_name: "Sign Up",
});

追跡イベントには次のようなプロパティが含まれます：

json
{
  "event_type": "Button Clicked",
  "event_properties": {
    "button_name": "Sign Up",
    "[Amplitude] Page Domain": "example.com",
    "[Amplitude] Page Location": "https://example.com/signup?utm_source=google",
    "[Amplitude] Page Path": "/signup",
    "[Amplitude] Page Title": "Sign Up - Example",
    "[Amplitude] Page URL": "https://example.com/signup",
    "[Amplitude] Previous Page Location": "https://example.com/home",
    "[Amplitude] Previous Page Type": "internal"
  }
}

Was this helpful?