# Home

### はじめに

{% hint style="info" %}
ヒートマップ機能は、**スマートヒートマップ**へとリニューアルされました！

UIや機能が大きく変わっているため、初めてご利用の方も、以前ご利用の方もぜひ本記事をご確認ください。

***

<img src="https://helps.ptengine.com/~gitbook/image?url=https%3A%2F%2F4061457514-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FgRz7WrQwZOO6dfD8wRWy%252Fuploads%252FFrh4VVVUTVBcsIkk4XC3%252Fimage.png%3Falt%3Dmedia%26token%3D79320bb2-1c90-4cbf-bb71-a6d64ad04f90&#x26;width=300&#x26;dpr=3&#x26;quality=100&#x26;sign=5edafd34&#x26;sv=2" alt="" data-size="original">\
「内容が多くて、読むのが大変…」と感じたら、**タイトル右上の「∧」ボタン**を活用してください。AIがページの内容をわかりやすく説明してくれます！
{% endhint %}

### Ptengine：ウェブサイト分析・最適化の総合ツール

Ptengineは、Webサイトのユーザー行動を可視化・分析し、サイト改善を支援する専門ツールです。InsightとExperienceの2つのモジュールを通じて、包括的なWebサイト最適化ソリューションを提供します。

最新の製品紹介動画をどうぞご覧ください。

{% embed url="<https://www.youtube.com/watch?v=b4GsoFqLyo0>" %}

### Ptengineの包括的な機能とメリット

このツールを使うと、ウェブサイトの訪問者がどんな行動をとっているのか、どんな反応を示しているのかを詳しく調べることができます。 さらに、分析結果に基づいて実際の改善施策を実行することで、データドリブンなサイト最適化を実現できます。

#### Ptengine - Insigh&#x74;**（分析モジュール）**

**主要機能**

* **ヒートマップ**: ユーザーのクリック、スクロール、マウス動作を視覚化
* **セグメント分析**: 流入元、デバイス、地域などでユーザーを細分化して分析
* **コンバージョン追跡**: 目標達成までのユーザー行動を詳細に追跡
* **イベント計測**: ボタンクリック、フォーム入力などの特定アクションを計測

**得られるメリット**

* ✅ **問題箇所の特定**: ユーザーがつまずいているポイントを可視化
* ✅ **ユーザー理解の深化**: セグメント別の行動パターンを把握
* ✅ **改善優先度の明確化**: データに基づいた施策の優先順位付け
* ✅ **ROI向上**: 効果的な改善ポイントへの集中投資

#### **Ptengine - Experience（検証モジュール）**

**主要機能**

* **ABテスト**: 複数のバージョンを同時テストして最適解を発見
* **ページ編集（ノーコード）**: プログラミング不要でページを直接編集
* **Web接客の配信**: ポップアップやバナーでユーザーに適切なタイミングでアプローチ
* **リダイレクトテスト**: URL変更時の影響を事前検証

**得られるメリット**

* ✅ **迅速な施策実行**: 開発リソース不要で即座に改善施策を実施
* ✅ **リスク軽減**: ABテストによる事前検証で失敗リスクを最小化
* ✅ **パーソナライゼーション**: ユーザー属性に応じた最適な体験を提供
* ✅ **継続的改善**: 仮説検証サイクルの高速化

#### **統合活用による総合メリット**

🎯 **データドリブンな意思決定**: 推測ではなく実データに基づいた改善 📈 **コンバージョン率向上**: 分析→仮説→検証→実装のサイクル最適化

\
⚡ **スピーディな改善**: 分析から施策実行まで一つのプラットフォームで完結 💰 **コスト効率化**: 開発コストを抑えながら継続的なサイト改善を実現 🔄 **持続可能な成長**: 継続的な検証と改善による長期的なパフォーマンス向上

これにより、ウェブサイトの改善ポイントを発見するだけでなく、実際の施策実行を通じてビジネス成果の最大化を図ることができます。


# Ptengineとは

## Ptengine：ウェブサイト分析・最適化の総合ツール

Ptengineは、Webサイトのユーザー行動を可視化・分析し、サイト改善を支援する専門ツールです。InsightとExperienceの2つのモジュールを通じて、包括的なWebサイト最適化ソリューションを提供します。

最新の製品紹介動画をどうぞご覧ください。

{% embed url="<https://www.youtube.com/watch?v=b4GsoFqLyo0>" %}

## Ptengineの包括的な機能とメリット

このツールを使うと、ウェブサイトの訪問者がどんな行動をとっているのか、どんな反応を示しているのかを詳しく調べることができます。 さらに、分析結果に基づいて実際の改善施策を実行することで、データドリブンなサイト最適化を実現できます。

### Ptengine - Insight\*\*（分析モジュール）\*\*

**主要機能**

**ヒートマップ**: ユーザーのクリック、スクロール、マウス動作を視覚化

**セグメント分析**: 流入元、デバイス、地域などでユーザーを細分化して分析

**コンバージョン追跡**: 目標達成までのユーザー行動を詳細に追跡

**イベント計測**: ボタンクリック、フォーム入力などの特定アクションを計測 **得られるメリット**

✅ **問題箇所の特定**: ユーザーがつまずいているポイントを可視化

✅ **ユーザー理解の深化**: セグメント別の行動パターンを把握

✅ **改善優先度の明確化**: データに基づいた施策の優先順位付け

✅ **ROI向上**: 効果的な改善ポイントへの集中投資

### **Ptengine - Experience（検証モジュール）**

**主要機能**

**ABテスト**: 複数のバージョンを同時テストして最適解を発見

**ページ編集（ノーコード）**: プログラミング不要でページを直接編集

**Web接客の配信**: ポップアップやバナーでユーザーに適切なタイミングでアプローチ

**リダイレクトテスト**: URL変更時の影響を事前検証 **得られるメリット**

✅ **迅速な施策実行**: 開発リソース不要で即座に改善施策を実施

✅ **リスク軽減**: ABテストによる事前検証で失敗リスクを最小化

✅ **パーソナライゼーション**: ユーザー属性に応じた最適な体験を提供

✅ **継続的改善**: 仮説検証サイクルの高速化

### **統合活用による総合メリット**

🎯 **データドリブンな意思決定**: 推測ではなく実データに基づいた改善 📈 **コンバージョン率向上**: 分析→仮説→検証→実装のサイクル最適化

⚡ **スピーディな改善**: 分析から施策実行まで一つのプラットフォームで完結 💰 **コスト効率化**: 開発コストを抑えながら継続的なサイト改善を実現 🔄 **持続可能な成長**: 継続的な検証と改善による長期的なパフォーマンス向上

これにより、ウェブサイトの改善ポイントを発見するだけでなく、実際の施策実行を通じてビジネス成果の最大化を図ることができます。


# Insightとは

ヒートマップ、セグメント分析、コンバージョン追跡、イベント計測などを通じて、ウェブサイト上でのユーザー行動を詳細に可視化・分析し、改善すべきポイントを発見するための分析モジュールです。

## **主な機能**

### データセンター

**流入元やデバイス、地域など、Webサイトに関する様々なデータを確認できます**。豊富なダッシュボードを備えており、それぞれ異なる視点からデータを分析可能です。\
また、期間を指定することで、運用指標のトレンドや異常を詳細に把握できます。\
※ご契約プランにより、データの保存期間が異なります。

### ヒートマップ

特定のページにおけるユーザーの閲覧行動を視覚化するツールです。Ptengineでは、以下の3種類のヒートマップ機能を提供しています：

1. クリックヒートマップ
2. アテンションヒートマップ
3. 分析ヒートマップ

{% hint style="info" %}
2026年以降、AIヒートマップのリリースに伴い、上記3種類のヒートマップが**統合**され、ヒートマップ機能が大きく刷新されます。
{% endhint %}

### イベントとコンバージョン

特定の目標に基づいてユーザーの行動をトラッキングする機能です。イベントは、特定のページ上で監視したいボタンや要素を設定・追跡することで、コンバージョンは、ユーザーが複数のページやイベントを経由して行う行動（例：離脱状況など）を数値化するものです。

## 期待される効果

各機能を組み合わせて使用することで、より深いインサイトを得ることができます。\
例えば、データセンターで特定のページのパフォーマンスが低いことを発見したら、そのページのヒートマップを確認して、ユーザーの行動パターンを分析することができます。

機能の使い方など、詳細については各ページをご参照ください。


# Experienceとは

ABテスト、ノーコードページ編集、Web接客配信、リダイレクトテストなどを通じて、分析結果に基づいた改善施策を実際に実行し、ウェブサイトのパフォーマンス向上を実現するための施策実行モジュールです。

## **主な機能**

1. A/Bテスト
2. リダイレクトテスト
3. ノーコード or ローコードでのページ編集
4. ポップアップや追従バナーの配信
5. パーソナライズ配信

## 期待される効果

#### 即時的な効果

* サイトの問題点を素早く特定
* ユーザーの行動パターンを把握
* 改善ポイントの明確化

#### 長期的なメリット

* コンバージョン率の向上
* ユーザー満足度の改善
* サイト最適化の継続的な実現


# Ptengine Assistant

## Ptengine Assistantとは

Ptengine Assistantは、ヒートマップを確認する際に利用を推奨している拡張機能です（開発元：Ptmind）。

## Ptengine Assistantの用途

主に、以下二つのケースでご利用いただけます。

### デバイスを切り替える場合

Webビューヒートマップにおいて非レスポンシブページを確認する際に、ツールバーからデバイスを切り替えるだけではページ内容及びヒートマップの結果が正しく表示されません。

Ptengine Assistantを利用しない場合は、手動でUA偽装をしてヒートマップを確認する必要があり非常に不便です。Ptengine Assistantを利用すれば、拡張機能をインストールするだけでUA情報をコントロールし、適切なページ内容が表示できます。

### Iframe埋め込み禁止サイトの場合

Webビューヒートマップは、計測タグが設置されているサイト上にIframeを埋め込むことで、Webビューの描写を実現しています。そのため、当該サイトが他サイトからのIframe埋め込みを拒否するように設定されている場合、表示エラーとなります。

このような場合、Ptengine Assistant拡張機能を利用すれば、サイト側の対応は必要なく、Ptengine AssistantをインストールするだけでWebビューが正常に描写されます。

## インストール方法

1. [Chromeウェブストア](https://chromewebstore.google.com/detail/ptengine-assistant/camilcgaojjnemdajaipbjjkehleclnf?hl=ja)より拡張機能をインストールしてください
2. インストール完了後、画面右上の拡張機能アイコンをクリックし、ピンアイコンからPtengine Assistantをブラウザに固定すると便利です

<figure><img src="/files/gwsL2YnnRufIkIh19HYm" alt="Chrome拡張バーにPtengine Assistantを固定"><figcaption></figcaption></figure>

{% hint style="info" %}
インストール完了後、Ptengineのページを更新してください。システムがプラグインを検出し、自動的に有効になります。
{% endhint %}

## 利用方法

インストール後、手動操作は不要です。ヒートマップにアクセスするとPtengine Assistantが自動的に動作します。


# Ptengine Kit

## Ptengine Kitとは

Ptengine Assistantの進化版、主にヒートマップの全画面キャプチャーを撮るための拡張機能です（開発元：Ptmind）。

{% hint style="success" %}
**なぜPtengine Assistantと統合しないか？**

Googleが拡張機能に対する制限が厳しくなったため、統合した状態でリリースできませんでした。

そのため、現在別々になっています。
{% endhint %}

## Ptengine Assistant と Ptengine Kitの比較

| Assistant                    | Kit              |
| ---------------------------- | ---------------- |
| ヒートマップ、Inlineエディターの開くスピードを加速 | スクリーンショット        |
| 素早くPtengineにログイン             | 素早くPtengineにログイン |
| 簡単にヒートマップの確認                 | 簡単にヒートマップの確認     |

## インストール方法

1. [Chromeウェブストア](https://chromewebstore.google.com/detail/ptengine-kit/aoaemnjgkappnciapncpgegedccejcdn?hl=ja)から拡張機能をインストールしてください
2. インストール完了後、画面右上の拡張機能アイコンをクリックし、ピンアイコンからPtengine Kitをブラウザに固定すると便利です

<figure><img src="/files/hbUBMg6WyFFpDjc5P8Dk" alt="Chrome拡張バーにPtengine Kitを固定"><figcaption></figcaption></figure>

{% hint style="info" %}
インストール完了後、Ptengineのページを更新してください。その後、Ptengine Kit拡張機能を使ってブラウザから直接ヒートマップをキャプチャすることもできます。
{% endhint %}

## 利用方法

1. Ptengineヒートマップ画面を開きます
2. ツールバーのキャプチャボタンをクリックすると、Ptengine Kitが自動的にページ全体のヒートマップをキャプチャします
3. キャプチャが完了したらダウンロードできます

<figure><img src="/files/LtHv0oIe7FCiGU84AoHz" alt="Ptengine Kit機能パネル"><figcaption></figcaption></figure>

関連ページ：[スクリーンショットの使い方](/insight/smart-heatmap/screenshot)


# クイックスタート

Ptengineを使い始めるための基本的なセットアップ手順をまとめています。プロジェクトの作成からタグの設置、コンバージョン設定まで、順番に進めていただくことでスムーズにご利用を開始できます。


# プロジェクト作成

## プロジェクトとは

Ptengineにおける「プロジェクト」とは、分析や施策の対象となるウェブサイト、またはそのグループを管理するための単位です。プロジェクトごとに専用の計測タグが発行され、データ計測やユーザー管理が行われます。

* プランに応じて、1つのプロジェクトで複数ドメインのサイトを登録可能
* 各プロジェクトごとに閲覧ユーザーや管理ユーザーを招待・設定可能

## 作成ガイド

初めて管理画面にログインすると、プロジェクト作成案内が表示されます。

![](/files/SFqEgXa1EFXqBPqdTzco)

### プロジェクト数について：

* 新プラン（2021年6月1日以降購入）：プロジェクト追加が無制限
* 旧プラン：プロジェクト追加はオプション扱い（詳細は<cs@ptmind.co.jp>まで）


# 基本タグの設置方法

### **基本タグとは**

Ptengineを利用するには、計測対象のページに特定のコードを設置する必要があります。このコードは「基本タグ」または単に「タグ」と呼ばれ、プロジェクトIDを含むJavaScriptコードです。

![](/files/HZ7qdxVANyIGgkjERWvL)

この基本タグをサイトに設置することで、数値データの収集やヒートマップを用いた顧客理解、さらにはポップアップやABテスト、パーソナライゼーションといった施策を一貫して実施できます。

導入は非常に簡単ですので、早速タグを設置し、Webサイトのユーザー体験とコンバージョン率の向上を目指しましょう！

### **タグの設置方法（推奨）**

タグは、サイトのHTMLに直接設置することが推奨されます。

ShopifyでPtengineを利用する場合は、HTMLに直接設置しないようにし、Shopifyの設定手順をご参照ください。

具体的な手順は以下の通りです：

{% stepper %}
{% step %}
**基本設定とタグ取得**

対象プロジェクトにアクセスし、「実装」ボタンをクリックします。または、プロジェクト名の横にある歯車アイコンから「基本設定とタグ取得」をクリックし、解析コードの設定に進んでください。

![](/files/f2ZRxcVfNudz0INX745D)
{% endstep %}

{% step %}
**基本タグをコピー**

基本タグをコピーします。ミスを防ぐため、コピーボタンの使用をお勧めします。

![](/files/Qb5giHbI86fDs27i4BVF)
{% endstep %}

{% step %}
**HTMLにアクセス**

計測したいサイトまたはページのHTMLにアクセスします。
{% endstep %}

{% step %}
**貼り付け**

`head`タグを見つけ、コピーしたタグをその中に貼り付けます。変更を保存し、ページを再読み込みしてください。
{% endstep %}
{% endstepper %}

## 🎦操作動画

{% embed url="<https://app.arcade.software/share/9Co1auPt7xkZweCU7ehH>" %}

### **【関連記事】**

HTMLに直接設置が難しい場合、[チラつき（フリッカー現象）](/faq/experience-edit/anti-flicker)が発生する可能性がありますのでご注意ください。


# プロジェクト名とドメイン設定

### プロジェクト名設定

「基本設定」→「プロジェクト」→「設定」からプロジェクト名と計測ドメインの変更が可能です。

![](/files/a7rPaVJSBf6sMqkq0SjO)

### ドメイン設定

「ドメイン」欄に計測対象サイトのドメインを入力します。

{% hint style="warning" %}
例：メインドメイン「mysite.com」を入力すると、「sp.mysite.com」や「report.mysite.com/category/」も計測対象になります。
{% endhint %}

「+追加」ボタンで複数のドメインを追加できます。

設定完了後は「保存」をクリックしてください。

### プロジェクトの削除 🗑️

プロジェクト名横の「削除」ボタンからプロジェクトを削除できます。

{% hint style="danger" %}
注意事項:

* 削除時にはパスワード入力が必要です。
* 削除するとプロジェクトの全データが消去され、設置済みの解析コードも無効化されます。
* 新しいプロジェクトを作成する場合は、解析コードの再設置が必要です。
  {% endhint %}

![](/files/uA2SNE1TFekbdafLy343)


# アカウント変更

### 作成者（オーナー）アカウントの変更方法

作成者（オーナー）アカウント変更機能は、プロジェクトの管理責任者である「作成者（オーナー）」の権限を、他のメンバーに引き継ぐための機能です。この操作は、現在の作成者のみが実行できます。

### よくある利用シーン

この機能は、以下のような状況で役立ちます。

* **担当者の変更:** プロジェクトの責任者が交代し、後任者に管理権限をすべて引き継ぐ場合。
* **担当者の退職・異動:** 現在の作成者が退職・異動するため、他のメンバーにオーナー権限を譲渡する場合。
* **管理体制の整理:** 組織変更などに伴い、実際の管理者に合わせてオーナー権限を整理したい場合。

{% hint style="danger" %}
重要：必ず作成者のメールアドレスでログインしてから操作を行ってください。
{% endhint %}

### 手順

1. 現在の作成者（オーナー）アカウントでログインします。
2. 画面右上の**歯車マーク**をクリックし、\*\*「メンバー管理」\*\*を選択します。
3. 権限を譲渡したいメンバーアカウントがリストに表示されていることを確認します。（もしメンバーでない場合は、先に追加してください）
4. 権限を譲渡したいメンバーの横にある\*\*「作成者（プロジェクトオーナー）に変更」\*\*をクリックします。
5. 確認のため、現在ログインしているアカウントのパスワードを入力し、変更を確定します。

{% hint style="warning" %}
今後、旧アカウント（メールアドレス）を使用しない場合は、そのメールアドレスの横にある「…」をクリックし、アカウントを削除してください。
{% endhint %}


# メンバー招待と権限付与

### チームメンバー管理とプロジェクト共有

Ptengineでは、チームメンバーやクライアントを招待し、プロジェクトの内容を共有することができます。これにより、効率的な協業と情報共有が可能になります。

![](/files/25b1KbR2xsoWvwjWzUKu)

### メンバー招待

【メンバー管理】の右上にある【メンバー招待】をクリックし、メールアドレスと付与する権限を選択し招待することができます。

### 権限の種類

Ptengineでは、以下の5つの権限レベルが用意されています：

1. **作成者**
   * 課金プラン管理
   * メンバー管理
   * プロジェクト設定
   * InsightとExperienceのフルアクセス
2. **管理者**
   * プロジェクト管理
   * メンバー招待
   * 公開者の権限を含む
3. **公開者**
   * 体験の公開
   * 編集者およびアナリストの権限を含む
4. **編集者およびアナリスト**
   * データ設定の管理
   * 体験の作成・編集（公開不可）
   * 閲覧者の権限を含む
5. **閲覧者**
   * 各種レポートの閲覧・分析

### 権限詳細

各権限レベルの詳細な機能アクセスについては、以下の表をご参照ください：

| モジュール      | 機能                 | 作成者 | 管理者 | 公開者 | 編集者 | 閲覧者 |
| ---------- | ------------------ | --- | --- | --- | --- | --- |
| プラン        | プランのアップグレードと変更     | ✅   | ❌   | ❌   | ❌   | ❌   |
|            | 契約解除               | ✅   | ❌   | ❌   | ❌   | ❌   |
|            | お支払い方法の設定          | ✅   | ❌   | ❌   | ❌   | ❌   |
| メンバー管理     | メンバーの招待            | ✅   | ✅   | ❌   | ❌   | ❌   |
|            | メンバー権限の変更          | ✅   | ✅   | ❌   | ❌   | ❌   |
|            | 作成者(プロジェクトオーナー)の変更 | ✅   | ❌   | ❌   | ❌   | ❌   |
| プロジェクト設定   | プロジェクト名の変更         | ✅   | ✅   | ❌   | ❌   | ❌   |
|            | プロジェクトドメインの設定      | ✅   | ✅   | ❌   | ❌   | ❌   |
|            | プロジェクトの削除          | ✅   | ❌   | ❌   | ❌   | ❌   |
| Insight    | ヒートマップのページ管理       | ✅   | ✅   | ✅   | ✅   | ❌   |
|            | イベントの管理            | ✅   | ✅   | ✅   | ✅   | ❌   |
|            | セグメントの保存           | ✅   | ✅   | ✅   | ✅   | ✅   |
| Experience | 体験の新規作成            | ✅   | ✅   | ✅   | ✅   | ❌   |
|            | 体験の配信、予約、公開        | ✅   | ✅   | ✅   | ❌   | ❌   |
|            | ユーザーセグメントの管理       | ✅   | ✅   | ✅   | ✅   | ❌   |

💡 各権限レベルは、下位レベルの権限をすべて含んでいます。例えば、公開者は編集者とアナリストの権限も持っています。

📌 作成者は最高レベルの権限を持ち、プロジェクトの全aspects管理が可能です。一方、閲覧者は主にレポートの閲覧と分析に限定されています。

🔒 適切な権限設定により、チームメンバーの役割に応じたアクセス制御が可能となり、セキュリティとプロジェクト管理の効率化が図れます。


# コンバージョン設定

{% hint style="success" %}
**コンバージョン(CV)とは**

ユーザーにサイト上で達成してほしい目標やアクションのことです。
{% endhint %}

## メリット

コンバージョン機能を利用することで、Webサイトの成果を数値で正確に把握できます。

どの施策が目標達成に貢献しているかを可視化し、サイト改善やマーケティング戦略の立案に役立つデータを取得できます。

## よくある利用シーン

この機能は、以下のようなビジネス上の重要な目標を計測する場面で役立ちます。

* **ECサイト：** 商品の購入完了
* **Webサービス：** 会員登録やトライアル申し込み
* **BtoBサイト：** お問い合わせや資料請求フォームの送信完了

## 設定方法

以下の動画をご覧ください。

{% embed url="<https://app.arcade.software/share/ooo3v69PAIDCr8fiMUxH>" %}

## コンバージョン管理画面でできること

1. **一覧確認：** 設定済みのコンバージョンがリストで表示されます。
2. **検索：** CV名で目的の設定を検索できます。
3. **有効/無効の切り替え：** 計測のON/OFFをスイッチで切り替えられます。
4. **新規設定：** 「新規CV設定追加」ボタンから新しいコンバージョンを設定します。
5. **編集・削除：** 既存の設定内容を編集したり、不要な設定を削除したりできます。

**【注意事項】**

* CV名は重複して設定できません。
* 設定を編集すると、編集前と後でデータが分離されます。（例：8月1日に編集した場合、編集前のデータは "0801Removed" という名称で保存されます）
* CVゴールやCVファネルの対象URLにUTMパラメータが付いていると、正しく計測できない場合があります。UTMパラメータが付いていないURLでの設定を推奨します。

{% hint style="warning" %}
UTM付きのURLで設定したい場合、[こちら](/developer/extended-api)の記事をご参照ください
{% endhint %}


# ビジュアルイベント設定

Ptengine Insightのビジュアルイベント設定は、ウェブサイトの画面を直接見ながら、特定のボタンのクリックなどを計測するための「イベント」を、プログラミングの知識なし（ノーコード）で設定できる機能です。

### よくある利用シーン

* **コンバージョン計測：** 「購入する」「資料請求」「お問い合わせ」など、重要なボタンのクリック数を計測したい時。
* **コンテンツ評価：** 特定の記事やバナー、ナビゲーションメニューなどがどれくらいクリックされているかを分析したい時。
* **UI/UX改善：** 複数のページに共通して設置されているボタンの利用状況をまとめて計測し、サイト改善のヒントを得たい時。

{% hint style="info" %}
ビジュアルイベントの詳しい設定手順については[ビジュアルイベント設定方法](/insight/event/setup)をご参照ください。

コードによるイベント計測については[カスタムイベントの設定方法](/experience/setting/custom-event-setup)をご参照ください。
{% endhint %}


# オンライン契約の支払方法

{% hint style="success" %}
**概要**

Ptengineの有料プランは、オンラインでの契約・購入をおすすめします。手続きをすぐに完了させることで、有料プランの機能を即座に利用開始できます。\
決済方法はクレジットカードとPayPalの2種類に対応しています。
{% endhint %}

## プラン選択画面の開き方

「プラン確認・購入」>>「プラン＆利用状況」 に移動し、画面の右上に「アップグレード」（プラン変更の場合は「プラン変更」になります）ボタンをクリックしますと、詳細プラン紹介ページへ遷移します。

![](/files/Mab36tWjfRJ6wwWBVfBy)

プラン紹介ページの中にそれぞれのプラン料金、利用可能の機能権限、データ保持期間、サポートサービスなどを比較しながら選ぶことができます。更に現在ご利用中のプラン情報も記載されています。

購入したいプランの列にある 「プラン選択」をクリックすると、詳細確認ページへ遷移し、以下のように月間PV数とモジュールを選択してください。

![](/files/OXUZ2aWvVVk4MdU3GBEk)

Tips：\
1\. プランの契約はプロジェクト単位となることをご了承ください。\
2\. プロジェクト作成者にしかプランを購入できないことをご了承ください。3. 購入履歴の確認方法について、Ptengineログインした後 「プラン確認・購入」 >> 「購入履歴」にて購入履歴（領収書）のご確認および印刷は可能です。

## クレジットカード決済

クレジットカード決済にて有料プランの購入手順についてご説明します。

次に支払い方法のところにクレジットカード情報を入れてオンラインサービス購入手続きを進めます。\
お客様が選択したプラン料金や契約期間をご確認の上、問題がなければ「購入」をクリックしてください。これで購入手続き完了です。\
![](/files/txMHh4cJEbyvlIia0fnR)![](/files/2KsAWpZr44egJBSEl4GL)

## Paypal決済

PayPal決済にて有料プランの購入手順についてご説明します。

お客様が選択したプラン料金や契約期間をご確認の上、問題がなければ「PayPalで支払う」をクリックしてください。

![](/files/y1tfSr6oGpOyrrIGmWXs)

下記のようなPayPalの決済画面が表示されます。

![](/files/4b3qLrIzUPhhXbmWbib0)

お客様が選択したプラン料金、契約期間について契約情報を画面の左側に確認することができます。契約内容をご確認の上、問題がなければ画面の右側にあるPayPalのログインフォームにお持ちのPayPal IDとパスワードを入力して、ログインして決済を行ってください。

決済完了後、以下のように購入完了画面が表示されます。

![](/files/TyXabIeGziOqyqoevrPz)

## **注意事項：**

多重決済が発生しない為、決済中にブラウザの「更新」や「戻る」操作を行わないでください。

また通信遅延により、決済成功後にも関わらず、お客様のレポート画面が無料版(及び、変更前のプラン)のままの表示になっている場合があります。

その場合、**同じ購入操作を再度行わずにしばらくお待ちいただくようにお願いいたします。**

それでも解決できない場合は弊社までお問い合わせください。<br>


# データ収集

本セクションでは、Ptengineがどのような方法でデータを収集しているか、またPtengineがどのようなデータを収集するかをご紹介します。\
同時に、データセキュリティについてもご説明いたします。

### Ptengineのデータ収集 <a href="#ptengine-de-shu-ju-cai-ji" id="ptengine-de-shu-ju-cai-ji"></a>

Ptengineのデータ収集は、非常にシンプルなコードによって実現されています。詳しくは基本コードの設定をご参照ください。その仕組みは下図のとおりです。

### Ptengineのデータディメンション <a href="#ptengine-de-shu-ju-wei-du" id="ptengine-de-shu-ju-wei-du"></a>

Ptengineのデータ収集は、大きく以下の3つのディメンションに分類されます。

* 訪問レベルのデータ：指標にはコードイベントとビジュアルイベントが含まれます。
* ページレベルのデータ：Ptengineはページパケットを解析し、ユーザーのデバイス情報や地理情報などを取得します。
* ユーザーレベルのデータ：ページ内でのユーザーのインタラクション行動、Cookie、デバイスID、パフォーマンスデータが含まれます。

### Ptengineのデータセキュリティ <a href="#ptengine-de-shu-ju-an-quan" id="ptengine-de-shu-ju-an-quan"></a>

* データの窃取対策：充実した運用チームにより、データが窃取されたり外部からアクセスされたりしないよう万全を期しています。
* データの保存：Ptengineは分散データベースを採用しており、データの安定性を確保しています。
* データの漏洩防止：各お客様の情報がいかなる第三者にも漏洩しないことを保証しています。


# ソリューション

Ptengineは、さまざまなビジネスタイプのウェブサイトに対して総合的なソリューションを提供しています。ただし、どのようなシーンであっても、Ptengineはフロントエンドサービスであり、ページ外のデータについては現在統計を提供することができません。

以下では、ECシーンを例にPtengineが提供する機能をご紹介します。

### ECシーンでのPtengineの活用方法 <a href="#dian-shang-chang-jing-xia-ru-he-shi-yong-ptengine" id="dian-shang-chang-jing-xia-ru-he-shi-yong-ptengine"></a>

### 越境ECのユーザージャーニー <a href="#kua-jing-dian-shang-de-yong-hulcheng" id="kua-jing-dian-shang-de-yong-hulcheng"></a>

ECシーンにおけるユーザーのジャーニーは通常以下のとおりです。

> 1. ランディングページに流入
> 2. ランディングページを閲覧し、ブランドの雰囲気を把握する（トップページを例に）
> 3. クリックまたは検索して商品一覧ページに入る
> 4. 気に入った商品を見つけ、商品詳細ページに入る
> 5. コンテンツを閲覧し、ニーズに合致し、カート追加行動を行う
> 6. 購入意向があり、決済ページに入り、注文を確定する
> 7. 支払いを決定し、注文の決済を行う

また、越境ビジネスにおけるユーザー心理を以下のように表現できます。

> 認知 - 興味 - 検討 - 行動

### 独自ドメインサイト運営でよくある課題 <a href="#du-li-zhan-yun-ying-zhong-chang-jian-de-wen-ti" id="du-li-zhan-yun-ying-zhong-chang-jian-de-wen-ti"></a>

* 各広告チャネルの新規獲得効果はどうか？どのチャネルの品質が高く、コンバージョン率が良いか？
* ユーザージャーニーのどの段階で、ユーザーが大量に離脱しているか？
* 大量のデータを取得したが、どうすればデータをユーザー行動に結びつけられるか？
* 決済段階で離脱したユーザーの原因をどう把握するか？
* 課題を見つけたが、コードがわからない場合にどう素早く修正を実現するか？
* アイデアを実装したが、本当に効果があるかをどう検証するか？

それでは、Ptengine単体でこれらの一連の課題をどのように解決するか見ていきましょう。

### ソリューション <a href="#jie-jue-fang-an-1" id="jie-jue-fang-an-1"></a>

**1.各チャネルの品質を確認する方法**

Ptengineのデータセンターには豊富なデータ情報が揃っていますが、データが多いからといって手が付けられないということはありません。Ptengineの各モジュールはそれぞれの役割を担い、各種データを整然と表示します。

まず、データセンターでユーザーソースの構成を素早く把握できます。

広告チャネルに注目した後、広告モジュールで各広告チャネルの品質を詳細に観察できます。

**2.主要ポイントにおけるユーザーのコンバージョン率を把握する**

イベントに基づいて、コンバージョンファネルで各段階のコンバージョン状況を素早く把握し、最適化の余地を見つけることができます。\ <br>

**3.ページ内でのユーザー行動を直感的に観察する**

Ptengineはヒートマップ分野のパイオニアであり、業界をリードする多次元ヒートマップを提供しています。これにより、ユーザーのあらゆる注目ポイントを素早く把握できます。\\

<br>

**4.離脱ポイントとコンバージョンポイントでユーザーにアプローチする**

前述のデータ分析により、ユーザーの離脱段階とキーページでのペインポイントを概ね特定できます。\
サードパーティツールは一切不要で、PtengineのExperienceが、パーソナライズ性の高いポップアップやフローティングバー機能をお客様に提供します。<br>

**5.ノーコードページ編集**

Ptengineでは、ページがどのような開発ツールで構築されていても、ノーコードでページ編集が可能です。アイデアを素早く実現できます。<br>

**6.A/Bテストで効果を検証する**

ポップアップやページ編集を公開する前に、施策が本当に効果があるかを科学的に検証するため、A/Bテストでトラフィックを素早く振り分けて検証できます。<br>

**上記のフローにより、越境ECシーンに基づく運用のPDCAサイクルが1回完了します。課題の発見から施策の実行まで、必要なのはPtengineとあなただけです！**<br>

**Ptengineがどのようにこれらのデータを取得しているのか気になるかもしれません。次のセクションでは、Ptengineのデータソースについて詳しくご説明します。**


# その他のタグ設置方法

基本タグの設置方法以外に、各種タグマネージャーやCMSを利用したタグ設置方法をご紹介します。


# Google Tag Manager でタグ設置

### Ptengineの基本タグをGoogle Tag Manager (GTM) に実装する方法

🔍 GTMの利用確認

* ❗️ 対象サイトでGTMを利用しているか確認してください。
* 🚫 未設置の場合は、事前にGTMの登録・設置が必要です。
* 🔗 [タグマネージャーの設定とインストール](https://support.google.com/tagmanager/answer/6103696?hl=ja)ページを参照してください。

## **クイック設置の手順**

{% stepper %}
{% step %}
「実装」ボタンをクリック（製品ページ）

![](/files/f2ZRxcVfNudz0INX745D)
{% endstep %}

{% step %}
「Google Tag Managerでクイック設置」を選択

![](/files/S7deA8HYOIXJYvAM3Ies)
{% endstep %}

{% step %}
GTMに紐づくGoogleアカウントを選択

![](/files/ShWPwZhRYXvqpi4CttZ5)
{% endstep %}

{% step %}
Ptengineのアクセス情報を確認・続行

![](/files/Tl1ZRboDTqN5wMMq4FZ4)
{% endstep %}

{% step %}
GTMアカウントとコンテナを選択・公開

![](/files/rXcncsNtB1epuffLCc8H)
{% endstep %}

{% step %}
設置状況の確認テストで完了を確認

![](/files/CG4AmNMkIIQfApQzVVsO)

![](/files/Dt44cV8od9XPLYhqMB4h)
{% endstep %}

{% step %}
GTMの自動設定項目を確認

![](/files/YNnszKLLSUYqjxBtqr91)

![](/files/zoITsc9vjRyx2X46xKXG)
{% endstep %}
{% endstepper %}

## **手動設置の手順**

💡 手動設置のメリット：設定箇所を細かく指定可能

以下の動画もご参照ください。

{% embed url="<https://app.arcade.software/share/iqKsSrn1TYhv6y4r1m8G>" %}

{% stepper %}
{% step %}
Ptengineからタグをコピー💡 製品ページまたは基本設定から取得可能

![](/files/S7deA8HYOIXJYvAM3Ies)

![](/files/oQle5UifqJnxCzjac3L3)
{% endstep %}

{% step %}
Google Tag Manager 内の「新しいタグを追加」をクリックしてください。

![](/files/T71XAUihtFxfTXv5m0vc)
{% endstep %}

{% step %}
「タグの設定」→「カスタムHTML」を選択

![](/files/fhXBqnID2jsVsNiRH9Bq)
{% endstep %}

{% step %}
コピーしたタグを貼り付け

![](/files/TtKQ4ZyTg77VD0NUCqlf)
{% endstep %}

{% step %}
トリガー設定🔧 All PagesまたはURL指定

![](/files/I93ohX96OWesqtD6vnoC)

![](/files/xMKu2uZOWG8urv1hA75i)

![](/files/WQAyBMK84GtdHfNPRX1z)
{% endstep %}

{% step %}
タグに分かりやすい名前を付けて保存

![](/files/APG0cgzkpSs0ZE3V3ypG)

![](/files/dTuQe5sfBv3MV9rIqtyS)
{% endstep %}

{% step %}
環境を「Live」に指定して公開

![](/files/aAcKn14TXguzXkvCaqIU)
{% endstep %}

{% step %}
Ptengineで設置確認テストを実行

![](/files/JuZ8M0bOtjZFUnaYZYao)

![](/files/Dt44cV8od9XPLYhqMB4h)

✅ 設置方法に関わらず、最後にPtengineで設置確認テストを実施し、正しく設置されたことを確認しましょう。
{% endstep %}
{% endstepper %}


# WordPressでタグ設置

WordPressを使用してPtengineの基本タグを実装できます。この方法は複数ページに個別に設置する必要がなく、効率的です。

### 推奨設定方法:

1. 「外観」→「テーマエディタ」を選択
2. Ptengineを設定したいテーマを選択
3. 「header.php」または「テーマヘッダー」を選択
4. 基本タグを発行し、タグの直前に配置
5. 「ファイルを保存」をクリックして完了

![](/files/DVmdD8V86sTPnKVlDdZz)

### 代替設定方法

テーマによってはヘッダーやフッターの編集が制限されている場合があります。その場合は以下の方法をお試しください：

{% stepper %}
{% step %}
プラグイン「Insert Headers And Footers」をインストールし、有効化
{% endstep %}

{% step %}
左サイドバーの設定から「Insert Headers And Footers」を選択
{% endstep %}

{% step %}
ヘッダーセクションにPtengineの基本タグを挿入
{% endstep %}
{% endstepper %}


# Adobe Dynamic Tag Managerでタグ設置

Adobe社のDynamic Tag Manager (DTM)を使用してPtengineの解析コードを設置できます。GTMなどの他のタグマネージャーと同様の手順で設定可能です。

📌 重要な注意点: DTMでPtengineの解析コードを設置する際は、以下の設定に特に注意してください。

{% hint style="info" %}
順次HTML vs 非順次HTML ✅ 「順次HTML（同期処理）」を選択 ❌ 「非順次HTML（非同期処理）」は選択しない
{% endhint %}

💡 理由:

* Ptengineの解析コードは既に非同期処理に対応しています。
* DTMで非順次HTMLを選択すると、解析コードが正常に機能せず、データが正しく集計されない可能性があります。

詳細:

* 非順次HTML: ページの他のファイルと並行してロードされ、ローディング時間を短縮できます。
* しかし、Ptengineコードは既に最適化されているため、DTMでの追加の非同期設定は不要で、むしろ問題を引き起こす可能性があります。

✅ 正しい設定手順:

1. DTMでPtengineの解析コードを追加
2. 「順次HTML（同期処理）」オプションを選択
3. その他の設定を行い、保存

これらの手順に従うことで、Ptengineの解析コードが正常に機能し、正確なデータ集計が可能になります。


# ペライチでタグ設置

本記事はペライチを利用されている方向けの設置マニュアルです。

1. ペライチのページ情報編集（歯車マークをクリック）\
   ![](/files/IYGO7P2WzYWwYTqS39bI)\
   引用元：『安心してください。Ptengineが引き続きペライチでも使えます。』, エクラ
2. タグの埋め込みの箇所の 【headタグ内の埋め込み】に、タグを貼り付けます。\
   ![](/files/CP5VgBFXxRo8kmVMZcUN)\
   引用元：『安心してください。Ptengineが引き続きペライチでも使えます。』, エクラ
3. 貼り付けたら、同じページの下にある保存ボタンを押してください。


# Shopifyでタグ設置

> Shopifyアプリとの連携設定については[Shopify連携](/integrations/shopify)もご覧ください。

## 基本タグの設置

### 1. theme.liquidテンプレートを見つける

Shopify管理画面で「Online Store」→「Themes」を選択し、「…」ボタンから「Edit code」を選択

### 2. \<head>の下にptengineの基本タグを設置

下記画像右側の赤枠の部分に、Ptengineの基本タグを貼り付けてください。

#### **基本タグの一例**

```js
<!-- Ptengine Tag -->
<script src="https://js.ptengine.com/xxxxxxxx.js"></script>
<!-- End Ptengine Tag -->
```

{% hint style="danger" %}
**⚠️注意**

上記xxxxxxxxの部分はプロジェクトのIDであり、Ptengineのプロジェクトごとに異なります。

自社プロジェクトのIDと書き換えてください。

詳しくは[こちらの記事](https://ptmind-1.gitbook.io/ptengine-helpcenter/start-guide/quick/tag-setting)をご参照ください。
{% endhint %}

#### **Ptengineの基本タグの取得方法**

{% embed url="<https://app.arcade.software/share/9Co1auPt7xkZweCU7ehH>" %}

## イベントの設置

上記基本タグを設置するのみで、**購買完了、カートイン**などECサイトでよくある行動データの集計ができません。

そのため、Ptengine上でもイベントデータやCVデータを確認したい場合、イベントの設置もおすすめです。

### イベント収集タグの導入

#### 1、Shopify管理画面で「Settings」を選択

#### 2、「Customer events」を選択

#### 3、Pixel nameをつける

右上の黒いボタン「Add custom pixel」をクリックし、ポップアップの中でpixel nameを設定します。（下記図はサンプルとして「pt tracking on checkouts」という名前をつけております）

そしてAdd pixelをクリックしてください。

#### 4、保存

Codeに下記コードを貼り付けて、右上の「save」で保存します。

{% hint style="danger" %}
**⚠️注意**

**必ず**　`const sid`　**に自社PtengineのプロジェクトIDに置き換えてください！！！**
{% endhint %}

```js
// 貼り付け用コード
function trackEvent(eventType, eventProperties, cb) {
  const sid = "プロファイルidを入力してください";
  // プロジェクトIDを入れてください！
  const area = "jp";
  const options = eventProperties || {};

  loadPtengineScript(sid, area)
    .then(() => {
      console.log("ptengineスクリプトの読み込み完了");
      window.ptengine && window.ptengine.track(eventType, options);
      cb && typeof cb === "function" && cb();
    })
    .catch((error) => {
      console.error("ptengineスクリプトの読み込み失敗:", error);
    });
}

function loadPtengineScript(sid, area) {
  return new Promise((resolve, reject) => {
    if (window.ptengine) {
      // ptengineが既に存在する場合は即座にresolve
      resolve();
    } else {
      // /wpm@.../web-pixel-... と /web-pixels@.../custom/web-pixel-... の両方のサンドボックスパスに対応
      const url = window.location.href.replace(
        /\/(?:wpm|web-pixels)@[^/]+\/(?:custom\/)?web-pixel-[^/]+\/sandbox\/modern/,
        ""
      );
      window._pt_sp_2 = [];
      _pt_sp_2.push(`setAccount, ${sid}`);
      _pt_sp_2.push(`setPVTag,${url},replace`);

      const script = document.createElement("script");
      const isCheckoutPage = window.location.href.includes("checkouts");
      const sandboxQuery = isCheckoutPage ? "" : "?sandbox";
      script.src = `https://js.ptengine.${area}/${sid}.js${sandboxQuery}`;
      script.onload = () => resolve();
      script.onerror = () => reject(new Error("Script loading failed"));
      document.head.appendChild(script);
    }
  });
}

// null/undefined/'' の項目を送信しないように空値プロパティを除去
function removeEmptyKeys(obj) {
  for (let key in obj) {
    if (
      obj.hasOwnProperty(key) &&
      (obj[key] === null || obj[key] === undefined || obj[key] === "")
    ) {
      delete obj[key];
    }
  }
  return obj;
}

// 注文完了：注文単位の checkout_completed 1件 + 商品ごとに checkout_completed_order を1件ずつ送信
analytics.subscribe("checkout_completed", (event) => {
  const checkout = event?.data?.checkout;
  if (!checkout) return;

  // 注文の顧客ID（gid://shopify/Customer/xxx）から数値IDを抽出して uid とする
  const rawCustomerId = checkout?.order?.customer?.id;
  const numericCustomerId = rawCustomerId ? rawCustomerId.split("/").pop() : null;
  const uid = numericCustomerId;
  const totalPrice = checkout?.totalPrice?.amount;
  const currencyCode = checkout?.totalPrice?.currencyCode;
  const orderId = checkout?.order?.id;
  const items = checkout?.lineItems || [];

  // 1) identify：注文ごとに1回、注文情報をユーザープロファイルに書き込む
  if (uid) {
    window.ptengine &&
      ptengine.identify(uid, {
        totalPrice: totalPrice,
        totalorderid: orderId,
      });
  }

  // 2) track：注文単位の checkout_completed を1回だけ送信（商品明細は含めない）
  const eventProperties = removeEmptyKeys({
    totalPrice: totalPrice,
    currencyCode: currencyCode,
    totalorderid: orderId,
    productCount: items.length,
  });
  trackEvent("checkout_completed", eventProperties, () => {
    // 3) 商品明細：商品ごとに checkout_completed_order を1件ずつ送信。
    //    注文単位イベントと紐付けられるよう totalorderid を含める。
    //    この時点でスクリプトはロード済みのため、直接 track する
    items.forEach((item) => {
      const itemProperties = removeEmptyKeys({
        totalorderid: orderId,
        sku: item?.variant?.sku,
        name: item?.title,
        spu: item?.variant?.product?.type,
        id: item?.id,
        quantity: item?.quantity,
        price: item?.finalLinePrice?.amount,
        currencyCode: currencyCode,
      });
      window.ptengine && window.ptengine.track("checkout_completed_order", itemProperties);
    });
  });
});

analytics.subscribe("search_submitted", (event) => {
  const eventProperties = removeEmptyKeys({
    keyword: event?.data?.searchResult?.query,
    resultCount: event?.data?.searchResult?.productVariants?.length,
  });
  trackEvent("search_submitted", eventProperties);
});

analytics.subscribe("collection_viewed", (event) => {
  const eventProperties = removeEmptyKeys({
    id: event?.data?.collection?.id,
    name: event?.data?.collection?.title,
    productCount: event?.data?.collection?.productVariants?.length,
  });
  trackEvent("collection_viewed", eventProperties);
});

analytics.subscribe("product_viewed", (event) => {
  const origin = event?.context?.window?.origin || window.location.origin;
  const variant = event?.data?.productVariant;
  const eventProperties = removeEmptyKeys({
    sku: variant?.sku,
    name: variant?.product?.title,
    type: variant?.product?.type,
    spu: variant?.product?.type,
    price: variant?.price?.amount,
    currencyCode: variant?.price?.currencyCode,
    url: variant?.product?.url ? `${origin}${variant.product.url}` : undefined,
    imageUrl: variant?.image?.src,
  });
  trackEvent("product_viewed", eventProperties);
});

analytics.subscribe("product_added_to_cart", (event) => {
  const origin = event?.context?.window?.origin || window.location.origin;
  const merchandise = event?.data?.cartLine?.merchandise;
  const eventProperties = removeEmptyKeys({
    url: merchandise?.product?.url ? `${origin}${merchandise.product.url}` : undefined,
    name: merchandise?.product?.title,
    sku: merchandise?.sku,
    quantity: event?.data?.cartLine?.quantity,
    price: merchandise?.price?.amount,
    currencyCode: merchandise?.price?.currencyCode,
    spu: merchandise?.product?.type,
  });
  trackEvent("product_added_to_cart", eventProperties);
});

analytics.subscribe("product_removed_from_cart", (event) => {
  const origin = event?.context?.window?.origin || window.location.origin;
  const merchandise = event?.data?.cartLine?.merchandise;
  const eventProperties = removeEmptyKeys({
    url: merchandise?.product?.url ? `${origin}${merchandise.product.url}` : undefined,
    name: merchandise?.product?.title,
    sku: merchandise?.sku,
    quantity: event?.data?.cartLine?.quantity,
    price: merchandise?.price?.amount,
    currencyCode: merchandise?.price?.currencyCode,
    spu: merchandise?.product?.type,
  });
  trackEvent("product_removed_from_cart", eventProperties);
});

analytics.subscribe("cart_viewed", (event) => {
  const cart = event?.data?.cart;
  if (!cart) {
    trackEvent("cart_viewed");
    return;
  }
  const origin = event?.context?.window?.origin || window.location.origin;
  const lines = cart?.lines || [];
  if (lines.length) {
    lines.forEach((line) => {
      const merchandise = line?.merchandise;
      const eventProperties = removeEmptyKeys({
        totalQuantity: cart?.totalQuantity,
        url: merchandise?.product?.url ? `${origin}${merchandise.product.url}` : undefined,
        name: merchandise?.product?.title,
        sku: merchandise?.sku,
        spu: merchandise?.product?.type,
        quantity: line?.quantity,
        price: line?.cost?.totalAmount?.amount,
        currencyCode: line?.cost?.totalAmount?.currencyCode,
      });
      trackEvent("cart_viewed", eventProperties);
    });
  } else {
    trackEvent("cart_viewed", removeEmptyKeys({ totalQuantity: cart?.totalQuantity }));
  }
});

analytics.subscribe("checkout_started", (event) => {
  const checkout = event?.data?.checkout;
  const origin = event?.context?.window?.origin || window.location.origin;
  const checkoutItems = checkout?.lineItems;
  const totalPrice = checkout?.subtotalPrice?.amount;
  const currencyCode = checkout?.subtotalPrice?.currencyCode;

  if (checkoutItems && checkoutItems.length) {
    checkoutItems.forEach((item) => {
      const eventProperties = removeEmptyKeys({
        totalPrice: totalPrice,
        currencyCode: currencyCode,
        url: item?.variant?.product?.url ? `${origin}${item.variant.product.url}` : undefined,
        name: item?.variant?.product?.title,
        sku: item?.variant?.sku,
        spu: item?.variant?.product?.type,
        quantity: item?.quantity,
        price: item?.finalLinePrice?.amount,
      });
      trackEvent("checkout_started", eventProperties);
    });
  } else {
    trackEvent("checkout_started", removeEmptyKeys({ totalPrice, currencyCode }));
  }
});

analytics.subscribe("checkout_contact_info_submitted", () => {
  trackEvent("checkout_contact_info_submitted");
});

analytics.subscribe("checkout_address_info_submitted", () => {
  trackEvent("checkout_address_info_submitted");
});

analytics.subscribe("checkout_shipping_info_submitted", () => {
  trackEvent("checkout_shipping_info_submitted");
});

analytics.subscribe("payment_info_submitted", (event) => {
  const checkout = event?.data?.checkout;
  const eventProperties = removeEmptyKeys({
    totalPrice: checkout?.subtotalPrice?.amount,
    currencyCode: checkout?.subtotalPrice?.currencyCode,
  });
  trackEvent("payment_info_submitted", eventProperties);
});

```

#### 5、公開

最後に右上の「Connect」ボタンを押してStep4で設置したコードを公開します。

### イベントタグの発火タイミングについて

<table><thead><tr><th width="318.41796875">イベント名</th><th>発火タイミング</th></tr></thead><tbody><tr><td>search_submitted</td><td>検索機能を使用した際</td></tr><tr><td>collection_viewed</td><td>一覧ページを閲覧した際</td></tr><tr><td>product_viewed</td><td>商品詳細ページを閲覧した際</td></tr><tr><td>product_added_to_cart</td><td>カートに商品を追加した際</td></tr><tr><td>product_removed_from_cart</td><td>カートから商品を削除した際</td></tr><tr><td>cart_viewed</td><td>カートページを閲覧した際</td></tr><tr><td>checkout_started</td><td>Checkoutページへ遷移した際</td></tr><tr><td>checkout_contact_info_submitted</td><td>連絡先（メールアドレス）を入力した際</td></tr><tr><td>checkout_address_info_submitted</td><td>住所情報を入力した際</td></tr><tr><td>checkout_shipping_info_submitted</td><td>配送方法を選択した際</td></tr><tr><td>payment_info_submitted</td><td>支払い方法を選択した際</td></tr><tr><td>checkout_completed</td><td>支払いが完了した際（注文単位・1注文につき1件）</td></tr><tr><td>checkout_completed_order</td><td>支払い完了時の商品明細（商品単位・1注文内の商品ごとに1件、totalorderid で注文単位イベントと紐付け）</td></tr></tbody></table>

## 注意事項

ShopifyでPtengineをご利用いただく際は、以下の点を必ずご確認ください。

### **1. Ptengineの基本タグは「Shopifyのテーマ」に直接設置してください**

Ptengineの基本タグは、Shopifyのテーマ（theme.liquid）へ直接設置してください。

Google Tag Manager経由での設置は、Shopifyの仕様上イベント計測ができない場合がございます。

そのため、GTMなどなどのタグマネージャーの経由での設置は推奨しておらず、サポート対象外となります。

### **2. ページ単位の送信制限や条件追加をしないでください**

Ptengine の基本スクリプトをアレンジし特定ページのみで発火させることやURL条件などで発火を制限することを推奨しておりません。

その状態で発生したデータ計測の不具合については、原因調査やサポート対応ができかねますのでご了承ください。

### **3. テーマを変更した場合は、再度タグ設置が必要です**

Shopifyでは、テーマを変更すると theme.liquid の内容がリセットされます。

そのため、テーマの切り替えや新しいテーマの適用を行った場合、

新しいテーマにもPtengineの基本タグを再度設置してください。

タグを再設置しない場合、Ptengineの計測は行われませんのでご注意ください。


# Insight概要

Ptengine Insightは、Webサイトの**ユーザー行動を可視化・分析**するための専門ツールです。

## **主な機能**

### データセンター

**流入元やデバイス、地域など、Webサイトに関する様々なデータを確認できます**。豊富なダッシュボードを備えており、それぞれ異なる視点からデータを分析可能です。\
また、期間を指定することで、運用指標のトレンドや異常を詳細に把握できます。\
※ご契約プランにより、データの保存期間が異なります。

### ヒートマップ

特定のページにおけるユーザーの閲覧行動を視覚化するツールです。Ptengineでは、以下の5種類のヒートマップ機能を提供しています：

1. クリックヒートマップ
2. アテンションヒートマップ
3. 分析ヒートマップ
4. 比較ヒートマップ
5. 履歴ヒートマップ

### イベントとコンバージョン

特定の目標に基づいてユーザーの行動をトラッキングする機能です。イベントは、特定のページ上で監視したいボタンや要素を設定・追跡することで、コンバージョンは、ユーザーが複数のページやイベントを経由して行う行動（例：離脱状況など）を数値化するものです。

## 期待される効果

各機能を組み合わせて使用することで、より深いインサイトを得ることができます。\
例えば、データセンターで特定のページのパフォーマンスが低いことを発見したら、そのページのヒートマップを確認して、ユーザーの行動パターンを分析することができます。

機能の使い方など、詳細については各ページをご参照ください。


# Insight用語集

この記事では、Ptengine Insightで使用される主要な用語について解説します。

## 一覧表

{% tabs %}
{% tab title="基本設定" %}

* [指標](#id-13-toc-title)
* [フィルター](#id-14-toc-title)
* [セグメント](#id-15-toc-title)
* ​[ディメンション](#id-12-toc-title)
* [キーワード](#id-20-toc-title)
* [チャネルグループ](#id-21-toc-title)
* [プロジェクト](#id-22-toc-title)
* [ページグループ](/insight/data-center/content-page-group)
* [元のページ](#id-27-toc-title)
* [パラメータ除去後](#id-28-toc-title)
* [ヒートマップ](#id-29-toc-title)
* [クイックフィルター](#id-30-toc-title)
* [アドバンスフィルター](#id-31-toc-title)
  {% endtab %}

{% tab title="数値レポート" %}

* [ユニークユーザー(UU)](#id-0-toc-title)
* [ページビュー(PV)](#id-3-toc-title)
* [PV/UU](#id-4-toc-title)
* [クリック数](#id-5-toc-title)
* [訪問数](#id-1-toc-title)　　　　　　　[訪問数/UU](#id-2-toc-title)
* [新規（新規訪問数）](#id-6-toc-title)　[新規率](#id-7-toc-title)
* [再訪問（再訪問数）](#id-8-toc-title)　[再訪問率](#id-9-toc-title)​
* [平均ロード時間](#id-10-toc-title)​
* [平均滞在時間](#id-11-toc-title)​
* [直帰数](#id-16-toc-title) [直帰率](#id-17-toc-title)
* [離脱数](#id-18-toc-title) [離脱率](#id-19-toc-title)
* [入口ページ](#id-23-toc-title)
* [入口数](#id-24-toc-title) [入口率](#id-25-toc-title)
  {% endtab %}

{% tab title="イベント/コンバージョン" %}

* [コンバージョン（CV）](#id-32-toc-title)
* [CV回数](#id-33-toc-title)
* [CV率（コンバージョン・レート）](#id-34-toc-title)
* [ポジティブCV](#id-35-toc-title)
* [ネガティブCV](#id-36-toc-title)
* [CVの価値](#id-37-toc-title)
* [CVファネル](#id-38-toc-title)
* [イベント](#id-39-toc-title)
* [正規表現](#id-40-toc-title)
  {% endtab %}
  {% endtabs %}

### ユニークユーザー(UU) <a href="#id-0-toc-title" id="id-0-toc-title"></a>

指定した期間内で、サイトに訪問した人数を意味します。その期間、同一のユーザーが何度訪問した場合も1UUとしてカウントされます。\
同一ユーザーかどうかはユーザー情報（uid）で判断します。ユーザー情報（uid）が同じであれば同一ユーザーです。\
ユーザー情報（uid）はブラウザのcookieに保存されるため、ブラウザが変わるもしくはデバイスが変わると 別ユーザーとしてカウントされます。また、SafariではCookieが７日間保持のため、次回訪問までに7日以上の間があいた場合はCookieが削除され別の新規ユーザーとしてカウントされます。

### 訪問数 <a href="#id-1-toc-title" id="id-1-toc-title"></a>

サイトに訪問した回数です。セッション数とも言われます。\
1人のユーザーがサイトに訪問すると「1」訪問数とみなされます。\
ユーザーが一定の時間内行動しない場合はさらに「1」訪問が追加されます。

**Note：**&#x30E6;ーザーが一定の時間内行動しないの定義\
行動：クリック、スクロール、入力、ページの再読み込み、新しいページを開くなどの行動がされない場合\
時間：デフォルトの訪問タイムアウト時間は、PCもSPも5分（2021年1月11日含めそれ以降作成したプロジェクトの場合PCは30分）です。またその時間をカスタマイズすることもできます、詳細は[こちら](https://help.ptengine.jp/docs/session-timeout-setting/)へ

※上記時間以内に別の流入元（直接流入は除く）から訪問した場合、2回目の訪問とみなします。同一の流入であれば、新たに訪問数のカウントはしません。

### 訪問数/UU <a href="#id-2-toc-title" id="id-2-toc-title"></a>

1人当たりの平均訪問数です。

### ページビュー(PV) <a href="#id-3-toc-title" id="id-3-toc-title"></a>

ページが表示された回数です。\
表示とはページに組み込まれたPtengineの解析コードのJavaScript タグが1回ダウンロードされることを意味します。ダウンロードされるたびに1PVとしてカウントします。

### PV/UU <a href="#id-4-toc-title" id="id-4-toc-title"></a>

1人当たりのPV数です。

### クリック数 <a href="#id-5-toc-title" id="id-5-toc-title"></a>

PCの場合「マウスクリック」、スマホの場合「タップ」を計測された数を意味します。\
リンクの有無に関わらず計測し、連続的なクリック/タップでもカウントされます。\
スマートフォンやタブレットの場合、スワイプやピンチイン/アウトによるタップは、クリック数としてカウントされません。

### 新規（新規訪問数） <a href="#id-6-toc-title" id="id-6-toc-title"></a>

初めてプロジェクト内のサイトに訪問したユーザーの訪問数の合計です。\
プロジェクトサイト内で過去に訪問した履歴がない場合、新規訪問とみなします。\
過去に訪問したことがあった場合でも、ユーザーがcookieなどの情報を削除した場合、同一ユーザーとみなせなくなるため新規ユーザーとして計測されます。

### 新規率 <a href="#id-7-toc-title" id="id-7-toc-title"></a>

全体の訪問における新規訪問の割合です。\
新規率＝新規訪問数/全体の訪問数

### 再訪問（再訪問数） <a href="#id-8-toc-title" id="id-8-toc-title"></a>

Cookieの保存期間内（※）においてプロジェクト内のサイトに2回以上訪問したユーザーの訪問数です。\
再訪問数 ＝ 訪問数ー新規訪問数\
で計算されます。

（※）Ptengineの解析コードに触れた場合、ブラウザに対して永続的に消えないCookieを付与します。そのCookieを保持しているか、していないかによって「新規訪問」「再訪問」を分別しています。ただし、ITPの関係で、safariを利用しているユーザーについては過去7日間を基準に新規／再訪を区別しております。

### 再訪問率 <a href="#id-9-toc-title" id="id-9-toc-title"></a>

全体の訪問における再訪問の割合です。\
再訪問率＝再訪問数/全体の訪問数

### 平均ロード時間 <a href="#id-10-toc-title" id="id-10-toc-title"></a>

ページが表示されるまでの平均時間です。各ページの訪問リクエストからページロード完了までの時間を指しており\
平均ロード時間 = ページロード時間の総計／訪問数 で計算されます。\
ms=1000分の1秒　例）629ms＝0.629秒

### 平均滞在時間 <a href="#id-11-toc-title" id="id-11-toc-title"></a>

平均滞在時間には「サイト平均滞在時間」と「ページ平均滞在時間」の2種類があり、集計単位も活用目的も異なります。

#### サイト平均滞在時間（平均セッション時間）

集計単位：1回の訪問（セッション）。\
ユーザーがサイトに入ってから離脱するまでの、訪問全体の平均滞在時間を意味します。\
サイト平均滞在時間 = サイト全体の全セッション滞在時間の合計 / 総訪問数（セッション数）

集計の定義：1セッション = 訪問者がサイトを開いてから、30分間無操作／ページを閉じる／サイト外へ遷移した時点でセッション終了。\
例：1回の訪問でトップページを30秒＋詳細ページを90秒閲覧した場合、そのセッションの滞在時間は120秒としてサイト全体の合計時間に計上されます。

#### ページ平均滞在時間（ページ単位の平均滞在時間）

集計単位：ページビュー（PV）。\
ユーザーが特定の1ページに滞在した時間の平均を意味します。\
ページ平均滞在時間 = 該当ページの全PVの滞在時間の合計 / 該当ページの総PV数

#### 具体例で理解する

シナリオ：1回のセッションで、トップページ（40秒）→商品ページ（80秒）→決済ページ（60秒）と閲覧し、セッション合計は180秒。

1.サイト平均滞在時間：このセッションは180秒として計上され、全セッションの合計をセッション数で割ることで、ユーザーがサイト全体を回遊する平均時間を示します。

2.各ページの平均滞在時間：\
・トップページ：トップページを開いてから商品ページへ遷移するまでの間隔、つまり40秒のみを集計\
・商品ページ：開いてから決済ページへ遷移するまでの間隔、つまり80秒を集計\
・決済ページ：セッションの最終ページとして、ハートビートにより60秒の滞在を完全に計測

#### 分析での使い分け

サイト平均滞在時間で見るべきこと：

1.チャネルの質：同じチャネルで平均セッション時間が長いほど、流入の精度が高い\
2.サイト全体の体験：ナビゲーションやコンテンツのつながりがスムーズかどうか\
3.コンバージョンの見込み：セッション時間が長いほど、購入・リード獲得につながりやすい\
4.併用すべき指標：直帰率、平均ページビュー数（訪問あたりPV）と合わせて見ることを推奨

ページ平均滞在時間で見るべきこと：

1.ランディングページの質：トップページ／広告LPの滞在が短い = コンテンツと流入のミスマッチ\
2.コンテンツページの価値：記事や詳細ページの滞在が長いほど、ユーザーが熟読している\
3.離脱ポイントの特定：離脱率が高い＋ページ滞在が短い = ページに体験上の障害がある（読み込みが遅い、情報が煩雑など）\
4.改善の的確さ：該当の1ページだけを最適化すればよい（文言・画像・ボタン位置の調整）

#### よくある誤解

誤解1：ページ平均滞在時間 × 平均ページビュー数 = サイト平均滞在時間\
完全には一致しません。セッションの最終ページには遷移間隔がなく、Ptengineのハートビートによる補完計測でわずかな差分が生じるため、この式はあくまで近似の参考です。

誤解2：直帰セッション（1ページだけ見て離脱）はページ滞在時間に計上されない\
Ptengineは直帰ページの滞在時間もすべて計測し、ページ指標として正常に集計します。サイトのセッション時間にもその訪問は完全に計上されます。

指標の使い分け：\
・サイト全体の魅力を評価したい場合：【サイト平均滞在時間】を見る\
・どのページでユーザーが離れているかを特定したい場合：【ページ平均滞在時間】を見る

### ディメンション <a href="#id-12-toc-title" id="id-12-toc-title"></a>

本来、サイズや色などの特性を示す言葉ですが、Web解析ではソース、デバイス、地域といったユーザーの性質を指します。

### 指標 <a href="#id-13-toc-title" id="id-13-toc-title"></a>

ページビュー数、訪問数、滞在時間といったユーザーの行動を計測する数値のことです。

### フィルター <a href="#id-14-toc-title" id="id-14-toc-title"></a>

特定の条件を絞り込んで分析できる機能です。例えば、スマートフォンのみのPVや訪問数をみたい時などに活用できます。

### セグメント <a href="#id-15-toc-title" id="id-15-toc-title"></a>

特定のセッションやユーザーを1つのグループにできる機能です。セグメントでは一部のデータを分解して分析することができます。例えば、キャンペーンチャネルにセグメントをかけることで、どの広告でコンバージョンが上がっているかを確認できます。

### 直帰数 <a href="#id-16-toc-title" id="id-16-toc-title"></a>

直帰訪問数とは、流入したページでそれ以外のページに遷移せず離脱(訪問終了)した訪問の合計です。

### 直帰率 <a href="#id-17-toc-title" id="id-17-toc-title"></a>

直帰訪問数/総訪問数のことを指します。\
直帰訪問数とは、流入したページでそれ以外のページに遷移せず離脱(訪問終了)した訪問の合計です。

**Note：**&#x47;oogle AnalyticsよりPtengineの方が直帰率が高くなりやすい理由\
ユーザーがサイト上で一定時間全く行動をしなかった場合、訪問終了したとみなします。 \
計測ツールにより訪問終了までの時間制限が異なります。

■Ptengineの場合\
デフォルトでPC：5分（2021年1月11日含めそれ以降作成したプロジェクトの場合PCは30分）、SP：5分\
※2022年1月現在アクティブ中のプロジェクトでは一訪問の制限時間を設定することが可能です。詳しくは[こちら](https://help.ptengine.jp/docs/session-timeout-setting/)

■Google Analyticsの場合 \
PC、SPともに30分\
そのためPtengineの場合スマホに関してはGoogle Analyticsよりも判定を厳しくなっており、直帰率が高くなりやすいです。

### 離脱数 <a href="#id-18-toc-title" id="id-18-toc-title"></a>

離脱数とは、当ページにおいて、訪問の最後のページとして閲覧された回数を意味しており、当ページを最後に訪問が終了したということになります。

### 離脱率 <a href="#id-19-toc-title" id="id-19-toc-title"></a>

離脱数/該当ページのPV数のことです。\
離脱数とは、当ページにおいて、訪問の最後のページとして閲覧された回数を意味しており、当ページを最後に訪問が終了したということになります。

### キーワード <a href="#id-20-toc-title" id="id-20-toc-title"></a>

サイトにアクセスした際に、検索エンジンで検索されたキーワードのことです。\
検索クエリともいいます。

### チャネルグループ <a href="#id-21-toc-title" id="id-21-toc-title"></a>

ルールに基づいてトラフィックをグループに分けたものです。Ptengineでは、デフォルトチャネルに参照サイト、検索エンジン、ソーシャル、ノーリファラー、キャンペーンがあり、トラフィックソースを指定してチャネルをカスタムすることもできます。カスタムチャネルについてはこちら

### プロジェクト <a href="#id-22-toc-title" id="id-22-toc-title"></a>

データを計測するサイトのことです。サイトをプロジェクトに設定することで、そのサイトのデータを計測できます。

### 入口ページ <a href="#id-23-toc-title" id="id-23-toc-title"></a>

別の名称で「ランディングページ」とも呼びます。ユーザーが最初に訪問したページのことを指します。

### 入口数 <a href="#id-24-toc-title" id="id-24-toc-title"></a>

当ページが入口ページとして訪問された回数です。\
入口ページとは、別の名称で「ランディングページ」とも呼びます。ユーザーが最初に訪問したページのことを指します。

### 入口率 <a href="#id-25-toc-title" id="id-25-toc-title"></a>

入口数/該当ページのPV数です。

### ページグループ <a href="#id-26-toc-title" id="id-26-toc-title"></a>

サイト内にある複数のページを一つのグループにまとめたものです。ページグループは設定してからデータが計測されます。設定方法は[こちら](https://help.ptengine.jp/docs/pagegroup-settings/)

### 元のページ <a href="#id-27-toc-title" id="id-27-toc-title"></a>

すべてのユニークなURLのことです。\
例：オリジナルURLのとパラメータ付きのURLを分けて見ることができます。\
`http://aaa.jp/about/`\
`http://aaa.jp/about/?gclid=18jnie97dg`\
`http://aaa.jp/about/?utm_source=google`

### パラメータ除去後 <a href="#id-28-toc-title" id="id-28-toc-title"></a>

オリジナルページのURLとパラメータ付きのURLのデータを合算して見る際に使用するコマンドです。\
例：\
パラメータ除去後\
`http://aaa.jp/about/`\
と設定すると、下記のURLのアクセスデータを合算して表示します。\
`http://aaa.jp/about/`\
`http://aaa.jp/about/?gclid=18jnie97dg`\
`http://aaa.jp/about/?utm_source=google`

### ヒートマップ <a href="#id-29-toc-title" id="id-29-toc-title"></a>

ユーザーのサイト上でのアクションの大小をサーモグラフィーで表す機能です。ユーザーがどこを見てクリックしているか、どのコンテンツに注目されているかが分かります。

### クイックフィルター <a href="#id-30-toc-title" id="id-30-toc-title"></a>

\[数値レポート]>\[ダイジェスト]にて確認できる、1クリックでフィルタがかけられる機能です。それぞれのディメンションにオンマウスすることでフィルタボタンが現れ、そのボタンをクリックし簡単にフィルタをかけることができます。

### アドバンスフィルター <a href="#id-31-toc-title" id="id-31-toc-title"></a>

ヒートマップ画面右にある漏斗マークのボタンのことです。そこから特定の条件を絞り込んで分析できます。

### コンバージョン（CV） <a href="#id-32-toc-title" id="id-32-toc-title"></a>

サイト上でユーザーに到達してもらいたい目標、アクションを指します。\
Ptengineでコンバージョンとして計測されるのは、次の3つです。\
1.特定ページURLへアクセス\
ユーザーが特定の操作を完了させたページを指定することで、成果を計測します。\
会員登録であれば、「会員登録ありがとうございました」と表示されるページ、\
商品購入であれば、「購入が完了しました」などの購入完了確認ページなどが該当します。\
指定したページにユーザーが到達した場合につき、CVを1カウントします。\
2.設定したページグループへのアクセス\
ユーザーが特定のページグループへアクセスを成果として計測します。\
指定したページグループにユーザーが到達した場合につき。CVを1カウントします。\
3.イベントの発生\
Ptengineのイベント計測であらかじめ設定したイベントをユーザーが発生させた場合に、CVを1カウントします。

### CV回数 <a href="#id-33-toc-title" id="id-33-toc-title"></a>

CVを達成した訪問数です。

### CV率（コンバージョン・レート） <a href="#id-34-toc-title" id="id-34-toc-title"></a>

ある1つのCVのCV率=\[CV回数]/\[サイトの総訪問数]です。

### ポジティブCV <a href="#id-35-toc-title" id="id-35-toc-title"></a>

売上等などのプラスのCVです。

### ネガティブCV <a href="#id-36-toc-title" id="id-36-toc-title"></a>

退会などのマイナスのCVです。

### CVの価値 <a href="#id-37-toc-title" id="id-37-toc-title"></a>

設定したCVの価値×CV回数です。\
例：1CV＝200、CV回数20回である場合、CVの価値＝4000

### CVファネル <a href="#id-38-toc-title" id="id-38-toc-title"></a>

CVしたユーザーが、何ステップを経由してCVに到達したか、ゴールに到達したが結局離脱してしまったか等、特定のステップを設定し、CVファネルで離脱率を把握できます。

### イベント <a href="#id-39-toc-title" id="id-39-toc-title"></a>

ウェブページにある「会員登録」や「資料請求」ボタンなどが何回クリックされたかなどといった、ユーザーのサイト内での閲覧以外の行動を、Ptengine利用者が条件設定することで計測できる機能です。

### 正規表現 <a href="#id-40-toc-title" id="id-40-toc-title"></a>

文字列の一部分を照合、取得する特殊文字の表記方法です。\
詳細は[マッチングルール設定ガイド](/faq/others/matching-rules)の正規表現をご参照ください。

<br>


# Insight設定

このセクションでは、Insightの機能を正しく動作させるための基本設定から、不要なデータを除外するカスタマー設定まで、詳しく説明します。

**Ptengineを正常に機能させるためには、以下の2つの大前提があります。**

1. **Insightの設定画面で**[**ドメインを追加する**](/insight/setting/add-domain)**こと**
2. **対象のサイトやページにPtengineの**[**基本タグを設置する**](/start-guide/quick/tag-setup)**こと**

これらを踏まえ、不正アクセスの疑いがあるIPアドレスや、ユーザーエージェント（UA）の除外が可能です。\
また、データ計測に関するセッション時間のカスタマイズや、URLの統一ルールの指定にも対応しています。

詳細については、各ページをご参照ください。


# 通知レポート

{% hint style="success" %}
**通知レポートとは**

通知レポートは、ウェブサイトの計測データサマリーを、毎週月曜日に指定したメールアドレスへ自動的に送信する機能です。
{% endhint %}

### この機能のメリット

* **業務の効率化:** 毎週手動でデータを確認する手間が省け、定期的なレポート作成業務を自動化できます。
* **重要な変化の見逃し防止:** 定期的にデータに目を通すことで、サイトパフォーマンスの重要な変化や傾向を逃さず把握できます。
* **スムーズな情報共有:** チームメンバーや関係者など、複数名に同じレポートを自動で共有できます。

### よくある利用シーン

* **週次ミーティングでの報告:** ミーティング前に最新のデータを確認し、報告資料として活用する。
* **サイトパフォーマンスの定点観測:** 毎週のパフォーマンスをチェックし、異常や変化にいち早く気づくきっかけにする。
* **関係者への情報共有:** チームメンバーや上司、クライアントなど、直接管理画面を操作しない関係者へも定期的に状況を共有する。

### ⚙️ 設定方法

設定は簡単で、以下の手順で完了します。

1. レポートを受け取りたいメールアドレスの右側にある「ステータス」のスイッチをクリックします。
2. スイッチが「ON」になると、設定は完了です。この設定により、毎週月曜日にレポートが自動で送信されます。
3. 複数の宛先に送信したい場合は、それぞれのアドレスでステータスを「ON」に設定してください。

<figure><img src="/files/5HzlthwKz7wautaloioy" alt=""><figcaption></figcaption></figure>

この機能により、重要なデータを見逃すことなく、効率的に情報を管理することができます。


# IP除外

{% hint style="success" %}
**IP除外とは**

IPアドレスまたはIP範囲を指定することで、特定のアクセスを計測対象から除外できます。

例えば、社内からのアクセスを除外したい場合に便利です。

設定を保存後、**約30分**で有効になります。
{% endhint %}

この機能は、InsightとExperienceの両方に適用されます。

また、 設定後のデータのみが反映されます。

## ⚙️ 設定方法

<figure><img src="/files/JbO9MuvLwi4pdK1eqJ3T" alt=""><figcaption></figcaption></figure>

1. **基本設定にアクセス**

   「基本設定」 >> 「プロジェクト」 >> 「IP除外」に移動します。
2. **IPアドレスを入力**

   除外したいIPアドレスを入力し、保存してください。
3. **現在のIPアドレス確認**

   現在使用しているIPアドレスは、以下のサイトで簡単に確認できます：

   [IPアドレス確認サイト](https://www.ugtop.com/spill.shtml)

## 🎦操作動画

{% embed url="<https://app.arcade.software/share/U6c4BLALITdkiRg0viaJ>" %}

{% hint style="warning" %}
**注意事項**

この機能では、非パブリックIP（プライベートIP）を除外することはできません。設定する際には、192.168.x.xのような非パブリックIPを入力しないようにしてください。
{% endhint %}


# UA除外

{% hint style="success" %}
**UA（ユーザーエージェント）除外とは**

UA（ユーザーエージェント）とは、ユーザーの代わりに処理や通信を行うソフトウェア（主にWebブラウザ）やハードウェアのことを指します。

UA除外は、特定のソフトウェアやハードウェアからのアクセスを分析から除外する機能です。
{% endhint %}

### この機能のメリット

この機能を利用することで、以下のようなメリットがあります。

* **正確なデータ分析:**\
  botなど、人間以外のアクセスを除外することで、より正確なユーザー行動データに基づいた分析が可能になります。
* **柔軟な除外設定:**\
  100種類以上のbotを自動で除外するデフォルト設定に加え、特定のキーワードや正規表現を使って、独自の除外ルールをカスタマイズ設定ができます。\
  🔍 [詳細なリストはこちら](https://image.ptengine.com/wp-content/uploads/2026/04/default-exclusion-new.csv)
* **一貫したデータ計測:**\
  設定した除外ルールは、InsightとExperienceの両方の機能に適用されるため、一貫した条件下でデータを計測できます。

### よくある利用シーン

この機能は、以下のような場面で役立ちます。

* **検索エンジンのbotを除外したい場合:**\
  Googlebotなどのクローラーによるアクセスは分析ノイズになるため、除外して純粋なユーザーアクセスのみを計測します。
* **自社の監視ツールからのアクセスを除外したい場合:**\
  サイトの稼働状況を監視するツールなど、内部からの定常的なアクセスを分析対象から外します。
* **特定のアプリケーションからのアクセスを除外したい場合:**\
  特定のアプリ内ブラウザからのアクセスなど、分析の目的に合わないトラフィックを除外します。

### 設定方法

1. **基本設定にアクセス**
   * 「基本設定」 > 「プロジェクト」 > 「UA除外」の順に進む
2. **カスタマイズ設定**
   * 「カスタマイズ」を選択
   * UAのキーワードを入力して保存
   * 複数UA入力：「追加」ボタンで新しい入力欄を表示

![](/files/bOzCgTdNahJR4juUFcqK)


# URL 統一

{% hint style="success" %}
**URLの統一とは**

URL統一は、実質的に同じページでありながらURLが異なるページのデータを一つにまとめて計測・分析するための機能です。例えば、「www」の有無やURL末尾の「/」の有無など、表記が異なるURLを同一ページとして扱うことができます。

**この機能のメリット**

* **正確なデータ分析:** 同じページのアクセスデータが複数のURLに分散するのを防ぎ、ページの正確なパフォーマンスを把握できます。
* **分析の効率化:** データが統合されることで分析レポートが見やすくなり、分析作業の効率が向上します。
  {% endhint %}

{% hint style="warning" %}
**注意：**

* この設定はデータ計測に影響します。変更後は新しいデータ計測にのみ反映されます。
* 新規プロジェクトでは、「www」「#」「/」の統合がデフォルトでONです。
* 2023年4月以前のプロジェクトは、「www」と「/」の統合がデフォルトOFFです。
  {% endhint %}

### 設定方法

1. プロジェクト名横の歯車アイコン
2. 基本設定とタグ取得
3. URLの統一
4. 登録ドメインごとに設定変更

   <figure><img src="/files/yeUVSnn0nGoxaOofrC6t" alt=""><figcaption></figcaption></figure>

#### 「www」を含むURL と 含まないURL

初期設定：ON

例：`www.mysite.com` と `mysite.com` → `mysite.com` として計測 ❓ 分離して確認したい場合はOFFに変更

![](/files/gtICQelxxZIBgJNwrtsF)

#### 「#」を含むURL と 含まないURL

初期設定：ON

💡 シングルページサイトの場合はOFF推奨

![](/files/2kYRNQ8G4vhjGSeEe8hE)

#### 「index.html」を含むURL と 含まないURL

初期設定：OFF

`www.site.com` と `www.site.com/index.html` を統合したい場合はONに変更

![](/files/rB8tSOqS86eiPPC59ze2)

#### 「/」を含むURL と 含まないURL

初期設定：ON

例：`www.mysite.com/` → `www.mysite.com` として計測

パラメータ付きURLには適用されません（例：`www.mystie.com/?utm_source=google`）

![](/files/G2JgjskeaQMD6jFXANiy)

スラッシュ統合の詳細は[こちらの記事](/faq/tag-and-domain/url-trailing-slash)をご確認ください。


# 訪問設定

{% hint style="success" %}
**訪問（セッション）設定とは**

プロジェクトごとにユーザーの訪問（セッション）が継続される時間（タイムアウト時間）を自由に\
カスタマイズできる機能です。
{% endhint %}

### この機能のメリット

ユーザーの一連の行動が外部サイトを挟むなどの理由で分断された場合でも、タイムアウト時間を調整することで、それらを1回の訪問として正確に計測できるようになります。

### よくある利用シーン

ECサイトの決済手続きなどで、自社サイトから外部の決済システムへ移動するケースが考えられます。\
外部サイトでの操作に時間がかかると、サイトに戻ってきた際に別の訪問として計測されてしまうことがあります。このような場合にタイムアウト時間を延長することで、決済手続きから完了までの一連の流れを1回の訪問として正しく分析できます。

### この機能の設定方法

以下の手順で設定できます。

1. Insightで設定を変更したいプロジェクトにアクセスします。
2. 画面右上の歯車アイコンをクリックし、「基本設定」を選択します。
3. 左側のメニューから「訪問設定」を選びます。
4. PCとモバイル、それぞれのデバイスでタイムアウト時間を設定し、保存します。

<figure><img src="/files/hTUBNhb2xIwLLWvEwK4x" alt=""><figcaption></figcaption></figure>

### **セッションタイムアウト時間のデフォルト値**

| プロジェクト作成日        | PC   | SP   |
| ---------------- | ---- | ---- |
| 2022年1月11日以前     | 5分間  | 5分間  |
| 2022年1月11日〜8月29日 | 30分間 | 5分間  |
| 2022年8月30日以降     | 30分間 | 30分間 |

### **注意事項**

* この設定の変更には、管理者権限が必要です。
* タイムアウト時間を変更すると、訪問数、直帰率、平均滞在時間などの指標に影響します。
* Insightでの設定は、同一プロジェクトのExperienceにも適用されます。


# クロスドメイン設定

{% hint style="success" %}
**クロスドメインとは**

複数の異なるドメインにまたがるユーザーの行動を、一つの連続したセッションとして計測するための機能です。
{% endhint %}

### この機能のメリット

ドメインを移動してもセッションが途切れないため、ユーザーの一連の行動を正確に追跡・分析できます。

### よくある利用シーン

この機能は、ユーザーが複数のドメイン間を移動する以下のような場面で役立ちます。

* **ECサイト:** 商品詳細ページと決済ページのドメインが異なる場合
* **Webサイト:** 製品紹介ページと問い合わせフォームページのドメインが異なる場合

**（例）**\
記事LP（`kijiLP.com`） → 本LP（`honLP.com`） → 支払いページ（`pay.com`）

## 前提条件（重要）

1. 全ページに同じPtengine基本タグを設置
2. 計測したいページのドメイン登録完了
3. クロスドメイン設定をON

### 設定方法

自動設定が最も推奨されており、その他には全手動設定、半手動設定、API連携の方法があります。詳しくは、こちらの記事をご参照ください。

自動設定は下記①→②→③の手順で進めてください。

<figure><img src="/files/bsgYXsl5o1OcpHnQzhEN" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/wCNHTJKPMMXM0CBip490" alt=""><figcaption></figcaption></figure>

「クロスドメイン設定」のメニューを開いたら、スイッチをONにスライドします。「自動クロスドメインの設定が完了しました」と表示されたら設定完了です。必要に応じて、パラメータ識別子を選択ください（デフォルトでは # となります）。

![](/files/cVyD9gspsd52ztZ8vd8b)

![](/files/hferQv4cblLdTbwWWb69)

### **パラメータ識別子とは**

クロスドメイン設定を有効化すると、遷移後URLの末尾に Ptengine クロスドメインのパラメーター「#\_pt\_link=\*\*\*\*」が必ず付与されます。このパラメータを識別する記号をパラメータ識別子と言い、デフォルトで「#」として設定されています。計測サイト側で識別子を制限している場合に「 ? または & 」に変更ください。

**「#」を選択した場合：**

[www.domain.com/path/#\_pt\_link=\*\*\*\*](http://www.domain.com/path/#_pt_link=****)

**「 ? または & 」を選択した場合：**

(1) [www.domain.com/path/?\_pt\_link=\*\*\*\*](http://www.domain.com/path/?_pt_link=****)

(2) [www.domain.com/path/?campiagn=test&\_pt\_link=\*\*\*\*](http://www.domain.com/path/?campiagn=test&_pt_link=****)

既に ? が使用されているURLの場合に、上記 (2) のように & で繋がれます。

### 注意事項

* この設定は、Ptengine InsightとExperienceの両方に適用されます。
* 設定をONにしない場合、Experienceではクロスドメイン計測が適用されませんのでご注意ください。


# ドメイン追加

{% hint style="success" %}
**ドメイン追加とは**

「ドメイン追加」は、Ptengineで計測・分析したいウェブサイトのドメインを登録する機能です。特に、複数のドメインやサブドメインにまたがるユーザーの行動を正確に分析する「クロスドメイン機能」を利用するためには、対象となる全てのドメインを登録する必要があります。
{% endhint %}

### **主要機能**

* **正確なクロスドメイン計測**\
  複数のドメインをまたいで訪問するユーザーの行動を、途切れることなく一連のデータとして正確に計測できます。
* **複数ドメインの一元管理**\
  分析対象となるウェブサイトのドメインを一覧で管理し、計測範囲を明確にできます。

{% hint style="danger" %}
**注意事項**

* 登録漏れがある場合、Ptengineの機能が正しく動作しません。
* Growthプランではドメインの登録数が無制限ですが、異なるサイトのデータが混在する可能性があるため、最小限のドメイン登録を推奨します。
  {% endhint %}

### 設定方法

以下の手順で、計測したいドメインを登録できます。

1. Ptengine Insightにログインします。
2. 画面右上の**歯車アイコン**をクリックします。
3. 画面の指示に従い、ドメイン設定画面で計測対象のドメインを追加します。

<figure><img src="/files/XefWNlzqKTA3y7vYNZL3" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**活用ポイント**

* 複数ドメインを計測する場合、[ページグループ](/insight/data-center/content-page-group)を作成するとヒートマップの確認が容易になります。
* メインドメイン・サブドメイン・サブディレクトリの詳細定義は[こちらの記事](/faq/tag-and-domain/domain-main-vs-sub)で確認できます。
  {% endhint %}


# ヒートマップの設定と管理

{% hint style="success" %}
**概要**

ヒートマップの計測対象ページや表示仕様は、カスタマイズして設定・管理できます。\
無料版では、分析したいページのURLを1つ指定する必要がありますので、計測対象のURLを変更したい場合は、この機能をご利用ください。（有料プランでは、設定不要です。）

また、ドメインごとにヒートマップの表示仕様を詳細に設定することも可能です。
{% endhint %}

### よくある利用シーン（無料版のみ設定が必要）

* **分析対象ページを変更したいとき**
  * 例：トップページの分析が完了し、次に料金プランのページを分析したい場合。
* **サイトリニューアルでURLが変更になったとき**
  * 例：ページのURLが新しくなったため、計測対象を新しいURLに切り替えたい場合。
* **デバイスごとにURLが異なるサイトを分析したいとき**

  PCサイト（example.com）とスマートフォンサイト（sp.example.com）でURLが分かれて、URLを切り替えたい場合

### URLの登録/変更方法（無料版向け）

無料版では、設定画面で1つのURLを指定する必要があります。\
最初にURLを登録する場合は、下記の画面で「ヒートマップを追加」をクリックしてください。

<figure><img src="/files/r9quPq64Fz2XOFo7htlk" alt=""><figcaption></figcaption></figure>

ヒートマップ登録URLを変更したい場合、以下内容に従って設定してください。

1. 今のヒートマップURLを登録を削除します。\
   ![](/files/9g5LGmM14BnTrakE42go)
2. 変更したいURLを入力した上、保存してください。これで簡単に変更できます。\
   ![](/files/U5bsExKUF1IxZ6e6O9ns)![](/files/AfAX92Xax9SH5fXjKsZd)

### ページの詳細設定方法

ドメインごとに、ヒートマップの表示に関する詳細な設定が可能です。\
基本的にはデフォルト設定でのご利用を推奨しますが、必要に応じてカスタマイズできます。

1. ヒートマップ設定画面で、対象ドメインの「詳細設定」をクリックします。

   <figure><img src="/files/J8tT6kZBAkiHSBTBqhwi" alt=""><figcaption></figcaption></figure>
2. 必要に応じて以下の項目を設定します。\
   \&#xNAN;**・User Agent(UA)設定:**\
   ヒートマップの背景（キャプチャ）を取得する際のデバイス情報を変更したい場合に設定します。\
   \&#xNAN;**・解像度のカスタム:**\
   ヒートマップを表示する際の幅と高さを調整します。\
   デフォルト解像度：\
   　PC：1024 x 768\
   　スマホ：375 x 667\
   　タブレット：768 x 1024\
   \&#xNAN;**・URL設定:**\
   PCとスマートフォンでサイトのURLが異なる場合に、それぞれのURLを設定します。

   <figure><img src="/files/jbrr7qdtV0VVaHKon47p" alt=""><figcaption></figcaption></figure>
3. 設定後、保存します。


# 保存ページの管理

{% hint style="success" %}
**機能概要**

本記事では、Ptengine ヒートマップ機能の「歴史ヒートマップ保存」についてご紹介します。

この機能では、指定のタイミングでページの完全なスナップショットを作成し、長期保存できます。ページ改修や非公開化された後でも、保存したスナップショットを背景画像として、当時のヒートマップを確認できます。今回のアップデートで新たに **「定期保存」** モードが追加され、設定した頻度（毎週／隔週／毎月）でシステムが自動的にスナップショットを作成します。改修のたびに手動で操作する必要はありません。

改修サイクルが安定したページに特に適しています —— 例えば一定の周期で改修される製品ページは、毎週の定期保存をオンにすればシステムが自動的にアーカイブしてくれます。キャンペーンやイベントの節目では、開始前と終了後にそれぞれ手動で保存し、前後を比較して効果を確認できます。
{% endhint %}

## なぜページ保存が必要か

Ptengine のヒートマップは、ページ自体があってはじめて表示できる仕組みになっています。ページが改修（同一 URL で全く異なるデザインに変更）、削除、または非公開になった場合、もとのページにアクセスできず、その期間のヒートマップも見られなくなります。そのため、「ページ保存」機能では、ページの構成ファイルをサーバーに保存し、いつでも呼び出せるようにしています。これにより、ページが変更されても、保存済みのページバージョンを背景画像として呼び出し、該当期間の訪問者データを重ね合わせることで、ヒートマップを正常に表示できるという仕様になっています。

## ページの保存方法

「歴史ヒートマップ」パネルを開いた後、用途に応じて以下のいずれかの方法を選びます。

* **手動保存** — 送信後にその場で 1 回だけ実行します。キャンペーン開始／終了など、明確なタイミングがある節目向けです。
* **定期保存（新機能）** — 一度頻度を設定すれば、システムが周期的に自動実行します。運用が継続的で改修周期が安定しているページ向けです。

両方の方法は同時に利用でき、作成されたバージョンは同一の履歴バージョン一覧でまとめて管理されます。

### 手動保存の使い方

1. **「歴史ヒートマップ」パネルを開き、「手動保存」タブに切り替えます**
2. **以下を入力し、「保存」をクリックして送信します**

   * バージョン名（識別しやすい名前を推奨）
   * メモ（任意）
   * 合参ページおよび対応する元のページに適用（任意）：チェックすると、この履歴バージョンはパラメーターあり・なし両方のページに適用されます。例えば `example.com` と `example.com?param=test` の両方でこのバージョンを使用できます

   ![手動保存パネル](/files/fh8NPg9YrMhxpXANJbCJ)
3. **1 〜 10 分でスナップショットの取得が完了します**

   取得中は当該ページにとどまる必要はなく、他の操作にも影響しません。

### 定期保存の設定方法

1. **ヒートマップレポート画面で「歴史ヒートマップの保存」パネルを開く**

   ページ切り替えプルダウンの「+ 現在のページを保存」、または右側ツールバーの「現在のページを保存」アイコンをクリックすると、パネルが開きます。

   ![ヒートマップレポート画面で「歴史ヒートマップの保存」パネルを開く 2 つの入口](/files/auaGoi9ngN0XeWi19Tyd)
2. **「定期保存」タブで順に設定を行い、「保存」をクリックして送信します**

   * **保存頻度を選択**
     * **毎週** — 改修サイクルが早いページ向け。実行する曜日を指定
     * **隔週** — 約 2 週間サイクルで更新するページ向け。実行する曜日を指定
     * **毎月** — 比較的安定したページ向け。実行する日付を指定（1 〜 28 日）
   * **メモを記入（推奨）**：この定期タスクの用途を簡潔に記載しておくと、後日確認する際に識別しやすくなります
   * **合参ページおよび対応する元のページに適用**（任意）：チェックすると、このタスクで保存した履歴ヒートマップはパラメーターあり・なし両方のページに適用されます。例えば `example.com` と `example.com?param=test` の両方でこの履歴バージョンを使用できます

   ![定期保存パネル](/files/AQJfDtnIgn5O5pcFxNov)

   > **ヒント：** 月末（29 日以降）は選択できません。月によってはその日付が存在しないためで、1 〜 28 日に制限することで毎月安定して実行できるようにしています。
3. **保存後、設定は即時反映されます**

   システムは次に該当する曜日または日付の **00:00（日本時間）** から、設定された周期で自動的に実行を開始します。

### 定期保存の変更・停止方法

設定後はいつでも調整・停止できます。以下のいずれかの方法で操作します。

**方法 1：ヒートマップレポート画面で操作**

1. **再度「歴史ヒートマップの保存」パネルを開きます**。「定期保存」タブには現在の頻度と次回保存予定日が表示されます

   ![定期保存が稼働中の状態](/files/CtE750XoMqIJQ9GSGegc)
2. **「定期設定を編集」をクリックして編集モードに入ります**。頻度・メモを調整できます。停止する場合は「定期保存を有効にする」スイッチをオフにします

   ![編集モード — 「定期保存を有効にする」スイッチをオフにして保存することで停止できます](/files/08MdtAT7PUEfpUkNppk2)
3. **「保存」をクリックして変更を反映します**

**方法 2：管理画面で操作**

**Ptengine 設定 →「ヒートマップ設定」→「保存ページの管理」** に入り、対象ページの右上から調整または取消を行います。

> **注意：** 停止しても、保存済みの履歴バージョンはそのまま保持されます。停止後は当該タスクの後続自動実行のみが終了します。

## 保存内容の確認方法

保存後のページスナップショットは、以下 2 か所で確認・管理できます。

### ヒートマップレポート画面で確認

ヒートマップレポート画面の上部、ページ切り替えプルダウンから **「保存ページを呼び出す」** をクリックすると、現在のページに紐づく全履歴バージョンが表示されます。

![ヒートマップ画面で当該ページの全履歴バージョンを呼び出す](/files/QXq4G9bylrRDwQfkGLOU)

バージョン名の接頭辞は作成元を示しています。

* `[定期] 歴史ヒートマップ (yyyy/mm/dd)` — 定期保存で自動作成
* `[手動] 歴史ヒートマップ (yyyy/mm/dd)` — 手動保存で作成
* （接頭辞なし） — 機能アップデート前に保存された履歴バージョン

任意のバージョンを選択すると、画面の背景画像が当該バージョンのスナップショットに切り替わり、選択した期間内の実際の訪問者行動データが重ねて表示されます。

### 管理画面で確認・操作

**右上の設定メニュー →「ヒートマップ設定」** または **左側のナビゲーション →「保存ページの管理」** から入ります。

![歴史ヒートマップ管理画面](/files/8Wub2GDZGBAFoyOZCZAd)

管理画面では以下の操作が可能です。

![ページを展開した詳細（ヘッダー情報とバージョン一覧）](/files/7qj2wEvROzasYtQ6LLyx)

1. **歴史ヒートマップ用量**：上部に `歴史ヒートマップの用量：1/1 URLs` の形式で用量が表示されます
2. **使用中 / アーカイブ**：2 つのタブで状態別に切り替えて閲覧できます
3. **定期保存を編集**：対象ページの定期保存を変更・停止します
4. **削除**：当該ページの全バージョンと定期タスクを一括で削除します
5. **バージョン操作**：ページを展開し、各バージョンに対して**プレビュー** / **名前・メモの編集** / **削除** を実行します

#### 「使用中」と「アーカイブ」タブ

| タブ        | 内容                                                                     | プラン用量に計上されるか |
| --------- | ---------------------------------------------------------------------- | ------------ |
| **使用中**   | 現在プラン用量内のページ — 手動保存した履歴バージョンを持つページ、または定期保存タスクが設定されているページ               | **計上される**    |
| **アーカイブ** | プラン用量内ではなくなったページ — 機能アップデート前に保存された旧バージョン、およびプランダウングレードで用量範囲外となり外されたページ | **計上されない**   |

## 用量の計算方法

歴史ヒートマップの用量上限はご契約プランで決まり、**「ページ URL + ページタイプ」の組み合わせを計量単位** として計算されます。Ptengine のページタイプには**元のページ**・**パラメーター除去後**・**ページグループ**の 3 種類があり、同一 URL でもタイプが異なる場合はそれぞれ独立して 1 単位として計上されます。同一ページ（URL + タイプ）配下の全バージョンは合わせて 1 単位として計上され、手動・定期で何バージョン蓄積しても変わりません。

### プランダウングレード後の用量再判定の仕組み

ダウングレード後、システムは「使用中」のページを再判定し、新プランの用量を占有する有効なページとして扱います。ルールは以下のとおりです。

* **定期保存が有効になっているページが優先的に保持されます**。これらのページ数も新上限を超える場合、**作成日時の新しい順** にソートし、超過分の定期タスクを自動的に停止して、該当ページを「アーカイブ」に移します。
* **その他のページ** は **作成日時の新しい順** にソートされ、残りの上限枠に順次組み入れられます。超過分は同様に「アーカイブ」に移されます。

「アーカイブ」に移されたページ：保存済みの履歴バージョンは完全に保持され、いつでもプレビュー可能ですが、**定期保存は継続されず、新しい歴史ヒートマップの手動保存もできません**。

## その他注意事項

### 保存が失敗する可能性のあるケース

{% hint style="warning" %}

* **一部の外部リソースが保存されない**：相対パスや絶対パスで参照される特定のサードパーティリソースは保存対象に含まれない場合があります
* **URL が無効またはオフライン**：ドメインが解決できないか、すでに存在しないため、システムが対象ページにアクセスできません
* **サーバーエラー**：対象サイトがサーバーエラー（5xx）を返し、取得を完了できません
* **アンチボット / WAF によるブロック**：対象サイトのボット対策システム（Cloudflare、AWS CloudFront など）が取得サービスをボットと判定してアクセスを拒否しました

上記は一部の特殊なページにのみ発生する問題で、大多数の一般的なサイトでは影響を受けません。
{% endhint %}

### ログイン・アクセス制限のあるページについて

{% hint style="info" %}
定期保存は **システムが訪問者として対象ページにアクセスして内容を取得する** 仕組みです。以下の場合、システムはページの完全な内容を取得できません。

* ログイン状態が必須で表示が変わるページ（会員限定ページ、管理画面など）
* IP ホワイトリストによるアクセス制限のあるページ
* 特定の Cookie に依存して正しく表示されるパーソナライズページ

**これらのページでは定期保存の設定はお勧めしません**。保存が必要な場合は、カスタマーサポートまでご連絡ください。手動保存の対応をサポートいたします。
{% endhint %}

## よくあるご質問

**Q. 同じページで定期保存と手動保存を併用できますか？**

可能です。両方を組み合わせることをお勧めします。すべてのバージョンは同一の一覧に取り込まれ、`[定期]` と `[手動]` の接頭辞で由来を区別できます。

**Q. 1 つのバージョンは最長どのくらい保持されますか？**

保持期間はご契約プランの「歴史ヒートマップ保存期間」（例えば 12 か月）に従います。期間を超えたバージョンはシステムにより自動的にアーカイブされます。

**Q. 元のページが改修や非公開になった場合、保存済みバージョンに影響しますか？**

影響しません。保存されるのはその時点でのページの完全なスナップショット（HTML と静的リソースを含む）で、サーバーに独立して保存されます。元のページがどのように変更されても、または完全に非公開になっても、保存済みの履歴バージョンには影響せず、いつでも正常にプレビューできます。

**Q. 定期タスクの実行時刻はいつですか？**

毎回、指定日の **00:00（日本時間）** に実行されます。ユーザーのアクセスピークを避け、通常のアクセスへの影響を最小限にとどめるためです。

**Q. 保存したページはクリックや操作ができますか（メニューを開く、フォームを送信するなど）？**

ほとんどのページは通常通り操作できます。ただし、一部のモダンフレームワークと取得環境との互換性の制約により、**現時点では**以下のようなページは「静的スナップショット」として保存されます。見た目は完全ですが、クリックしても反応しません：

* 特定のモダンフレームワークで構築されたサイト（Next.js App Router、Shopify Hydrogen、Wix、Shoplazza、Bubble.io など）：これらのフレームワークはインタラクションを有効にするためにクライアントサイドのランタイムに依存していますが、そのプロセスが取得環境では正常に完了しません
* インタラクティブな地図（Google Maps、Mapbox など）が埋め込まれたページ：地図のタイルは動的に生成されるため、スナップショットに含めることができません

静的モードでは、メニューを開く・フォームを送信するなど、JavaScript に依存するすべての操作が反応しません。

文字・画像・レイアウトなどの見た目とヒートマップデータは正常に表示されます。

**Q.ページ保存した過去のヒートマップは、データ保存期間を過ぎても確認できますか？**

いいえ、データ保存期間を過ぎると確認できなくなります。

少し詳しくご説明いたします。「ページ保存」機能で保存されるのは**ページのデザイン（構成）**&#x3067;あり、ヒートマップの元となる行動データそのものは保存されません。ヒートマップは、保存したページに「その期間の訪問者データ」を重ねて描画する仕組みのため、保存期間を過ぎて該当データが消去されると、ページを保存していても重ねるデータがなくなり、ヒートマップを表示できなくなります。

そのため、過去のヒートマップを保存期間を越えて残しておきたい場合は、データが消去される前に**エクスポート（スクリーンショット／Excel出力）**&#x3092;お願いいたします。出力したファイルはお手元に残るため、保存期間の影響を受けません。

## 関連ページ

* [スマートヒートマップ概要](/insight/smart-heatmap)
* [比較ヒートマップ](/insight/smart-heatmap/comparison)
* [ツールバー機能](/insight/smart-heatmap/toolbar)


# 数値レポート

このセクションでは、数値レポートの基本構成から各ダッシュボードの見方まで説明いたします。

計測したデータを多角的に確認する前に、まずデータの定義を確認することをおすすめします。同じ名称のデータでも、統計の口径や計測方法が異なる場合、計測結果が一致しないことは当然です。そのため、異なるツールの計測結果を比較する際には、定義が同じであるかどうかを必ずご確認ください。

例えば、「コンバージョン数」の計測単位がユニークユーザー（UU）なのかセッション単位なのか、また1セッションの時間が30分なのか60分なのか、といった点です。詳細は[用語集](/insight/glossary)をご参照ください。


# ツールバー

{% hint style="success" %}
**ツールバーとは**

ツールバーは画面上部に配置され、期間やページの指定が可能な機能です。

この設定内容は、ダイジェスト、流入元、コンテンツ、端末情報、地域、キャンペーンなどの各セクションにデータとして反映されます。
{% endhint %}

### ツールバーの活用シーン

* データ分析を行う際に、特定の期間やページを指定して情報を確認したい時。
* 特定のページやページグループのデータを集計したい時。

### ツールバーの使い方

**①期間指定**

カレンダーから期間を指定し、データを確認することができます。ただし、過去に遡る期間はプランによって異なっています。

**②ページ指定 🔍**

プルダウンメニューから「ページ・ページグループ・パラメータ除去」によって、ページを指定することが可能です。

![](/files/jejqHmhB3yzYZnp42mln)

#### **ページ**とは、**URL単位**でページを指定する機能です。

* /URLまたはページタイトルから検索可能です（①をクリックして2つの検索方法を切り替えることができます）。
* 入力欄にページのタイトルもしくはURLの一部を入力すると、ページ候補が表示されます。
* もしページ候補が表示されない場合は、データが取得できていない可能性があります。[タグの設置状況](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/faq/start-guide/check-tag-firing.md)や選択中のデータ期間をご確認ください。

![](/files/LRG4sSFqDGlsxSVK7LUq)

**ページグループ**とは、予め設定済みのページグループ名がドロップダウンリストで表示されます。キーワードのみ呼び出すことも可能です。

* ただし、ページグループは事前に設定が必要です。設定してもデータが表示されない場合は、データが取得できていない可能性があります。

![](/files/2relUblNWhHSXuM4gWAT)

**パラメータ除去後**とはパラメータURLを合算して指定する機能です。

例えば「パラメータ除去後」に指定の上、 [www.ptengine.jp/](http://www.ptengine.jp/) と検索すると、下記のような同一URLのパラメータ付きデータを全て合算して表示します。

・[www.ptengine.jp/?utm\_source](http://www.ptengine.jp/?utm_source)...

・[www.ptengine.jp/?mail](http://www.ptengine.jp/?mail)...

・[www.ptengine.jp/?campaign](http://www.ptengine.jp/?campaign)... など

#### **③データダウンロード 📥**

ページ検索の右側、CSVアイコンよりデータをダウンロードすることが可能です。最大1万件のデータをエクスポートできますが、それ以上のデータの場合は、個別にお問い合わせください。


# 推移グラフ

{% hint style="success" %}
**推移グラフとは**

ダイジェストを開くことで表示されるアクセスレポートの最上部に位置するグラフです。\
このグラフは、訪問数の変化を視覚的に把握するためのツールです。
{% endhint %}

### 画面で確認できるデータ

* デフォルト表示：直近一週間の訪問数推移
* 期間指定後：指定期間の推移を緑の曲線で表示
* 表示単位切替：「日別」「週別」「月別」から選択可能 1日のみ指定時：横軸が時間単位となり、詳細な変化を確認可能

  ![](/files/mTJzK9sRvxp9F2AqUKOc)
* 指標の切り替え：「訪問数」のプルダウンリストから、UU、PVなど他の指標に切り替え可能

### **主要指標のクイック解説**

・**訪問数**：一人のユーザーがサイトを訪問してから離脱するまでを、一回の訪問として記録します。

・**UU（ユニークユーザー）**：重複訪問を除去した後の訪問数

・**PV**：ページが閲覧された回数

・**新規率**：新ユーザー（新しいcookieを含んでいる訪問）／全訪問回数

・**再訪問率**：既存ユーザー（既存cookieを含んでいる訪問）／全訪問回数

・**訪問数/ UU**：訪問回数／ユニークユーザー

・**PV /UU**：ページビュー／ユニークユーザー

・**平均滞在時間**：サイト内で毎回の訪問が続けられた平均時間

・**直帰率**：流入ページだけを見て終わった訪問回数/全訪問回数

・**平均ロード時間**：各訪問で、ページの初リクエストからページロードが完了するまでの平均時間

もっと詳しい定義に関しては、[用語集](/insight/glossary)をご参考ください。


# セグメント機能

{% hint style="success" %}
**セグメント機能とは**

数値レポートやヒートマップなどの分析を行うための機能です。\
7種類・29項目のセグメント条件を組み合わせることで、詳細なユーザー分析を実現します。
{% endhint %}

### 活用シーン

* ユーザー行動の詳細な分析を行いたい時
* 特定の条件に基づいてデータをフィルタリングしたい時
* 訪問者の特性や行動を理解し、マーケティング戦略を最適化したい時

### セグメントの利用方法

#### 1. ワンクリックセグメント

💡 各指標名にマウスを重ねると表示される漏斗アイコンをクリックするだけで、簡単にセグメント分析を開始できます。

![](/files/d0NozaaMxKr4lnZEEzD8)

#### 2. カスタマーセグメント

より詳細な分析には、画面右側のフィルターアイコンから条件を設定する方法があります。

1. フィルターアイコンをクリックし、「追加」を選択
2. 7つの種類の中で、フィルターしたい指標に基づいて選択を進められます。セグメント条件でこの指標を含む/含まないを選んだ上、OKを押します。一回の操作中、含む/含まないのルールは1つしか選択できません。
3. 条件（含む/含まない）を設定してOKをクリック。

📌 複数のフィルターにおいて、下記のように、同項目の条件はOR、異なっている項目はAND条件になります。

📌 よく使用する条件は保存することができ、次回から簡単に呼び出すことが可能です。

📌 セグメントの適用状態は、フィルターアイコンの色で確認できます：

* 緑色：セグメント適用中
* 通常色：セグメント未適用

### セグメントの解除方法

以下の3つの方法があります：

1. 「無効にする」：一時的に条件を無効化
2. 「×」アイコン：個別のフィルターを削除
3. 「クリア」：全ての条件をリセット


# リアルタイムのコンテンツ

{% hint style="success" %}
**リアルタイムのコンテンツ分析とは**

現在アクティブなページとそのページに訪れているユーザーの詳細情報をリアルタイムで確認する機能です。
{% endhint %}

### 分析の画面で確認できるデータ

「リアルタイム」 >> 「コンテンツ」では、現在アクティブなページとユーザーの詳細情報をリアルタイムで確認できます。

1. **ページ一覧**
   * URL前の数字: そのページの現在のアクセス人数
   * 「詳細」をクリックすると、ガイドバーの「コンテンツ」を開いて、ページ詳細を表示
   * マウスオーバー時に表示されるアイコン：
     * 👁️ 目のアイコン: クリックするとツールバーでそのページにフィルタをかける
     * ⋯ 点々のアイコン: クリックすると該当ページのヒートマップを表示
2. **アクティブユーザー情報**
   * 表示情報: UID、訪問中のページ、地域、流入元、端末情報など
   * 「New」表記: 新規訪問者を識別

     ![](/files/SLJEcrFtD5yBjDFp1rDQ)
   * 矢印アイコン: クリックで該当ユーザーの閲覧ページを新タブで開く
   * 各ページタイトルをそのままクリックすると：
     * 一時停止中は画面中央に「pause」アイコンが表示
     * 該当ページの現在の訪問者リストを右側で表示
     * 「pause」アイコンをクリックしてリアルタイム更新を再開


# 地域（リアルタイム）

{% hint style="success" %}
**リアルタイムの地域分析とは**

リアルタイムの地域分析は、ユーザーのアクセス地域を視覚的に確認できる機能です。この機能を使用することで、訪問者がどの地域からアクセスしているかをリアルタイムで把握することができます。
{% endhint %}

### リアルタイムの地域分析の活用シーン

* マーケティング活動の効果測定
* 地域別のユーザー行動分析
* 特定地域へのプロモーション活動における戦略立案

### 操作/設定方法

1. 「リアルタイム」メニューを選択
2. 「地域」をクリック
3. 地図上で訪問が発生している地域を確認
   * 緑の円で表示され、円の大きさが訪問数を示します（大きい円ほど多くの訪問）。

### **🔍**主要機能

1. **地図表示**
   * 緑の円：訪問が発生している全ての地域を表示
   * 円の大きさ：訪問数の多さを反映（大きい円 = 多い訪問、小さい円 = 少ない訪問）
2. **地域リスト**
   * 訪問数の多い順に地域を表示
   * 各地域の「詳細」ボタンをクリックすると、ガイドバーの「地域」リストに遷移

{% hint style="warning" %}
注意：

* リアルタイムデータは、セッション終了後30分～1時間程度でレポートに反映されます。
* サーバーが混雑している場合、データの反映に時間がかかることがあります。
* リアルタイムデータとレポートデータは、異なるタイミングで更新されるため、注意が必要です。
  {% endhint %}


# キャンペーン

{% hint style="success" %}
**キャンペーンからの流入分析**

キャンペーン流入分析は、UTMパラメータを含むURLを自動的に認識し、広告やダイレクトメール、バナー広告、動画広告など、さまざまなWeb集客施策の効果を簡単に追跡できる機能です。
{% endhint %}

**キャンペーン流入分析の活用シーン**

* 広告やマーケティング施策の効果を測定したいとき
* 特定の集客元からの訪問数やコンバージョン数を分析したいとき
* 流入元の詳細を把握し、改善点を見つけたいとき

### 主要機能

キャンペーンの詳細内容は、以下の2つの形式でデータを確認できます。

#### 1. キャンペーン流入元

キャンペーン流入元の一覧に表示されるのは、キャンペーンパラメーターの種類の中でも"utm\_source"が付いているデータです。

例えば、utm\_source=googleであれば、キャンペーン流入元はgoogleと表示されます。

キャンペーン流入元毎の集客・行動・CVの指標が表示され、指標名をクリックすれば、それぞれ昇順、降順で並び替えることができます。

![](/files/Inx5JvtW99VxKBElMlss)

表示される指標の詳細：訪問数、新規率、PV、（サイト内の）平均滞在時間、直帰率、CV数、CV率。

* ①の検索機能より、キャンペーン流入元名の検索ができます。
* ②より、特定のキャンペーン流入元でセグメントすることが可能。再クリックするとセグメント条件が取り消しされます。
* ③より、特定のキャンペーン流入元をドリルダウンして、元のURL詳細が確認できます。

#### 2. 流入元URL

流入元URL一覧は、キャンペーン流入元のリファラとなる外部ページのURLリストを表示します。いわゆる、サイトを訪れたユーザーが直前に滞在していたページのリストです。

* 訪問数の高い順で表示
* キャンペーン流入元と同様に、URL毎の集客・行動・CVの指標が表示
* 指標名をクリックすれば、それぞれ昇順/降順で並び替え可能
* 各URL右側にあるアイコンをクリックすると、新規タブでページが開くことが可能

![](/files/neFMwh86ukOSZzyrXNvs)


# 参照サイト

{% hint style="success" %}
**参照サイトとは**

検索エンジンやソーシャルメディア以外のサイトからのアクセスを指します。

Ptengineでは「流入元のURL」と「ホスト名」の2つの方法で参照サイトの情報を確認できます。
{% endhint %}

### **参照サイトの画面で確認できるデータ**

参照サイトの詳細内容は、以下の2つの形式でデータを確認できます。

#### 1. ホスト名

ホスト名では参照サイトのドメインを表示します。

ドメイン毎の集客・行動・CVの指標が表示され、指標名をクリックすれば、それぞれ昇順、降順で並び替えることができます。

![](/files/TSZySHuajb8Hp7LKvwbV)

表示される指標の詳細：訪問数、新規率、PV、（サイト内の）平均滞在時間、直帰率、CV数、CV率。

アイコン①より、特定のドメインをドリルダウンして、詳細が確認できます。

#### 2. 流入元URL

各参照サイトの詳細URLを確認することができます。

アイコン①をクリックすると、該当URLを新規タブで開くことができます。

![](/files/JK9vBmJtWlgi5vUXcbLe)

### **活用ヒント**

* ホスト名の指標を分析することで、どのドメインが効果的に集客しているかを把握し、マーケティング戦略を最適化できます。
* 流入元URLを確認することで、特定のコンテンツがどのようにトラフィックを引き寄せているのかを分析できます。


# 検索エンジン

{% hint style="success" %}
**検索エンジンとは**

オーガニック検索から流入したデータのことです。
{% endhint %}

### 計測できるデータ

* 表示される指標の詳細：訪問数、新規率、PV、（サイト内の）平均滞在時間、直帰率、CV数、CV率。
* 指標名をクリックすれば、それぞれ昇順、降順で並び替えることができます。

#### 💡 **活用ポイント**

1. **検索エンジン別パフォーマンス比較**：

   各検索エンジンからの流入の質（滞在時間、直帰率など）を比較し、重点的に対策すべき検索エンジンを特定。
2. **SEO施策の効果測定**：

   特定の検索エンジンからの流入が増加しているか、質が向上しているかを定期的にチェック。
3. **コンバージョン率の最適化**：

   CV率の高い検索エンジンからの流入を分析し、そのパターンを他の検索エンジンにも適用。
4. **新規ユーザー獲得戦略**：

   新規率の高い検索エンジンを特定し、新規ユーザー獲得のための施策を強化。
5. **長期的なトレンド分析**：

   検索エンジンごとの流入の推移を観察し、長期的なSEO戦略の立案に活用。

{% hint style="warning" %}
一部パラメータが設置されていない検索広告が検索エンジンからの流入として識別されますので、要注意です。

例：?gclidのようなutm以外の広告パラメータ
{% endhint %}


# ソーシャルメディア

{% hint style="success" %}
**ソーシャルメディアからの流入分析**

ソーシャルメディアからの流入を詳細に分析する機能で、効果的なソーシャルメディアマーケティング戦略の立案をサポートします。
{% endhint %}

### 🔍主要機能

ソーシャルメディアからの流入データは、以下の2つの形式で確認できます：

#### 1. ドメイン

各メディアサイトのドメインレベルでのデータを表示し、以下の指標が確認できます：

![](/files/popgXXVKumRqtixor7Ii)

* 訪問数
* 新規率
* ページビュー（PV）
* 平均滞在時間
* 直帰率
* コンバージョン数（CV）
* コンバージョン率（CV率）

指標名をクリックすることで、昇順または降順に並び替えることができます。

![](/files/Zj3eeK1NTZwAd8MfefhH)

#### 2. 流入元URL

ソーシャルメディアの実際のURLが表示され、アイコンをクリックすることで該当URLを新規タブで開くことができます。

![](/files/vm111m0ewUPFiw4SBfkg)

**活用ヒント**

* ソーシャルメディアからの流入データを分析することで、どのプラットフォームが最も効果的かを判断し、マーケティング戦略を調整する際に役立ちます。
* 各指標を確認し、訪問者の行動を把握することで、コンテンツやキャンペーンの改善に繋げることが可能です。


# ページ

{% hint style="success" %}
**ページとは**

ページとは、Ptengineで解析・計測される**Webサイトのコンテンツ単位**です。

各ページのパフォーマンスやユーザーの行動を詳細に分析できます。
{% endhint %}

## 🔍ページ画面で確認できるデータ

ページには、以下の2つの形式でデータを確認できます。

### 1. パラメーター除去後

URLの横に二つのアイコンが表示され、元のページの一覧を表示したり、別タブで該当ページを確認できます。

また、各指標名をクリックすることで、データを降順・昇順で並び替えることも可能です。

* **①検索欄**: タイトルやURLを入力してページを検索できます。
* **②詳細確認ボタン**: 該当ページの詳細を確認できます。
* **③ヒートマップ確認ボタン**: 該当ページのヒートマップに移動できます。

②をクリックすると、下図のように上部にあるアドレスバーにフィルターしたURLが表示されます。

[推移グラフ](/insight/data-center/trend-chart)も該当ページのみの数値を表すようになります。

アイコンを再度クリックするか、アドレスバーの「x」をクリックすると、フィルターが解除されます。

![](/files/TI4tKgE79sxnfY7wP10U)

### 2. 元のページ

各パラメータの詳細URLを確認することができます。

デフォルトは訪問数の高い順で表示されていますが、各指標名の箇所をクリックして、各データの降順・昇順で並び替えることができます。

また、各URL右側にあるアイコンをクリックすると、新規タブでページが開くことが可能です。

## 活用ヒント

### 主要指標の読み方

* **PV（ページビュー）**: ページの閲覧回数。人気コンテンツの特定に活用
* **入口数**: そのページが訪問開始となったセッション（訪問）の数
* **平均ページ滞在時間**: コンテンツの質や関心度を示す重要な指標
* **直帰率**: 1ページのみで離脱した割合。コンテンツ改善の指標

### データ活用のポイント

滞在ページ時間が短く直帰率が高いページは、コンテンツの見直しが必要です。タイトルとコンテンツのミスマッチが考えられます。ユーザーの検索意図に合わせて内容を調整し、SEO効果の向上に役立ちます。

また、「検索エンジン」からの流入が多いページを特定し、どのキーワードで成果が出ているかを把握することで、SEOのヒントにもなります。


# ページグループ

{% hint style="success" %}
**ページグループとは**

ページグループは、複数のURLやページを統合して管理・分析するための機能です。これにより、散在しているデータを一元化し、効率的に分析することが可能になります。「平均ページ滞在時間」は、各ページグループごとの訪問者の滞在時間を示します。
{% endhint %}

![](/files/hJE97cGJnaIJZvcSTFgo)

{% hint style="info" %}
「平均ページ滞在時間」とは、各ページグループ毎の訪問者の滞在時間を指しています。
{% endhint %}

## 💡**よくある活用シーン**

以下のサイト運用のシーンにおいて、ページグループの活用がおすすめです。

### **1．複数のドメインを同じプロジェクトで計測する**

Ptengineの有料版では、一つのプロジェクトで何個ものドメインを登録できます。

数値レポートのダイジェスト画面には、全てのドメインの訪問者データが表示されます。

もしドメインごとのデータを見たい場合は、ページグループを使ってドメインごとにページをまとめると見やすくなります。

### **2.特集ページや記事ページのパフォーマンス分析**

記事や特集ページなど構造が同じページがたくさん存在するウェブメディアにおいて、ページグループ機能を活用することで、各ページのパフォーマンスを効率的に比較分析することが可能です。

たとえば、どのコンテンツが訪問者により良く読まれているのかや、どのコンテンツが最も多くの訪問者を引きつけているのかを類似ページを一括分析することで的確に把握することができます。

### **3. オウンドメディアの集客分析**

オウンドメディアによる集客活動においてもページグループ機能は重要な役割を果たします。

例えば、特定のキャンペーンに関連する一連の記事のパフォーマンスを一覧し、より効率的な集客戦略を策定することが可能です。

### **4. ECサイトにおけるユーザー行動分析**

ECサイトでは、商品カテゴリーページや商品詳細ページといった同じ構造のページが多数存在します。

ページグループ機能を用いることで、一括してこれらのページのヒートマップを分析し、ユーザーの行動パターンを把握することが出来ます。

これにより、サイトユーザビリティの改善のヒントを得ることが可能となります。

### **5.パラメータによるページUIが別れている**

広告ランディングページ(LP)などでよく見られるパターンです。

パラメータの値ごとにページのUIが別れていて、それぞれが異なる訴求をユーザーに提供している場合、一括で行動データを確認するためにはページグループの設定が必要となります。例：

`www.ptengine.jp/?utm_campaign=`<mark style="color:purple;">`mail001`</mark>`&utm_source=facebook&utm_keyword=ptengine`

`www.ptengine.jp/?utm_campaign=`<mark style="color:red;">`mail002`</mark>`&utm_source=facebook&utm_keyword=ptengine`

上記のようなURLの場合、パラメータ（utm\_campaign）の値（mail001、mail002）ごとにページUIやコンテンツが異なります。

それぞれのパフォーマンスを分析するためにページグループを設定すると便利です。

以上の様なシーンで、Ptengineのページグループ機能を活用することで、より詳細で効率的な分析が可能となります。

## **⚙️ 設定方法**

🎦動画の操作方法は[こちら](https://app.arcade.software/share/NKuUM6mVlQdUQLWGB7XH)からご覧ください。

{% embed url="<https://app.arcade.software/share/NKuUM6mVlQdUQLWGB7XH>" %}

「設定」 >> 「ページグループ設定」に入ると、ページグループを作成することができます。

「追加」をクリックすると、下記のポップアップが出てきます。

①名称を入力してください。

②マッチングルールを選択してします。

* 単一ルール：URLを設定するとURLルールの条件に従ってグルーピングすることができます。該当するURLを改行で一挙に指定することが可能です。
* 複合ルール：複数のURLルールが混在する形でグルーピングできます。こちらでは正規表現を選ぶことができます。

③URLルールが変更できます。

④URLの文字列を入力します。文字数は4000の制限があります。

{% hint style="danger" %}
**注意点**

ページグループのデータは、設定を行った時点から蓄積されます。そのため、

* 過去の数値を遡って統合することはできません
* 設定後のデータのみが反映されます
  {% endhint %}

## **⚙️ 閲覧方法**

ページグループヒートマップを利用する時は、「数値レポート」の「コンテンツ」に、「ページグループ」でヒートマップを確認できます。

<figure><img src="/files/r0uyhsLwu1EEdEdg9ZOZ" alt=""><figcaption></figcaption></figure>

また、ページグループの背景ページを切り替える場合、画面の左上にあるURLをクリックして、「別ページに移動」を選択した後に、「ページ」を「ページグループ」にクリックして、特定のページ(URLを入力)または現在のページから背景ページを指定できます。

<figure><img src="/files/ArHZcro6Gq19c0pX344x" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/KnO7c9wTlA8VIs4EYKUx" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/O6Fz326uBI7cNIypp16n" alt=""><figcaption></figcaption></figure>


# 入口ページ

{% hint style="success" %}
**入口ページとは**

ユーザーがサイトを訪問した際に最初に表示されるページのことを指します。
{% endhint %}

## 入口ページで確認できるデータ

入口ページの画面では、次のデータをチェックできます。

* 入口数
* 新規率
* ページビュー（PV）
* 平均滞在時間
* 直帰率
* コンバージョン数（CV数）
* コンバージョン率（CV率）

上記データは「**パラメーター除去後**」と「**元のページ**」の2つの形式で表示されており、各指標の名称をクリックすることで、データを効果的に並び替えることが可能です。

### パラメーター除去後

パラメーター除去後では、 URLの横に二つのアイコンがあり、元のページ(パラメータ除去前)の一覧を表示させたり、別タブでウェブページを開き該当ページを確認することができます。

表示される指標の詳細：訪問数、新規率、PV、（サイト内の）平均滞在時間、直帰率、CV数、CV率。

各指標名の箇所をクリックして、各データの降順・昇順で並び替えることができます。

### 元のページ

各パラメータの詳細URLを確認することができます。

デフォルトは訪問数の高い順で表示されていますが、各指標名の箇所をクリックして、各データの降順・昇順で並び替えることができます。

また、各URL右側にあるアイコンをクリックすると、新規タブでページが開くことが可能です。

## 入口ページの重要性と活用ヒント

入口ページのデータは、ウェブサイトのパフォーマンス改善に重要な手がかりを提供します。特に、どのページが訪問者にとって魅力的であるのか、また訪問者がウェブサイトにどのように到達しているのかを理解するために、このデータは非常に有益です。

さらに、各入口ページのパフォーマンスを検証することで、ウェブサイト全体の訪問者体験を改善し、コンバージョン率を最適化するための戦略を策定することが可能になります。

例えば、特定の入口ページの直帰率が高い場合、そのページは訪問者にとって魅力的でない可能性があるため、コンテンツの改善が必要です。逆に、新規訪問者率が高いページは、新たな訪問者をウェブサイトに引きつけるのに効果的であると言えます。これらの情報を活用して、ウェブサイトの訪問者体験を最適化しましょう。

以上が入口ページの確認方法とその重要性についての説明です。Ptengineを用いて、各入口ページのパフォーマンスを確認し、ウェブサイト全体のパフォーマンス改善を図りましょう。


# デバイス/メーカー

{% hint style="success" %}
**端末情報の「デバイス」分析では**

ユーザーがサイトを訪問した時のデバイスブランドの関連指標を細かく確認できます。

表示指標：訪問数・新規率・PV・平均滞在時間・直帰率・CV数・CV率
{% endhint %}

### **🛠️ リストの見方と機能**

![](/files/G2mWIhHIp9goufogqeUa)

**①検索欄**：はタイトルやURLを入力して確認したいデータを検索できます。

**②CV選択**：特定のコンバージョンを絞って、詳細を表示させることが可能です。

**③セグメント機能**：アイコンをクリックすることで関連情報をセグメント化し、詳細にドリルダウンすることができます。もう一度クリックするとセグメントが解除されます。


# OS

{% hint style="success" %}
**端末情報の「OS」分析では**

「端末情報」の「OS」セクションでは、ユーザーがウェブサイトを訪問する時に使用していたオペレーティングシステムの関連指標を細かく確認できます。

表示指標：訪問数・新規率・PV・平均滞在時間・直帰率・CV数・CV率
{% endhint %}

#### **🛠️ リストの見方と機能**

![](/files/G2mWIhHIp9goufogqeUa)

**①検索欄**：はタイトルやURLを入力して確認したいデータを検索できます。

**②CV選択**：特定のコンバージョンを絞って、詳細を表示させることが可能です。

**③セグメント機能**：アイコンをクリックすることで関連情報をセグメント化し、詳細にドリルダウンすることができます。もう一度クリックするとセグメントが解除されます。


# ブラウザ

{% hint style="success" %}
**端末情報の「ブラウザ」分析では**

ユーザーがサイトを訪問した時使用していたブラウザの関連指標を細かく確認できます。

表示指標：訪問数・新規率・PV・平均滞在時間・直帰率・CV数・CV率
{% endhint %}

### **🛠️ リストの見方と機能**

![](/files/G2mWIhHIp9goufogqeUa)

**①検索欄**：はタイトルやURLを入力して確認したいデータを検索できます。

**②CV選択**：特定のコンバージョンを絞って、詳細を表示させることが可能です。

**③セグメント機能**：アイコンをクリックすることで関連情報をセグメント化し、詳細にドリルダウンすることができます。もう一度クリックするとセグメントが解除されます。


# 解像度

{% hint style="success" %}
**端末情報の「解像度」分析では**

ユーザーがサイトを訪問した時のスクリーン解像度の関連指標を細かく確認できます。

表示指標：訪問数・新規率・PV・平均滞在時間・直帰率・CV数・CV率
{% endhint %}

### **🛠️ リストの見方と機能**

![](/files/G2mWIhHIp9goufogqeUa)

**①検索欄**：はタイトルやURLを入力して確認したいデータを検索できます。

**②CV選択**：特定のコンバージョンを絞って、詳細を表示させることが可能です。

**③セグメント機能**：アイコンをクリックすることで関連情報をセグメント化し、詳細にドリルダウンすることができます。もう一度クリックするとセグメントが解除されます。


# 地域

{% hint style="success" %}
**地域ページの機能とは**

ユーザーのアクセス地域を視覚的に確認できる機能です。
{% endhint %}

#### **主要機能**

<figure><img src="/files/0GWZ7ucgDOvIzHRiFp3a" alt=""><figcaption></figcaption></figure>

1. **推移グラフ**
   * 時系列でのデータ変化を確認できます。
2. **インタラクティブな地図表示**
   * 地図上で特定地域にマウスオーバーすると、該当国や地域からの訪問数が表示されます。
   * 確認したい位置をクリックすると、該当都道府県の訪問数値が現れます。
   * 「戻る」をクリックすると、前段階の国や地域の表示画面に戻ります。
   * 地図左下の「＋」「－」ボタンで地図の大きさを調整できます。
3. **地域リスト**
   * 各地域からの訪問を降順で表示し、「詳細」をクリックすると詳しいデータを確認できます。

{% hint style="warning" %}
**💡 データ精度について**

* データはIPアドレス情報をもとに外部データベースと照合して作成されます。
* プロキシやVPNを通じたアクセスでは、実際の所在地とは異なる地域が判定されることがあります。
* 地域情報の特定には100％の精度を保証できないため、傾向を把握する目的での利用を推奨します。
  {% endhint %}


# キャンペーンのUTMタグ

{% hint style="success" %}
**UTMタグについて**

UTMタグ（Urchin Tracking Module）は、ウェブトラフィックを追跡するためのパラメータです。2005年にGoogleに買収されたUrchin Softwareによって提唱されました。UTMタグを活用することで、マーケティング分析の精度を高め、ROI改善や戦略の最適化が可能です。
{% endhint %}

### 📊 UTMタグの構造

パラメータは\[リンクURL]?\[パラメータA]&\[パラメータB]&\[パラメータC] という形で?から始まり、&で追加されます。

また、パラメータの中は\[{パラメータタグ}={任意の変数}]という形でパターン化されたパラメータタグに=XXXをつけることで値を指定することができます。

例：

```
www.a.com/?utm_source=google&utm_medium=cpc&utm_campaign=double11&utm_content=xxx&utm_term=yyy

```

### 📌 主なUTMタグパラメータ

| パラメータ         | 意味      | 例                  |
| ------------- | ------- | ------------------ |
| utm\_campaign | キャンペーン名 | 特定のキャンペーン名称        |
| utm\_source   | 流入元     | Google、Logicadなど   |
| utm\_medium   | メディア    | cpc、bannerなど       |
| utm\_term     | キーワード   | リスティング広告のキーワード     |
| utm\_content  | コンテンツ   | キャンペーンの内容や特定のコンテンツ |

{% hint style="danger" %}
**注意事項**

* utm\_campaign、utm\_source、utm\_mediumは必須設定
* PtengineではこれらのUTMフィールドを使用してキャンペーン分析を実施
* CVゴール、CVファネルの対象URLにはUTMパラメーター非付与を推奨
  * セッションが切れる可能性があるため
  * UTM付きURL設定の詳細は[開発者向けの記事](https://www.notion.so/developer-api-bfa0f313cb574114a55115be51c0d707?pvs=21)を参照
* [パラメーター作成ツール](https://www.notion.so/ads-parameter-builder-b180d05719944219bd8080daadadc8e9?pvs=21)でUTMタグを含むリンクを簡単に作成可能
  {% endhint %}

### 🔧 **活用ポイント**

* **キャンペーン効果測定**：各マーケティングキャンペーンの効果を正確に追跡できます。
* **チャネル分析**：どの広告媒体や流入元が最も効果的かを分析するのに役立ちます。
* **コンテンツ最適化**：utm\_contentを使用して、効果的な広告クリエイティブを特定できます。
* **キーワード効果測定**：utm\_termを使用して、特定のキーワードの効果を測定できます。
* **クロスチャネル分析**：複数のチャネルやキャンペーンの相互作用を分析できます。


# ビジュアルイベント

{% hint style="success" %}
**イベントとは**

イベントは、ユーザーがWebサイト上で行う意図的な行動を指します。例えば：

* ボタンやリンクのクリック
* ページの特定箇所へのスクロール
* 会員登録
* 商品購入

Ptengineのイベント機能を使用することで、これらのユーザーアクションを計測でき、よりユーザーの行動に基づいたウェブサイトの改善を企画することができます。
{% endhint %}

## Ptengineのイベント機能

Ptengineには2種類のイベント機能があります。本セクションではビジュアルイベント機能について説明します。

### 1. ビジュアルイベント

* JavaScriptの知識不要
* ビジュアル的に簡単に設定可能
* クリック数のみ計測する

### 2. カスタムイベント

* JavaScriptを使用した高度な設定が可能
* クリック数以外の定性データが計測可能

## ビジュアルイベントの活用例

ビジュアルイベントは、例えば以下のような計測にご活用いただけます。

* **ユーザー行動の評価** — CTAボタンのクリック具合、特定コンテンツのクリック状況
* **セグメント分析** — 流入元による行動の違い、イベント有り無しユーザーの行動の違い


# ビジュアルイベント設定方法

> コードによるイベント計測については[カスタムイベントの設定方法](/experience/setting/custom-event-setup)をご覧ください。

{% hint style="success" %}
**ビジュアルイベント設定とは**

画面を直接操作しながらコーディング不要でイベントを設定できる機能です。\
設定プロセスを極力シンプルにしているため、技術担当者の支援がなくても、\
簡単にイベント要素を選択することができます。
{% endhint %}

### この機能のメリット

* **コーディング不要:** HTMLやJavaScriptの知識がなくても、誰でも簡単にイベント設定ができます。
* **直感的な操作:** 実際のウェブサイト画面上で計測したい要素をクリックするだけで、視覚的に設定を進められます。
* **迅速な分析:** 設定後すぐにデータ計測が開始され、ユーザー行動を迅速に分析できます。

### よくある利用シーン

* 「購入」や「資料請求」など、重要なコンバージョンボタンのクリック数を計測。
* 複数のページに共通して設置されている「お気に入り登録」ボタンやSNSシェアボタンのクリック数をまとめて計測。
* ハンバーガーメニューやアコーディオンメニューなど、操作しないと表示されない要素のクリック数を計測。
* サイト内の特定の画像やバナーがどれくらいクリックされているかを把握。

### 設定方法

ビジュアルイベントは、以下の3ステップで設定できます。

#### Step1：計測する要素を選択する

1. Ptengine管理画面の右上にある歯車アイコンから「イベント設定」を選択し、「追加」ボタンをクリックします。

   <figure><img src="/files/AKCVbMPPmX6XYJsFObcs" alt=""><figcaption></figcaption></figure>

   <figure><img src="/files/NT0ga0kZpGTie1iXZKHZ" alt=""><figcaption></figcaption></figure>

   <br>
2. イベントを設定したいページのURLを入力し、「Go」ボタンをクリックすると、別タブで設定画面が開きます。

   <figure><img src="/files/7ta4fWoA36oxCmJfM587" alt=""><figcaption></figcaption></figure>
3. 「了解」ボタンをクリックした後、「了解」ボタンをクリックした後、イベントを設定したい要素を選択してください。マウスカーソルを合わせると、設定可能な要素が赤枠で表示されます。\
   要素をクリックすると、その要素の直近7日間のクリック数が表示されます。\
   ※アコーディオンメニューなど、クリック操作が必要な要素にイベントを設定する場合は、後述の「画面操作モード」をご参照ください。

   <figure><img src="/files/tUmtzuuvZpDNpIr2fSdA" alt=""><figcaption></figcaption></figure>

   ![](/files/rhTUq8JalWswn6evUEAH)
4. 「要素範囲」を選択します。

**①「選択した要素のみ」の場合は**\
クリックした特定の要素のみを計測します。\
要素に「id」が設定されている場合など、ピンポイントで指定したい場合におすすめです。\
\
例えば、HTMLソースのbody要素の中から、選択された要素をイベント対象にします。\
`body > div:nth-child(5) > div:nth-child(2) > div:nth-child(1) > button:nth-child(3)` のように、入れ子になった「箱」を順番にたどって指定します。\
これは、ウェブページの「本文(body)」という大きな箱の中から、「5番目の箱の中の、2番目の箱の中の、1番目の箱の中の、3番目のボタン」というように、目的の「部品(要素)」をピンポイントで選ぶイメージです。

もし、「部品(要素)」に「id」という名前が付いている場合は、順番を気にせずに直接「id」で選べます。そのため、イベントを設定したい「部品(要素)」に「id」がある場合は、「**選択した要素のみ**」を選ぶ方が簡単でおすすめです。

ただし、**要素に「id」がない場合、Webページの構造が変更されると、イベントを正しく計測できなくなる可能性がありますので、イベントを設定し直してください**。

**②「カスタム」の場合は** **:**\
選択した要素と同じ種類や同じ親要素、又は同じ属性を持つ複数の要素（例：同じデザインのボタンなど）をまとめて計測したい場合におすすめです。\
設定したタグがすべて計測対象として適切かどうか、ページをスクロールしながら確認することをおすすめします。

ただし、**サイト改修等で上記で指定したタグや属性を変更すると、変更後の要素は識別できませんのでご注意ください。**\
例：\<div>タグで囲っていたテキストを\<p>タグに変えるなど

また、**「DOM構成を無視」をONにすると、ページ全体の要素にカスタムルールが適用されますので、設定したい内容に合わせて調整してください。**

* **デフォルト:** OFF（カスタムルールは同じブロック内の要素のみに適用）
* **ONの場合:** カスタムルールが、同じ要素を持つページ全体のコンテンツに適用されます。
  * 例：ある画像（`<img>`タグ）をクリックし、カスタムルールで同じタグを指定した場合、「DOM構成を無視」をONにすると、ページ内のすべての画像がイベント対象になります。
* **推奨ケース:** `href`で指定したURLを持つ画像など、同じ内容の要素がページ内で異なるDOM構成にある場合にONにすると便利です。
*

<figure><img src="/files/VG2rm78vRhg7xQNVsmnO" alt=""><figcaption></figcaption></figure>

#### **Step２.**&#x30A4;ベント名と計測範囲を設定す

1. **イベント名**を入力します。
   * 全角・半角問わず20文字が上限です。
   * 一度設定したイベント名は変更できません。
2. **計測範囲**を選択します。
   * **該当ページ:** Step1で指定したページのみを対象とします。
   * **該当ドメイン:** Step1で指定したURLと同一ドメイン内の全ページを対象とします。
   * **URLのルール:** 「含む」「正規表現」「前方一致」などのルールを使い、特定の複数ページを対象に指定できます。マッチングルールの詳細は[こちらの記事](/faq/others/matching-rules#mu)をご参照ください。

![](/files/I5E8NzrKxJe1ek96CkI9)

![](/files/7s3jiEzT18d6rbRuWeRq)

#### **Step３.**&#x8A2D;定を完了する

設定が終ったら「確定」をクリックし、下記の画面が出たら設定完了です。

設定したイベントは、プロジェクト名横の歯車アイコン > イベント設定より一覧を確認できます。

![](/files/mms7WhT1sWdR7THt1wlm)

### **設定の変更・削除について**

* 一度設定したイベントの「イベント名」「計測対象・範囲」は変更できません。
* 設定の削除やメモの編集は、「イベント設定」の一覧ページから行えます。
* 既存のイベントと同じ名前で新しいイベントを作成すると、計測対象が追加される形で既存のイベントが更新されます

#### **イベントの削除・メモの編集**

プロジェクト名横の歯車アイコン > イベント設定より一覧ページに入り、画面右側の編集・削除ボタンより作業できます。

<figure><img src="/files/s1Mz8nmLQHNsELlf3Vl5" alt=""><figcaption></figcaption></figure>

#### **既存イベントに計測対象を追加**

異なるページ要素をイベントとして追加に設定する際、

* イベント名を既存のイベント名と同じにする、
* 管理画面では新規イベントとして追加されず、
* 既存のイベントが更新される形で保存されます。（以下の画像参照）

![イベント一覧画面で編集ボタンをクリックすると、こちらの画面が開きます。](/files/DieT7MLm2uA80TY0i1DB)

イベント一覧画面で編集ボタンをクリックすると、こちらの画面が開きます。

そのため別要素を追加することで、既存イベントの計測範囲を広げることができます。なお同じ要素を重複設定すると計測も重複されるため、ご注意ください。

### **設定済みイベントの確認**

イベント設定画面右上&#x306E;**「設定済みイベントの確認」**&#x304B;らは、このURL上で設定されているイベント一覧を確認できます。

![](/files/Qqwx8uSFvVcQIkAMqYP2)

イベント設定が完了している要素は、上の画像のように色が付きます。

{% hint style="danger" %}
チェックを外すと色のトーンは下がるが、ただし色が完全に消えない場合、その要素は別のイベントにも重複して設定されていることになります。
{% endhint %}

### **画面操作モード**

イベントを設定したい要素が以下のような画面上で操作して指定する必要がある場合は、イベント設定画面上部のツールバー左上にある設定モードのオンオフ機能をご利用ください。

* ログイン後のページ
* ハンバーガーメニュー
* アコーディオンメニュー

<figure><img src="/files/Y8l1VphufdwYqN6aiFIo" alt=""><figcaption></figcaption></figure>

デフォルトではOFFになりますが、ONにすると画面操作ができるようになります。

### **要素の階層選択**

ビジュアルイベント設定時のユーザー体験を向上させるため、要素の階層選択機能を新たに追加しました。ページのスタイルによって対象要素を直接選択できない場合でも、階層選択を使用して上位要素から順に対象要素を絞り込み、選択することができます。これにより、複雑なページでのイベント設定の柔軟性と精度が大幅に向上します。

### **ツールバーの非表示**

![](/files/B0JmgZk6IJoCdVwpj2bQ)

* イベント設定画面右上の隠すボタンで、ツールバーを隠すことができます。（画像をご参考ください）
* 緑色の矢印をクリックすると、元の状態に戻ります。

### **Experienceとの連携**

InsightのイベントはExperienceのイベントと連携することが可能です。\
ただし、ExperienceはUU（ユニークユーザー）で集計されるのに対し、Insightはセッション単位であるため、数値が必ずしも一致するわけではありません。

詳細の設定方法はExperienceの[エディターの使い方](/experience/campaign/create-new/editor-usage)をご参照ください。

### **イベントに関するよくある質問**

1\. [イベントが設定できない場合](/faq/insight-setting/event-cannot-set)

2\. [PC向けとSP向けページで同一URLを使用している場合](/faq/start-guide/pc-sp-switch)

3.[同じ種類のボタンを1つのイベントとして合算する方法](/faq/insight-setting/event-merging)

4.[イベントの手動設定](/experience/setting/custom-event-setup)


# イベント発火の確認

{% hint style="success" %}
**概要**

設定したビジュアルイベントが正しく計測されているか（発火しているか）を、ブラウザのDeveloper tool\
（検証モード）を使ってリアルタイムで確認できます。
{% endhint %}

### メリット

Ptengineのイベント分析画面にデータが反映されるまでには30分〜1時間程度のタイムラグがあります。\
この機能を使えば、イベント設定直後に正しく動作しているかを待たずに確認できます。\
また、設定ミスがあった場合も迅速に発見し、修正することが可能です。

### よくある利用シーン

* 新しくビジュアルイベントを設定した直後に、正しく計測できているかテストしたい場合
* イベントの数値が分析画面に反映されず、原因を調査したい場合
* PCとスマートフォンで、それぞれイベントが正常に発火するかを確認したい場合

### 確認方法

以下の手順で、イベントの発火状況を確認できます。

#### 1. イベントを設定したページを開く

お使いのブラウザで、確認したいイベントが設定されているウェブページを開きます。

![](/files/5zelMabavLpwfLHwxa16)

#### 2. Developer tool（検証モード）を開く

ブラウザの機能である「Developer tool（開発者ツールや検証モードとも呼ばれます）」を起動します。

* **Windowsの場合**: `F12` キー または `Ctrl + Shift + I`
* **Macの場合**: `Command + Option + I`

![](/files/Lt0jAAEYeF00KuGpm28B)

#### 3. Developer toolをセットアップする

Developer toolが開いたら、下記キャプチャを参照し、以下の4つの設定を行います。

![](/files/mMq3fIghieBTAcV0HodB)

**①デバイスの切り替え**: 必要に応じて、PC表示とスマホ表示を切り替えます。\
設定はPC画面で行うことが多いですが、SP画面でイベントの発火が確認できれば、PC画面もほぼ問題ないと考えて大丈夫です。\
ただし、レスポンシブページの場合は、スマホ画面での確認を推奨します。

<figure><img src="/files/NF0l5t1ibzDg5DmMj8Xf" alt=""><figcaption></figcaption></figure>

**②"Network"タブを選択**

**③"Preserve log" "Disable cache"にチェック**

**④"Ptengine"を入力**

#### 4. イベントを設定した要素をクリックする

ページ上で、イベント計測の対象として設定したボタンやリンクなどの要素を1回クリックします。\
※悪意のあるクリックを防ぐため、3秒以内の連続クリックは1回として計測されます。テストの際は3秒以上間隔をあけてください。

<figure><img src="/files/tXCTqlk7UlJtMU0h6pAY" alt=""><figcaption></figcaption></figure>

#### 5. 計測状況を確認する

要素をクリックすると、Developer toolのNetworkタブに「collect～」で始まる行が表示されます。

1. 表示された「collect～」の行をクリックします。
2. 詳細画面で「Payload」タブ（または「ペイロード」）を選択します。
3. 表示された情報の中に\*\*「event：設定したイベント名」と「type：“track”」\*\*の2つがあれば、イベントは正常に発火・計測されています。\
   この確認ができた場合、30分〜1時間後にPtengineの「イベント分析」画面にも数値が反映されます。

<figure><img src="/files/bJ0ttuRJoaKlXew7K5Gf" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
下の画像のようなOCパケットが表示された場合、イベントが発火していない状況となります。デバイスごとにイベント設定が必要な可能性がありますので、[こちらの記事](/faq/start-guide/pc-sp-switch)をご確認ください。
{% endhint %}

<figure><img src="/files/U7AKB08ZCnhnW6m0APVT" alt=""><figcaption></figcaption></figure>


# コンバージョン

{% hint style="success" %}
**コンバージョン(CV)概要**

コンバージョン(CV)とは、サイト上でユーザーに到達してもらいたい目標、アクションを指します。Ptengineで目標ページURLへの到達や特定アクションによるコンバージョンを計測することができます。
{% endhint %}

📊 コンバージョンレポートのダイジェストでは以下の項目が確認できます：

* 推移グラフ
* CV数
* CV成果
* CV流入元
* 自然検索キーワード
* CVキャンペーン名
* キャンペーン流入

### 推移グラフ

推移グラフではCV数・CV率・CV成果の三つの指標に切り替えることができます。

<figure><img src="/files/lJMLstvankVdKhG3kU1r" alt=""><figcaption></figcaption></figure>

### CVレポートの内容

6タイプのCVレポートをご用意しています。いずれの内容もマウスカーソルを合わせるとフィルタアイコンが出現し、ワンクリックでセグメントが可能です。

<figure><img src="/files/sHUOjUi7HmTub8teJcch" alt=""><figcaption></figcaption></figure>

#### CV数及びCV成果

* CV数：コンバージョン設定によって設定した条件と一致した訪問数です。
* CV成果：CV設定した際に定めた「値」を計算したものです。設定時には1CVあたりに加算する値、減算する値が設定できます。

<figure><img src="/files/Q17U3DUOX5Fq9vYUgdlH" alt=""><figcaption></figcaption></figure>

#### CV流入元及び自然検索キーワード

* CV流入元：コンバージョンの流入元を訪問数の多い順に表示しています。
* 検索エンジン：経由した検索エンジンを訪問数の多い順に表示しています。

<figure><img src="/files/GDTxRF8nVUYJzXZbJgCN" alt=""><figcaption></figcaption></figure>

#### CVキャンペーン名及びキャンペーン流入

* これらは UTMパラメータ により取得されたデータに基づいて表示されます。
* コンバージョンの貢献度の高いキャンペーン名や流入元が調査できます。

<figure><img src="/files/j21ckDnphwOT4ayxWTi0" alt=""><figcaption></figcaption></figure>


# コンバージョンとは

> コンバージョンの管理画面については[コンバージョンの管理画面](/insight/conversion/management)をご覧ください。

### 「コンバージョン」とは何か、そしてなぜ「コンバージョン」を設定する必要があるのか？ <a href="#shen-me-shi-zhuan-hua-yi-ji-ru-he-xu-yao-she-zhi-zhuan-hua" id="shen-me-shi-zhuan-hua-yi-ji-ru-he-xu-yao-she-zhi-zhuan-hua"></a>

コンバージョンは、ビジネス目標（Goal）に基づいて設定され、訪問者の行動（会員登録、カート追加、決済完了など）によってトリガーされます。これにより、各コンバージョンポイントにおけるコンバージョン率を把握できます。

コンバージョンは以下の目的で活用できます。

1. **目標達成数、その価値とトレンドの把握** コンバージョンの発生数を把握するだけでなく、プロモーション前後のコンバージョンの変化や、目標コンバージョン前の離脱状況を可視化することで、今後のサイト分析を推進できます。
2. **最も価値のあるチャネルと広告の把握** 各広告の出稿がどれだけのコンバージョン増加をもたらしたか、またどのチャネルからのユーザーがどれだけコンバージョンしたかを確認できます。
3. 広告効果の最適化（ROI）コンバージョンに価値を設定することで、広告チャネルがもたらす実際の価値を把握でき、予算配分の最適化に役立ちます。

### コンバージョンレポート <a href="#zhuan-hua-bao-gao" id="zhuan-hua-bao-gao"></a>

「CV」のドロップダウンメニューから、最大6つのレポートを確認できます。すべての結果はワンクリックでセグメントを適用でき、フィルターを適用したい位置にマウスを移動し、表示されるフィルターアイコンをクリックするだけです。

**1.コンバージョン、コンバージョン占有率とコンバージョン率** コンバージョン回数：コンバージョン設定で設定した目標に到達した訪問回数です。 コンバージョン占有率：コンバージョン回数が全コンバージョン回数に占める割合です。 コンバージョン率：コンバージョンが発生した訪問が全訪問に占める割合です。

**2.目標ソースと検索キーワードのコンバージョン** ソースセクションでは、各ソースのコンバージョン結果を確認できます。ソースはコンバージョン合計数として表示されます。

キーワードセクションでは、検索エンジン経由の訪問が「タグクラウド」形式で表示されます。キーワードが大きいほど、検索ボリュームが高いことを示します。ただし、Googleの仕様変更により、すべてのキーワードを取得して表示することは困難になっています。

**3.広告名と広告ソースのコンバージョン** 各コンバージョンに貢献した広告名と広告ソースを確認できます。コンバージョンキャンペーン名とキャンペーントラフィックはUTMパラメータに基づいています。<br>


# コンバージョンの管理画面

{% hint style="success" %}
**概要**

Ptengine Insightのコンバージョン設定は、ウェブサイトにおける目標達成（商品の購入、問い合わせ、資料請求など）を計測するための機能です。

ユーザーの特定の行動（ボタンクリック、ページ閲覧など）をコンバージョン（CV）として定義し、その達成数や達成率を分析できます。

また、事業の成長に貢献する「ポジティブCV」と、事業にマイナスの影響を与える「ネガティブCV」（退会など）の両方を設定・計測することが可能です。
{% endhint %}

Ptengine Insightでコンバージョン設定を行う際の詳細な手順をご紹介します。管理画面やサイト形態に応じた設定方法をわかりやすく解説します。

### この機能のメリット

* **サイトの目標達成度を可視化**\
  商品購入や会員登録などの最終的な成果を数値で正確に把握できます。
* **柔軟なゴール設定：**\
  サイトの目的に応じて、ページの閲覧、クリックイベント、特定のページグループへのアクセスなど、様々なユーザー行動をコンバージョンとして設定できます。
* **多角的な分析：**\
  ポジティブCVとネガティブCVを分けて計測することで、事業の成長要因と課題点の両方を分析できます。

### よくある利用シーン

この機能は、以下のような場面で役立ちます。

* **サンクスページへの到達を計測したい場合**\
  商品購入やフォーム送信後に表示される「完了ページ（サンクスページ）」へのアクセスをCVとして計測する。
* **重要なページへのアクセスを分析したい場合**\
  「料金ページ」や「サービス詳細ページ」など、CVに至るまでの中間地点となるページへのアクセスをCV（中間CV）として設定し、ユーザーの関心度を測る。
* **外部サイトへの遷移を計測したい場合**\
  外部のカートシステムや予約フォームへ遷移するボタンのクリックをCVとして計測する。
* **電話での問い合わせを計測したい場合**\
  ウェブサイト上の電話番号ボタンのタップをCVとして設定し、電話による問い合わせ数を把握する。

### 設定方法

コンバージョンは、ユーザーの行動に応じて3つの方法で設定できます。\
はじめに、管理画面の歯車マークをクリックして設定メニューを開き、「コンバージョン設定」へ進みます。

<figure><img src="/files/LlQ4DWnsNdQnQK8KtG9N" alt=""><figcaption></figcaption></figure>

#### **方法1：** CTAクリックをコンバージョンとして計測する方法

{% hint style="success" %}
**適用ケース**

* 記事LPのリンククリックで外部サイトへ遷移し、それ以上のトラッキングができない場合
* CTAクリックで外部のカートシステムやフォームシステムへ遷移する場合
* 電話問い合わせのトラッキングを行いたい場合
  {% endhint %}

ボタンやリンクのクリックをコンバージョンとして設定します。

この方法では、事前に**イベント設定**が必要です。

1. ゴール設定で「イベント」を選択します。
2. **【1つのイベントを登録する場合】**
   * マッチ条件を「完全一致する」に設定します。
   * プルダウンから、事前に設定したイベントを選択します。

     <figure><img src="/files/P7Wtn1P8twSFHfEIwWP9" alt=""><figcaption></figcaption></figure>
3. **【複数のイベントをまとめて登録する場合】**

   イベント名の命名規則に合わせて、「含む」などのマッチングルールを選択し、条件を指定します。（例：イベント名に "add\_success" を含むものをすべて登録）<br>

   <figure><img src="/files/QJSTsAyfuUkktAPPr22b" alt=""><figcaption></figcaption></figure>

   <figure><img src="/files/zAHFSeXX5LkOZRf4xCVj" alt=""><figcaption></figcaption></figure>
4. 「保存」ボタンをクリックします。
5. 必要に応じて、ファネルやコンバージョンに紐づく値（金額など）を設定します。

#### **方法2：特定ページへのアクセスをコンバージョンとして計測する**

{% hint style="success" %}
**適用ケース**

* 購入や申込完了のサンクスページがある場合
* 「料金ページを見たユーザー」など、中間ゴール地点となるページの分析をしたい場合
  {% endhint %}

サンクスページなど、特定のURLへの到達をコンバージョンとして設定します。

#### 設定手順

1. ゴール設定でURLを選択
2. 5種類のマッチングルールから適切なものを選択
3. 登録したいURLの規則に基づいてマッチングルールを設定
4. 保存ボタンをクリック
5. 必要に応じてファネルや値の設定を行う

<figure><img src="/files/KZvO1wbDBCf8AK1NO3v9" alt=""><figcaption></figcaption></figure>

#### **方法3：特定のページグループへのアクセスをコンバージョンとして計測する**

任意のページグループへのアクセスをコンバージョンとして計測できます。

{% hint style="success" %}
**適用ケース**

「物件詳細ページの閲覧」や「店舗一覧ページの閲覧」など、重要なページグループへの到達がサイト上のゴールとなっている場合
{% endhint %}

複数のページをまとめた「ページグループ」へのアクセスをコンバージョンとして設定可能ですが、この方法では、事前に**ページグループ設定**が必要です。

1. ゴール設定で「ページグループ」を選択します。
2. プルダウンから、事前に設定したページグループを選択します。
3. 「保存」ボタンをクリックします。
4. 必要に応じて、ファネルや値を設定します。

<figure><img src="/files/WrsXfyGtcOHjBHaP5Zde" alt=""><figcaption></figcaption></figure>

### ポジティブCV/ネガティブCV <a href="#betterdocs-entry-title" id="betterdocs-entry-title"></a>

ポジティブCVは事業にプラスとなる影響を与えたコンバージョンです。例えば購買、定期購読登録、メールアドレス登録などです。

それに対しネガティブCVは退会やダウングレードなど事業運営にネガティブなコンバージョンです。

これらは[コンバージョン設定](https://help.ptengine.jp/docs/conversion-settings/)時に設定できます。

ここではCVの推移グラフ及びレポートが確認できます。

![](/files/m6MXfFuor5EckfrOibWQ)

### データの確認方法 <a href="#id-0-toc-title" id="id-0-toc-title"></a>

#### CV推移グラフ <a href="#id-0-toc-title" id="id-0-toc-title"></a>

推移グラフではCV数・CV率・CV成果の三つの指標に切り替えることができます。\
プルダウンメニューを利用して指標を切り替えることができます。

![](/files/FRziW2h4wNrFQ6oXF5Ac)

#### レポート <a href="#id-1-toc-title" id="id-1-toc-title"></a>

ここではCV名・CV数・CV率・成果の数値が確認できます。

![](/files/iU2qFdpR4NLp02Euvu4x)

**検索**:CV名を検索します

**セグメント**: ![](/files/Zd0yizp9b3gFg20eyNTT)をクリックすることで、ワンクリックでセグメントし、詳細の分析が可能です。

**ファネル**:ファネルが設定されている場合は![](/files/XofpjocGRTcdH3Q5a5vV)よりすぐにファネルデータにアクセスします。

* 事前にPtengine数値レポートでゴール地点のURLが正しく計測されているか確認してください
* ゴール地点にタグが設置されていない場合は、CTAクリックをコンバージョンとして計測することをお勧めします
* コンバージョン登録時のURL設定（[www.や末尾の/、phpなど）が実際のURLと完全に一致していることを確認してください](http://www.や末尾の/、phpなど）が実際のURLと完全に一致していることを確認してください)


# ファネルの結果分析

{% hint style="success" %}
**ファネル分析機能とは**

コンバージョン（CV）に至るまでのユーザーの行動を可視化する強力なツールです。この機能を使用することで、以下のメリットが得られます：

* ユーザーの離脱が起こりやすい箇所を特定
* 各ステップでの進捗率を把握
* コンバージョン率向上のためのインサイトを獲得
  {% endhint %}

### ファネルの例：ネットショッピングの場合

典型的なネットショッピングのユーザー行動を例に、ファネルの流れを見てみましょう：

1. 商品一覧ページの閲覧
2. 商品情報の確認
3. カート画面へ遷移
4. お客様情報の入力、配送方法の選択
5. 注文内容の最終確認
6. 注文完了

![](/files/VDLfxAZmVRKHqRWCVkVi)

このような流れをファネルとして設定することで、各ステップでの離脱率や進捗率を分析できます。

{% hint style="info" %}
離脱が多いステップを特定し、そのステップでのユーザー体験を改善することで、全体のコンバージョン率を向上させることができます。
{% endhint %}

## **画面の説明**

<figure><img src="/files/1bWwDYwaCkqFdwqJzPJ7" alt=""><figcaption></figcaption></figure>

1. **CV数とCV率**: 最終ステップでのコンバージョン数と、ファネル全体のコンバージョン率（流入者数÷CV数）を表示
2. **ファネルリスト**: 設定済みのファネルを切り替えて表示
3. **初期流入数**: 最初のステップに流入したユーザー数
4. **離脱数**: 各ステップで次に進まずに離脱したユーザー数
   * 🔍 数字をクリックすると、流入元や離脱先のページ情報を確認可能

<figure><img src="/files/DL4iNkp7GsKUepJOFLrQ" alt=""><figcaption></figcaption></figure>

1. **進行数と比率**: 次のステップに進んだユーザー数とその割合
2. **直接流入数**: 前のステップを経由せずに直接流入したユーザー数

{% hint style="danger" %}
**注意**: ファネル分析を有効活用するためには、適切なステップ設定が重要です。
{% endhint %}

詳細な設定方法については、[設定動画](https://app.arcade.software/share/6jKl9fqSwo0Eyo1otZ46)をご参照ください。

ファネル分析を活用して、ユーザーの行動を深く理解し、サイトやアプリの改善につなげましょう。コンバージョン率の向上は、ビジネスの成長に直結します！


# スマートヒートマップ

{% hint style="info" %}
「内容が多くて、理解には時間がかかります。」

「専門用語多い、理解しづらい」

もしこのような悩みを持ちの方は、**タイトル右上のボタン**をぜひ活用してください！

AIが長い内容を説明していただけます！

<img src="/files/Dx2KX1Rq2kbkVSc5aGQc" alt="" data-size="original">
{% endhint %}

Ptengine のスマートヒートマップは、設置済みのタグから収集したデータをもとに、コンテンツへの**滞在時間 / 離脱 / クリック / コンバージョン**を素早く分析できる機能です。

スマートサマリーでは実際のページ構成を読み取り、収集データと組み合わせて、データの解釈と「それがなぜ起きているか」を AI が自動で分析します。

8 つの機能タブで、ページ上のユーザー行動を多角的に確認できます。

<figure><img src="/files/6r5YjSzP9l8HrGEBneTL" alt=""><figcaption><p>スマートヒートマップのツールバー全体（各機能の入口）</p></figcaption></figure>

***

## このツールで分かること（活用シーン）

| 知りたいこと                    | おすすめの機能                                                      |
| ------------------------- | ------------------------------------------------------------ |
| ページ全体の状況を素早くつかみたい         | [スマートサマリー](/insight/smart-heatmap/smart-summary)             |
| ユーザーがどこに注目しているか           | [滞在ヒートマップ](/insight/smart-heatmap/stay-heatmap)              |
| どこで離脱が起きているか              | [離脱ヒートマップ](/insight/smart-heatmap/exit-heatmap)              |
| どのボタンやリンクが押されているか         | [クリックヒートマップ](/insight/smart-heatmap/click-heatmap)           |
| どのコンテンツが成果に効いているか         | [コンバージョン貢献ヒートマップ](/insight/smart-heatmap/conversion-heatmap) |
| ページ・ブロック・要素の数値をまとめて見たい    | [数値レポート](/insight/smart-heatmap/numerical-report)            |
| 改修前後／セグメント別／複数視点を並べて比較したい | [比較ヒートマップ](/insight/smart-heatmap/comparison)                |
| ヒートマップ画像を社内資料にそのまま使いたい    | [スクリーンショット](/insight/smart-heatmap/screenshot)               |

***

## 8 つの機能タブ

| タブ                                                           | 種類      | 概要                                    |
| ------------------------------------------------------------ | ------- | ------------------------------------- |
| [スマートサマリー](/insight/smart-heatmap/smart-summary)             | AI 分析   | AI がページデータを分析し、ページ全体・ブロック単位のサマリーを自動生成 |
| [滞在ヒートマップ](/insight/smart-heatmap/stay-heatmap)              | ヒートマップ  | ブロックごとの滞在時間を可視化                       |
| [離脱ヒートマップ](/insight/smart-heatmap/exit-heatmap)              | ヒートマップ  | ブロックごとの離脱状況を可視化                       |
| [クリックヒートマップ](/insight/smart-heatmap/click-heatmap)           | ヒートマップ  | 要素ごとのクリック行動を可視化                       |
| [コンバージョン貢献ヒートマップ](/insight/smart-heatmap/conversion-heatmap) | ヒートマップ  | ブロック・要素ごとの CV 貢献度を評価                  |
| [数値レポート](/insight/smart-heatmap/numerical-report)            | データレポート | ページ・ブロック・要素のパフォーマンスを総合的にレポート化         |
| [比較ヒートマップ](/insight/smart-heatmap/comparison)                | 比較      | 複数のヒートマップを並べて比較                       |
| [ツールバー機能](/insight/smart-heatmap/toolbar)                    | 共通      | ページ切り替え・期間・セグメント・共有・ページ保存などの共通操作      |

***

## 始める前に — 設定の順番

スマートヒートマップの価値を最大限に引き出すには、以下の順番で設定するのがおすすめです。

```
① コンバージョン（CV）を設定
② ブロックを設定
③ 要素を設定
```

| 設定        | 設定すると                                            |
| --------- | ------------------------------------------------ |
| ① コンバージョン | コンバージョン貢献ヒートマップ・数値レポートでの CV 分析、スマートサマリーの分析精度が上がる |
| ② ブロック    | 滞在・離脱・コンバージョン貢献のブロック単位分析、スマートサマリーのブロック解釈ができる     |
| ③ 要素      | クリック・コンバージョン貢献の要素単位分析、CTA 設定が使える                 |

> **完璧を狙わず、まず一度設定してみるのがおすすめです。** 設定はあとからいつでも変更できます。

詳しい手順はこちら：

* [はじめに：3 つの設定順序](/insight/smart-heatmap/getting-started)
* [ブロック・要素の設定方法](/insight/smart-heatmap/block-element-settings)

***

## クラシック版・β 版から移行する方へ

旧ヒートマップ（クラシック版）や β 版で使っていた機能の現在地、計算方法の変更点、新機能のショートカットなどを対応表でまとめています。

→ [クラシック版・β 版からの変更点](/insight/smart-heatmap/migration-from-classic)

***

## 動的サイトへの対応

Ptengine は開発当初からダイナミックヒートマップ技術を採用しており、**動的なページにも対応する描画方式**を備えています。

ハンバーガーメニュー、メガメニュー、スライド、アコーディオンなどの動的コンテンツ、レスポンシブサイト、インタラクティブなデザイン、SPA など、さまざまなサイトに対応しています。

ツールバーの **画面操作モード** を使えば、タブやアコーディオンを開いた状態でもヒートマップを確認できます。詳しくは [ツールバー機能](https://helps.ptengine.com/insight/pages/V0kGYP5UgSSoGxITlE8W#画面操作モード) をご覧ください。

***

## 注意事項

以下のケースでは、ヒートマップが正しく取得できないことがあります：

* iframe を埋め込んでいるページ
* JavaScript で動的に ID が生成されるサイト
* ページの高さやコンテンツが頻繁に変わる場合
* 同一ページ内で ID 名が重複している場合

対処方法は [特殊ケース・トラブルシュート](/insight/smart-heatmap/special-cases) をご覧ください。

推奨ブラウザは Chrome / Microsoft Edge / Firefox です。Chrome 拡張機能の [Ptengine アシスタント](/start-guide/what-is-ptengine/ptengine-assistant) を入れておくと、互換性が高まります。


# はじめに：3つの設定順序

以下の 3 つの設定を**この順番で**行ってください。設定を整えることで、機能の価値が最大限に発揮できます。

```
① コンバージョン（CV）を設定
② ブロックを設定
③ 要素を設定
```

***

## この順番にする理由

各設定が、次のステップで使う指標の土台になります。

| 設定        | 設定が済んでいると                                                  | まだ設定していない場合          |
| --------- | ---------------------------------------------------------- | -------------------- |
| ① コンバージョン | コンバージョン貢献ヒートマップ・数値レポートで CV 指標が確認でき、スマートサマリーの CV 分析にも反映されます | コンバージョン関連の数値は表示されません |
| ② ブロック    | 滞在・離脱・ブロック単位の CV 分析でページのどこが効いているか見えてきます                    | ブロック単位の指標は表示されません    |
| ③ 要素      | クリック・要素コンバージョンが分析でき、CTA として重要要素を強調できます                     | 要素単位の指標は表示されません      |

***

## ステップ 0：前提 — Ptengine タグの設置

スマートヒートマップは、対象ページに Ptengine の計測タグが設置されデータが取れている状態でご利用いただけます。

* まだ設置されていない場合は [基本タグの設置方法](/start-guide/quick/tag-setup) をご覧ください
* タグの発火状況を確認したい場合は [タグが正常に発火しているか確認する方法](/faq/start-guide/check-tag-firing) をご覧ください

***

## ステップ 1：コンバージョンを設定

コンバージョンを設定すると、各ブロック・要素がコンバージョンにどれだけ貢献しているか見えてきます。

**設定方法（2 通り）**

1. ヒートマップ画面右上の「**コンバージョン設定**」ボタンから
2. コンバージョン貢献ヒートマップ内の「コンバージョン設定」ボタンから

設定方法の詳細は [コンバージョンとは](/insight/conversion/what-is-conversion) と [コンバージョンの管理画面](/insight/conversion/management) をご覧ください。

<figure><img src="/files/FnKfPMy9ek8jXxrme4B4" alt=""><figcaption><p>コンバージョン設定の入口</p></figcaption></figure>

***

## ステップ 2：ブロックを設定

ページを論理的なエリア（ブロック）に分けることで、エリアごとの**滞在・離脱・コンバージョン**を見比べられるようになります。

**設定方法（3 通り）**

1. ヒートマップ画面右上の「**ブロック設定**」ボタンから
2. 滞在・離脱・コンバージョン貢献ヒートマップ内の「**ブロックを編集**」ボタンから
3. ブロック未設定の際に表示されるポップアップから

<figure><img src="/files/KjPDdhhYXcjfmeMb4J8c" alt=""><figcaption><p>ブロック設定の入口</p></figcaption></figure>

ブロック設定画面の操作詳細は [ブロック・要素の設定方法](https://helps.ptengine.com/insight/smart-heatmap/pages/nMt0VhjvPFQTPK8rfwck#ブロックの設定) をご覧ください。

***

## ステップ 3：要素を設定

ページ上のインタラクション可能な要素（ボタン・リンク・画像・フォームなど）にタグを付けると、**クリックや要素コンバージョン**を要素単位で分析でき、重要な要素は **CTA** として強調できます。

**設定方法（3 通り）**

1. ヒートマップ画面右上の「**要素設定**」ボタンから
2. クリックヒートマップ内の「**要素を編集**」ボタンから
3. クリックヒートマップに切り替えると自動でスキャン

<figure><img src="/files/WAUykyoXG8UXt4QjHV1z" alt=""><figcaption><p>要素設定の入口</p></figcaption></figure>

要素設定画面の操作詳細（CTA 設定、固定表示要素、リネームなど）は [ブロック・要素の設定方法](https://helps.ptengine.com/insight/smart-heatmap/pages/nMt0VhjvPFQTPK8rfwck#要素の設定) をご覧ください。

***

## 設定後に広がる分析

3 つの設定が揃うと、次のような分析がフルに使えるようになります。

* **滞在ヒートマップ** — どのブロックが注目されているか
* **離脱ヒートマップ** — どこで離脱が発生しているか
* **クリックヒートマップ** — どの要素がクリックされているか
* **コンバージョン貢献ヒートマップ** — どのブロック・要素が CV に効いているか
* **スマートサマリー** — AI による全体・ブロック単位の自動分析
* **数値レポート** — ページ・ブロック・要素の総合データ

***

## 設定はあとからでも調整できます

> **完璧を狙わず、まず一度設定してみるのがおすすめです。**
>
> 実際にデータを見ながら「ここは一つのブロックにまとめたい」「この要素は CTA として強調したい」など、気づいたタイミングで見直していけます。

ページ構成を変更した場合は、ブロック設定画面の「**ブロックの再スキャン**」をご活用ください。詳しくは [特殊ケース・トラブルシュート](https://helps.ptengine.com/insight/smart-heatmap/pages/PYfRoojW3sRjjfMRr5WK#ページの高さが変わった場合) をご覧ください。

***

## 関連ページ

* [ブロック・要素の設定方法（詳細）](/insight/smart-heatmap/block-element-settings)
* [スマートヒートマップ概要](/insight/smart-heatmap)


# ブロック・要素の設定方法

ブロック・要素を設定すると、ページのどこが効いていて、どこに改善の余地があるかが見えてきます。本ページでは設定画面の操作と、それぞれの設定で広がる分析範囲をご紹介します。

> 設定の順番（① CV → ② ブロック → ③ 要素）と全体像は [はじめに：3 つの設定順序](/insight/smart-heatmap/getting-started) でご確認いただけます。

***

## 用語の定義

| 用語       | 定義                 | 例                               |
| -------- | ------------------ | ------------------------------- |
| **ブロック** | ページを論理的なエリアに分割した単位 | ヘッダー / メインビジュアル / お客様の声セクション など |
| **要素**   | ページ上の最小単位のコンテンツ    | ボタン / リンク / 画像 / 入力フォーム など      |

ブロックと要素を組み合わせると、**定量（数値）と定性（ヒートマップ）の両面**からコンテンツの効果が見えてきます。

> **ブロックの自動識別について**：スマートヒートマップは、ページの DOM 構造（`div` などのレイアウト要素）をもとに、ブロックを自動で識別します。ドロップダウンメニューやアコーディオンといった、ページ要素のインタラクティビティも考慮されます。

***

## コンバージョンの設定

コンバージョン目標を設定すると、各ブロック・要素がコンバージョンにどれだけ貢献しているかが分析できます。

### 設定方法（2 通り）

1. ヒートマップ画面右上の「**コンバージョン設定**」ボタンから
2. コンバージョン貢献ヒートマップ内の「**コンバージョン設定**」ボタンから

<figure><img src="/files/FnKfPMy9ek8jXxrme4B4" alt=""><figcaption><p>コンバージョン設定の入口</p></figcaption></figure>

### 設定画面の使い方

* **左側**：追加済みのコンバージョン一覧（新規追加もここから）
* **右側**：レポートに表示するコンバージョンを選択（ドラッグで順序変更）

<figure><img src="/files/rKG6pBRptva9nWaoUtdz" alt=""><figcaption><p>コンバージョン設定画面（左：追加済み一覧、右：レポート表示用の選択）</p></figcaption></figure>

> **💡 一番上のコンバージョンが「主コンバージョン」になります**
>
> 右側パネルの**最上位（1 番目）に並んでいるコンバージョン**が、自動的にこのページの **主コンバージョン**として扱われます。
>
> 主コンバージョンは、[スマートサマリー](/insight/smart-heatmap/smart-summary) の「**広告効果分析**」と「**オーディエンス分析**」でコンバージョン率を計算する際の基準になります。複数のコンバージョン目標を設定していても、これらの分析では主コンバージョンだけが参照されます。
>
> 主コンバージョンを変更したい場合は、右側パネルで対象のコンバージョンを**ドラッグして 1 番目に移動**するだけで切り替わります。

設定手順の詳細は [コンバージョンの管理画面](/insight/conversion/management) をご覧ください。

***

## ブロックの設定

ページを論理的なエリアに分けると、エリアごとの**滞在・離脱・コンバージョン**が見比べられるようになります。

### 設定方法（3 通り）

1. ヒートマップ画面右上の「**ブロック設定**」ボタンから
2. ヒートマップ内の「**ブロックを編集**」ボタンから
3. ブロック未設定の際に表示されるポップアップから

<figure><img src="/files/KjPDdhhYXcjfmeMb4J8c" alt=""><figcaption><p>ブロック設定の入口</p></figcaption></figure>

<figure><img src="/files/IPiWwUaU5XvujnMWVGy9" alt=""><figcaption><p>ブロック設定画面</p></figcaption></figure>

### ブロック設定画面の主な操作

| 操作         | 説明                       |
| ---------- | ------------------------ |
| 保存         | 設定したブロックを保存              |
| デバイス切り替え   | PC・スマートフォン別に設定           |
| 元に戻す・やり直し  | 操作の取り消し・やり直し             |
| 画面操作モード    | タブ・アコーディオンなど通常は非表示の要素を確認 |
| ブロックの再スキャン | ページ構造が変わったときに再スキャン       |
| ブロック名の変更   | より分かりやすい名前に変更            |

> ページの高さやコンテンツが大きく変わったときは、「**ブロックの再スキャン**」を実行すると最新のレイアウトに合わせて整えられます。詳しくは [特殊ケース・トラブルシュート](https://helps.ptengine.com/insight/smart-heatmap/pages/PYfRoojW3sRjjfMRr5WK#ページの高さが変わった場合) をご覧ください。

***

## 要素の設定

ページ上のインタラクション可能な要素（ボタン・リンク・画像・フォームなど）にタグを付けると、要素単位の挙動が細かく分析できます。

### 設定方法（3 通り）

1. ヒートマップ画面右上の「**要素設定**」ボタンから
2. クリックヒートマップ内の「**要素を編集**」ボタンから
3. クリックヒートマップに切り替えると自動でスキャン

<figure><img src="/files/WAUykyoXG8UXt4QjHV1z" alt=""><figcaption><p>要素設定の入口</p></figcaption></figure>

<figure><img src="/files/0ustQ1tUo4xwJB1QYqxa" alt=""><figcaption><p>要素設定画面</p></figcaption></figure>

### 要素設定画面の主な操作

| 操作          | 説明                                  |
| ----------- | ----------------------------------- |
| 保存          | 設定した要素を保存                           |
| 要素のスキャン     | 要素を再スキャン                            |
| ページ設定のリセット  | 全要素の設定をリセット                         |
| 要素名の変更      | より分かりやすい名前に変更                       |
| **CTA に設定** | 重要な CTA としてマーク。コンバージョンレポートで強調表示されます |
| **固定表示に設定** | スクロールしても常に表示される要素（フローティング要素）として設定   |
| 削除          | 要素マークを削除                            |

### CTA とは

購入ボタン・申し込みボタンなど、ユーザーに行動を促す重要な要素を **CTA（Call To Action）** としてマークしておくと、その後の分析で扱いやすくなります。

* クリックヒートマップとコンバージョン貢献ヒートマップで「CTA のみ表示」フィルターを使うと、関心のある要素に絞れます
* 数値レポートでは CTA クリック数・CTA クリック率という独立した指標で確認できます

### 固定表示要素とは

スクロールしても常に画面に表示される要素（追従ヘッダー、フローティング購入ボタン、サイドバナーなど）を **固定表示要素** として設定しておくと、ヒートマップで多重カウントされず正確な計測につながります。

> **ショートカット操作**：要素設定画面または設定済み画面で要素にマウスを乗せた状態で `Option` キー（Mac）または `Alt` キー（Windows）を押すと、固定表示要素を一時的に表示して確認できます。

***

## β 版から移行する方への注意

ブロックコンバージョンの計算方法が変更されています。

|             | 計算対象                                    |
| ----------- | --------------------------------------- |
| 変更前（β 版）    | ブロックを見たすべてのユーザーの CV をカウント               |
| **変更後（現行）** | ブロックに**設定した閾値以上滞在**してから CV に至った場合のみカウント |

閾値はヒートマップ画面右上の「**ページコンバージョン設定**」から変更できます。デフォルトは **5 秒**です。

詳しくは [コンバージョン貢献ヒートマップ](https://helps.ptengine.com/insight/smart-heatmap/pages/c3rcwHED568CT0BDJA9Q#ブロックコンバージョン率の考え方) をご覧ください。

***

## 関連ページ

* [はじめに：3 つの設定順序](/insight/smart-heatmap/getting-started)
* [滞在ヒートマップ](/insight/smart-heatmap/stay-heatmap)
* [離脱ヒートマップ](/insight/smart-heatmap/exit-heatmap)
* [クリックヒートマップ](/insight/smart-heatmap/click-heatmap)
* [コンバージョン貢献ヒートマップ](/insight/smart-heatmap/conversion-heatmap)
* [特殊ケース・トラブルシュート](/insight/smart-heatmap/special-cases)


# スマートサマリー

AI がページデータを自動で分析し、**ページ全体・ブロック単位・広告チャネル別・訪問者セグメント別**の主要インサイトをまとめて提示します。ヒートマップ分析が初めての方でも、ページの状況とその「なぜ」がすぐにつかめます。

***

## このサマリーで分かること

* ページ全体の分析結論と、注目・離脱の主要ポイント
* 各ブロックがユーザー心理のどの段階を担っているか
* 広告チャネルごとのパフォーマンス比較
* 訪問者セグメント（地域・デバイス・新規／リピーターなど）ごとの行動傾向

> **スマートサマリーを最大限に活用するために**：対象ページに [ブロック設定](https://helps.ptengine.com/insight/smart-heatmap/pages/nMt0VhjvPFQTPK8rfwck#ブロックの設定) が済んでいると、ブロック単位の分析が見えるようになります。設定がまだの場合や、ページ構成を大きく変えた直後は、サマリーがうまく生成されないこともあります。

***

## 使い方

ヒートマップツールバーの **「スマートサマリー」** タブをクリックすると、AI による分析結果が右側パネルに表示されます。

右側パネルには、以下の 3 つのサブタブが用意されています：

* ユーザー行動分析
* 広告効果分析
* オーディエンス分析

<figure><img src="/files/jSsUqf2XuJYZIap5o5tX" alt=""><figcaption><p>スマートサマリー画面（右側パネルに主要インサイトと3つのサブタブ）</p></figcaption></figure>

***

## 1. ユーザー行動分析

ページ上のユーザー行動を、ブロック単位で読み解きます。

### 何が見えてくるか

* **主要インサイト**：ページ全体の分析結論（例：「ファーストビューで 36% が離脱しており、価値提案の具体性が課題かもしれません」）
* **フェーズ別行動分析**：ページを心理的な 4 段階に分け、それぞれの段階でユーザーがどう動いたかを解説
* **注目ポイント**：ユーザーの関心が集まっている箇所と、その背景
* **離脱ポイント**：ユーザーが離脱しやすい箇所と、考えられる原因

### ページタイプの自動識別

ユーザー行動分析を行うとき、スマートヒートマップはまず**ページの種類を自動で識別**します。ページタイプによって訪問目的や閲覧パターンは大きく違うため、分析フレームワークもそれに合わせて切り替わります。

| ページタイプ       | 特徴                              |
| ------------ | ------------------------------- |
| 広告 LP        | ナビゲーションなし、単一 CTA、長文テキスト構成       |
| 記事 LP        | 編集記事風レイアウト、教育的コンテンツ、ソフト CTA     |
| 商品詳細ページ（PDP） | Buy Box、ユーザーレビュー、商品ギャラリー        |
| ホームページ       | フルナビゲーション、Hero Banner、ブランドストーリー |
| キャンペーンページ    | イベント主導、クーポン・カウントダウン、タイムセール      |
| その他          | ログインページ、お問い合わせページ など            |

### 4 段階の心理モデル

識別されたページタイプをふまえて、各ブロックのコンテンツを **4 つの心理段階**に分けて分析します。

| 段階      | ユーザーの問い         | 意味             |
| ------- | --------------- | -------------- |
| Phase 1 | 「自分に関係があるか？」    | 関連性の確立・第一印象の形成 |
| Phase 2 | 「私の課題を理解しているか？」 | 共感の醸成・理解コストの低減 |
| Phase 3 | 「なぜこの商品を買うべきか？」 | 根拠と証拠の提示・信頼の構築 |
| Phase 4 | 「本当に安全か？」       | リスク低減・行動の後押し   |

### ページタイプ別のフェーズ名

同じ Phase 1 でも、PDP のユーザーは「購入判断に必要な情報が揃っているか」を確認し、記事 LP のユーザーは「読み進める価値があるか」を見ています。そのため、**ページタイプごとに各フェーズの名前が最適化**されています。

| ページタイプ    | Phase 1          | Phase 2    | Phase 3             | Phase 4     |
| --------- | ---------------- | ---------- | ------------------- | ----------- |
| 広告 LP     | 第一印象を受け止める       | 共感を生む      | 購入理由を与える            | 不安を解消する     |
| 記事 LP     | 読み進める信頼をつくる      | 課題への共感を強める | 解決策で納得させる           | 行動のハードルを下げる |
| 商品詳細ページ   | 購入判断要素を揃える       | 商品価値を伝える   | 信頼の根拠を示す            | 購入行動を後押しする  |
| ホームページ    | ブランドとターゲットを明確にする | 次の導線へ誘導する  | 信頼と理由を強化する          | 継続関係につなげる   |
| キャンペーンページ | キャンペーン価値に集中する    | 参加ルールを説明する | カテゴリで素早く商品を選べるようにする | 注文完了まで後押しする |

> Phase 1〜4 の番号はすべてのページタイプで共通の対応キーで、フェーズ名はページタイプに応じた表示ラベルです。分析レポートにはページタイプに合わせた名前で表示されます。

この分類は、ページを上から順に区切るのではなく、**各ブロックのコンテンツが果たしている心理的な役割**をもとに自動で判定されます。

### 使用する主な指標

| 指標           | 役割                 |
| ------------ | ------------------ |
| ブロック平均滞在時間   | ユーザーの関心度の判定        |
| ブロック離脱率      | 離脱ポイントの特定          |
| インプレッション率    | ブロックへの表示状況の確認      |
| ブロックコンバージョン率 | コンテンツの CV 貢献度の補足判断 |

***

## 2. 広告効果分析

ページに流入した広告チャネルのパフォーマンスを比較分析します。

> **コンバージョン率の計算基準について**：本分析のコンバージョン率は、コンバージョン設定画面で**最上位に並んでいる主コンバージョン**を基準に計算されます。複数のコンバージョン目標を設定している場合でも、ここでは主コンバージョンが参照されます。基準にしたいコンバージョンを変えたいときは、コンバージョン設定画面で対象のコンバージョンを 1 番目にドラッグすると切り替わります。詳しくは [ブロック・要素の設定方法 — コンバージョンの設定](https://helps.ptengine.com/insight/smart-heatmap/pages/nMt0VhjvPFQTPK8rfwck#コンバージョンの設定) をご覧ください。

### 何が見えてくるか

* **主要インサイト**：効果の高い広告チャネルと低い広告チャネルの対比（例：「Google 検索はコンバージョン率 2.1% で最も効果的、Instagram 広告は 0.3% で改善余地あり」）
* **全体概況**：トラフィックの構成と、主な広告チャネルのパフォーマンス概要

### 分析の仕組み

広告効果分析では、各広告チャネルを**セッション数**と**コンバージョン率**の 2 軸で評価します。

| セッション数 | コンバージョン率 | 評価         | 推奨アクション                        |
| ------ | -------- | ---------- | ------------------------------ |
| 多い     | 高い       | 効果的なチャネル   | 維持・強化、成功要因を他チャネルへ横展開           |
| 少ない    | 高い       | 潜在力のあるチャネル | 配信量を慎重に拡大                      |
| 多い     | 低い       | 要注意チャネル    | ランディングページとの整合性を確認、改善が見込めなければ縮小 |
| 少ない    | 低い       | 検証中チャネル    | 小規模テストを続けて効果を見極め               |

> 特定のチャネルがトラフィックの 95% 以上を占めている場合は、比較分析ではなく全体概況として扱われます。
>
> **サマリーが表示されない場合**：訪問数やコンバージョン数が統計的に比較できない水準の場合や、対象期間内に有効な広告チャネル経由の訪問が見られなかった場合は、サマリーが生成されないことがあります。期間を広げたり、セグメント条件を見直してから再度ご確認ください。

### 使用する主な指標

| 指標        | 役割             |
| --------- | -------------- |
| 訪問数       | トラフィックの規模      |
| コンバージョン率  | チャネルの質の評価      |
| 直帰率       | ランディングページとの整合性 |
| クリック率     | ページ内でのエンゲージメント |
| CTA クリック率 | アクション意欲の指標     |
| 平均滞在時間    | コンテンツへの関与度     |

***

## 3. オーディエンス分析

訪問者セグメント（地域、デバイス、訪問者タイプなど）ごとの行動傾向を分析します。

> **コンバージョン率の計算基準について**：本分析のコンバージョン率も、**主コンバージョン**（コンバージョン設定画面の最上位）が基準になります。広告効果分析と同じ仕様です。

### 何が見えてくるか

* **主要インサイト**：質の高い訪問者セグメントと、改善余地のあるセグメントの対比（例：「リピーターのコンバージョン率は新規訪問者の 3 倍。リピーター向けの施策強化が有効」）
* **全体概況**：訪問者の構成と、主なセグメントのパフォーマンス概要

### 分析の仕組み

オーディエンス分析でも、広告効果分析と同じ**セッション数 × コンバージョン率**の 2 軸で各セグメントを評価します。

分析できるセグメントの例：

| セグメント種別 | 例                |
| ------- | ---------------- |
| 訪問者タイプ  | 新規訪問者、リピーター      |
| デバイス    | Mobile、PC、Tablet |
| 地域      | 国、都道府県           |
| 流入チャネル  | 自然検索、キャンペーン、直接流入 |
| 直帰／非直帰  | 直帰訪問者、非直帰訪問者     |

> **サマリーが表示されない場合**：選択した訪問者セグメントの訪問数が極端に少ない、もしくはコンバージョンが発生していないなど、比較分析に十分なデータがない場合はサマリーが生成されません。対象期間やセグメント条件を見直してみてください。

### 使用する主な指標

広告効果分析と同じ指標セットを使用します（CTA クリック率を除く）。

***

## AI サマリーの読み方のコツ

### スマートサマリーを「分析の出発点」として使う

スマートサマリーは、分析の**出発点**として最も効果的に活用できます。AI が示した洞察を入口に、詳しく見たい箇所を他のヒートマップタブで深掘りしていく流れがおすすめです。

| スマートサマリーの発見            | 次のステップ                                                               |
| ---------------------- | -------------------------------------------------------------------- |
| 「Phase 1 で離脱が多い」       | → [離脱ヒートマップ](/insight/smart-heatmap/exit-heatmap) でファーストビュー周辺を詳しく確認  |
| 「特定ブロックの注目度が高い」        | → [滞在ヒートマップ](/insight/smart-heatmap/stay-heatmap) で該当ブロックの詳細を確認      |
| 「特定広告チャネルのコンバージョン率が低い」 | → [ツールバー](/insight/smart-heatmap/toolbar) のセグメントでそのチャネルに絞ったヒートマップを確認 |
| 「リピーターのコンバージョン率が高い」    | → リピーター向けの施策を Experience で作成                                         |

### 注意点

* AI の分析結果は「**可能性の示唆**」であって、確定的な因果関係を示すものではありません
* 訪問数が少ないセグメントの分析結果は、参考程度にとどめるのがおすすめです
* 定期的に確認すると、時系列での変化が見えてきます

***

## プラン別の利用回数

スマートサマリーは AI を利用するため、プランに応じて利用回数の上限が設けられています。

ヒートマップ画面右下の「**サマリー機能残り利用回数**」で、現在の残数を確認できます。残数が不足してきた場合は、プランのアップグレードをご検討ください。

***

## 関連ページ

* [滞在ヒートマップ](/insight/smart-heatmap/stay-heatmap)
* [離脱ヒートマップ](/insight/smart-heatmap/exit-heatmap)
* [クリックヒートマップ](/insight/smart-heatmap/click-heatmap)
* [コンバージョン貢献ヒートマップ](/insight/smart-heatmap/conversion-heatmap)
* [指標リファレンス](/insight/smart-heatmap/metric-reference)


# 滞在ヒートマップ

ページ内の各ブロックでユーザーがどれだけ滞在したかが見えるヒートマップです。**滞在が長いエリア = ユーザーの関心が高いエリア**として、注目されている部分を素早く見つけられます。

***

## このヒートマップで分かること

* どのブロックがユーザーの関心を集めているか
* どのブロックが読み飛ばされているか
* 重要なコンテンツに、十分な注目が集まっているか

> [ブロック設定](https://helps.ptengine.com/insight/smart-heatmap/pages/nMt0VhjvPFQTPK8rfwck#ブロックの設定) が済んでいると、滞在ヒートマップの値がブロック単位で確認できるようになります。

***

## 2 つの表示モード

ヒートマップ左上のプルダウンで、表示モードを切り替えられます。デフォルトは **アテンション** です。まずは全体の注目分布を直感的につかみ、そのあと **ブロック滞在** で気になるブロックを数値で深掘りする流れがおすすめです。

| モード               | 特徴                            | こんなときに                    |
| ----------------- | ----------------------------- | ------------------------- |
| **アテンション**（デフォルト） | ピクセル単位の注目分布をサーモグラフィー（色の濃淡）で表示 | どの位置に視線が集まっているか、具体的に見たいとき |
| **ブロック滞在**        | ブロック単位で平均滞在時間（秒数）を表示          | どのセクションが人気か、ざっくり把握したいとき   |

<figure><img src="/files/QZWcEoz1TrXDgTWQAIx5" alt=""><figcaption><p>滞在ヒートマップ（ブロック滞在モード）</p></figcaption></figure>

***

## アテンションモード（色表示）

ユーザーの滞在時間を相対的に評価して、色の濃淡で表示します。

| 色  | 意味             |
| -- | -------------- |
| 赤色 | ユーザーが長く滞在したエリア |
| 青色 | ユーザーの関心が薄いエリア  |
| 透明 | 滞在時間がほぼゼロ      |

### アテンションが赤くなる 3 つのパターン

1. **画面の真ん中が最も赤くなる** — ユーザーの視線が集中するエリアです
2. **スクロールを止めた位置が重なると赤くなる** — 多くのユーザーが同じ場所で止まると、より赤く出ます
3. **画面を長く止めた位置が赤くなる** — 長く閲覧された位置ほど赤くなります

***

## ブロック滞在モード（数値表示）

各ブロック（セクション）の平均滞在時間を**秒数**で表示するモードです。

* 各ブロックに滞在秒数が大きく表示されます
* 右側パネルに、全ブロックのリストとインプレッション率が並びます

### ブロック詳細データの確認

ヒートマップ上のブロックをクリックすると、そのエリアの詳細データがポップアップで表示されます。

* 表示率
* 平均滞在時間
* 離脱数
* コンバージョン数

<figure><img src="/files/J29P3pwzeDdlJuedbuAr" alt=""><figcaption><p>ブロックをクリックすると詳細データがポップアップ表示される</p></figcaption></figure>

### 右側のデータテーブル

ヒートマップ右側のデータテーブルには、ページ内の全ブロックが一覧で並びます。

| 指標     | 説明                             |
| ------ | ------------------------------ |
| ブロック名  | クリックするとヒートマップ上の該当位置にスクロール      |
| 表示率    | そのブロックが画面に表示された PV の割合         |
| 平均滞在時間 | そのブロックを見たユーザーの平均滞在時間。長いほど関心が高い |

<figure><img src="/files/XsIfrw4HlUy1kJ1mZS7h" alt=""><figcaption><p>右側のデータテーブル</p></figcaption></figure>

> **並び順について**：ブロックリストはデフォルトで\*\*ページ上の出現順（ブロック上端の高さ順）\*\*に並びます。各列のヘッダーをクリックすると、その指標で並び替えられます。

***

## 使用する指標

| 指標名            | 定義                                                         | 計算式                                     |
| -------------- | ---------------------------------------------------------- | --------------------------------------- |
| **ブロック平均滞在時間** | 対象ブロックがビューポート内に表示されていた平均時間（秒）。ユーザーがそのブロックをどれくらい見ていたかを示します。 | ブロックがビューポート内にあったフレームの滞在時間合計 ÷ インプレッション数 |
| **インプレッション率**  | 対象ブロックまでスクロールして表示された PV 数の割合                               | ブロック上端に到達した PV 数 ÷ 総 PV 数               |

> 各指標の詳しい計算式は [指標リファレンス](/insight/smart-heatmap/metric-reference) をご覧ください。

***

## 分析のヒント

### 滞在時間が長い ＝ 必ずしもポジティブではありません

滞在が長くなる理由は、大きく 2 つ考えられます：

* **ポジティブ要因**：コンテンツに興味があり、じっくり読んでいる
* **ネガティブ要因**：内容が分かりにくく、理解に時間がかかっている

判断のポイントは、**離脱ヒートマップと組み合わせて見る**こと。

| パターン  | 滞在時間 | 離脱率 | 解釈                       |
| ----- | ---- | --- | ------------------------ |
| 関心が高い | 長い   | 低い  | 内容に満足して、次のブロックへ進んでいる     |
| 迷いがある | 長い   | 高い  | 内容は読んだものの、期待と合わずに離脱      |
| 読み飛ばし | 短い   | 低い  | 興味は薄いが、次のコンテンツに期待して進んでいる |
| 即離脱   | 短い   | 高い  | 内容を見た瞬間に興味を失って離脱         |

### チェックポイント

* 重要なコンテンツ（価値提案、CTA など）に、十分な注目が集まっているか
* 注目されているコンテンツが、ページの下のほうに埋もれていないか
* ページ全体の色が薄い場合は、コンテンツの魅力が伝わりきっていない可能性
* 色ムラが大きいエリア（赤→緑→赤）は、閲覧意欲が変動している箇所

***

## 関連ページ

* [離脱ヒートマップ](/insight/smart-heatmap/exit-heatmap) — 離脱率と組み合わせた分析
* [スマートサマリー](/insight/smart-heatmap/smart-summary) — AI による自動分析
* [指標リファレンス](/insight/smart-heatmap/metric-reference)


# 離脱ヒートマップ

各ブロックでユーザーがページを離れた状況が見えるヒートマップです。**どのエリアで離脱が多いか**を素早く把握できるので、改善の優先順位付けに役立ちます。

***

## このヒートマップで分かること

* ページ内で離脱が多いブロックはどこか
* 各ブロックにユーザーがどのくらい到達しているか
* 離脱が急に増えるのはどこか

> [ブロック設定](https://helps.ptengine.com/insight/smart-heatmap/pages/nMt0VhjvPFQTPK8rfwck#ブロックの設定) が済んでいると、ブロック単位の離脱状況が見えるようになります。

***

## 表示の切り替え

ヒートマップ左上のフィルターで、表示する指標を切り替えられます。切り替えると、右側のデータテーブルもリアルタイムで連動します。

| 表示      | 意味               |
| ------- | ---------------- |
| **離脱数** | 離脱が発生した PV の合計件数 |
| **離脱率** | 全 PV に対する離脱の割合   |

<figure><img src="/files/2kjonrxKA1VOqvKIKxb1" alt=""><figcaption><p>離脱ヒートマップ（離脱数 / 離脱率の切り替え）</p></figcaption></figure>

***

## 右側のデータテーブル

| 指標        | 説明                        |
| --------- | ------------------------- |
| ブロック名     | クリックするとヒートマップ上の該当位置にスクロール |
| 表示率       | そのブロックが画面に表示された PV の割合    |
| 離脱数 / 離脱率 | フィルターで切り替え                |

***

## 使用する指標

| 指標名           | 定義                                    | 計算式                                            |
| ------------- | ------------------------------------- | ---------------------------------------------- |
| **ブロック離脱率**   | 対象ブロックを閲覧した PV のうち、対象ブロックで離脱した PV の割合 | 対象ブロックで離脱した PV 数 ÷ 対象ブロックを閲覧した PV 数（インプレッション数） |
| **離脱数**       | 対象ブロックで離脱が発生した PV の合計件数               | 離脱率 × インプレッション数                                |
| **インプレッション率** | 対象ブロックまでスクロールして表示された訪問者の割合            | スクロール深度 ≥ ブロック上端の PV 数 ÷ 該当ページに訪問した PV 数       |
| **インプレッション数** | 対象ブロックが表示された回数                        | インプレッション率 × 総 PV 数                             |

> 各指標の詳しい計算式は [指標リファレンス](/insight/smart-heatmap/metric-reference) をご覧ください。

***

## 分析のヒント

### 離脱の原因は「そのブロック」ではなく「直前のブロック」にあることが多い

ユーザーが離脱を決めるのは、ブロックを見た瞬間というより、**直前のブロックを見終わった段階**であることがよくあります。離脱率の高いブロックを見つけたら、そのブロック自体だけでなく、**1 つ前のブロックの内容**もあわせて確認してみてください。

### インプレッション率が急に下がるポイントに注目

インプレッション率が急に落ちる位置は、多くのユーザーがそこまでスクロールしなかったことを意味します。その直前のコンテンツが、ユーザーのスクロール意欲を削いでしまっている可能性があります。

### チェックポイント

* ファーストビュー直下のインプレッション率は十分か（参考値：検索流入で 80〜90%、リマーケティング広告で 60〜80%）
* 離脱率が特に高いブロックはどこか。改善の余地はないか
* 重要な CTA やコンバージョンポイントの手前で、大量離脱が起きていないか
* 離脱率が高いブロックの滞在時間はどうか（[滞在ヒートマップ](/insight/smart-heatmap/stay-heatmap) と組み合わせて見るのがおすすめ）

| パターン     | 離脱率 | 滞在時間 | 考えられる原因             |
| -------- | --- | ---- | ------------------- |
| 読まずに離脱   | 高い  | 短い   | コンテンツの見た目や冒頭で興味を失った |
| 読んだが離脱   | 高い  | 長い   | 内容は確認したが、期待と合わなかった  |
| 通過       | 低い  | 短い   | 特に引っかからず次に進んだ       |
| 関心を持って通過 | 低い  | 長い   | 内容に満足して、次のブロックへ進んだ  |

***

## 関連ページ

* [滞在ヒートマップ](/insight/smart-heatmap/stay-heatmap) — 滞在時間と組み合わせた分析
* [スマートサマリー](/insight/smart-heatmap/smart-summary) — AI が離脱点の原因を自動分析
* [指標リファレンス](/insight/smart-heatmap/metric-reference)


# クリックヒートマップ

ページ上の各要素に対するクリック行動が見えるヒートマップです。**どの要素が使われていて、どの要素が見落とされているか**が一目で分かるので、ページ改善のヒントになります。

***

## このヒートマップで分かること

* ページ内で最もクリックされている要素はどこか
* CTA ボタンに十分なクリックが集まっているか
* リンクが設定されていないのにクリックされている箇所はないか

> 要素単位のクリック分析を行うには、対象ページに [要素設定](https://helps.ptengine.com/insight/smart-heatmap/pages/nMt0VhjvPFQTPK8rfwck#要素の設定) を済ませておいていただくと、各指標が見えるようになります（クリックヒートマップに切り替えると要素は自動でスキャンされます）。

***

## 2 つの表示モード

ヒートマップ左上のプルダウンで、表示モードを切り替えられます。デフォルトは **クリックヒートマップ（色表示）** です。まずは全体のクリック分布を直感的につかみ、その後に **要素クリック（数値表示）** で具体の要素単位データを掘り下げる流れがおすすめです。

| モード                       | 特徴                                                      |
| ------------------------- | ------------------------------------------------------- |
| **クリックヒートマップ**（色表示・デフォルト） | クリックが集中したエリアを色の濃淡で表示。インタラクション可能と指定されていない箇所のクリックも見つけられます |
| **要素クリック**（数値表示）          | クリック数・クリック率・クリック比率を要素ごとに表示                              |

<figure><img src="/files/8YR6JX4OaKCJM69yZeMc" alt=""><figcaption><p>2つの表示モードの切り替えプルダウン</p></figcaption></figure>

***

## クリックヒートマップモード（色表示）

クリックの重なりを\*\*サーモグラフィー（色の濃淡）\*\*で見せるモードです。要素設定がない箇所のクリックも見えるので、「リンクが設定されていないのに押されている」要素の発見に役立ちます。

| 色  | 意味             |
| -- | -------------- |
| 赤色 | クリックが集中しているエリア |
| 青色 | クリックが少ないエリア    |
| 透明 | クリックがほぼないエリア   |

***

## 要素クリックモード（数値表示）

要素ごとのクリックデータを**数値**で表示するモードです。さらに、以下の 3 つの指標を切り替えられます。

| 表示指標       | 説明                               |
| ---------- | -------------------------------- |
| **クリック数**  | 各要素がクリックされた合計回数                  |
| **クリック率**  | クリック数 ÷ 表示数。クリックされやすさの指標         |
| **クリック比率** | ページ全体のクリック数に対する各要素の割合。人気要素の特定に有効 |

<figure><img src="/files/MsPBxx5UQ5QtHSUhNDLh" alt=""><figcaption><p>要素クリックモード（各要素にクリック数が表示される）</p></figcaption></figure>

### 要素の詳細確認

ヒートマップ上の要素をクリックすると、その要素の詳細ポップアップが開きます。

* 表示数
* クリック数
* クリック比率
* クリック UV（ユニークユーザー数）
* コンバージョン数

<figure><img src="/files/GEPzGxkhytzpkmtCwVgm" alt=""><figcaption><p>要素詳細ポップアップ</p></figcaption></figure>

### 右側の要素リスト

ヒートマップ右側のパネルには、ページ内の全要素が一覧で並びます。

* **並び順**：デフォルトで\*\*ページ上の出現順（要素の上端の高さ順）\*\*に並びます。各列のヘッダーをクリックすると、その指標で並び替えられます
* **行をクリックしたとき**：要素リストの行をクリックすると、**右側パネルの内容がその要素の詳細データに切り替わります**。要素単位の詳細を確認するための導線で、ヒートマップ側でジャンプ・ハイライトする動作はありません

### 要素分析（詳細データと内訳）

要素をクリックすると、上記の主要数値に加えて、その要素をクリックした訪問の**内訳データ**も確認できます。「どんな経路で来た人が押しているのか」「どのデバイスから押しているのか」など、要素単位で訪問属性を分けて見たいときに便利です。

| 内訳データ | 説明                                  |
| ----- | ----------------------------------- |
| 流入元   | この要素をクリックした訪問の流入元（検索エンジン、キャンペーン など） |
| 端末情報  | この要素をクリックした訪問のデバイス情報                |
| 入口ページ | この要素をクリックした訪問のランディングページ             |
| 地域    | この要素をクリックした訪問の地域                    |

<figure><img src="/files/Vzu0WtioOjjNKHcRwJge" alt=""><figcaption><p>要素クリックの内訳データ・流入元フィルター</p></figcaption></figure>

### 要素の操作メニュー

要素を選択すると、以下の操作が行えます。

| 操作          | 説明                 |
| ----------- | ------------------ |
| リネーム        | 要素に分かりやすい名前を付ける    |
| 位置へ移動       | その要素の位置までビューをスクロール |
| **CTA に設定** | 重要な CTA としてマーク     |
| **固定表示に設定** | フローティング要素として設定     |
| 削除          | 要素マークを削除           |

<figure><img src="/files/nSWmcI072YwBcRaQR22U" alt=""><figcaption><p>要素を選択した状態と操作メニュー</p></figcaption></figure>

***

## CTA のみ表示フィルター

「**CTA のみ表示**」にチェックを入れると、CTA に設定した要素だけがヒートマップと要素リストに表示されます。重要な要素に絞ってサクッと分析できます。

<figure><img src="/files/e7KJBPXuKjk4C4AsyPUJ" alt=""><figcaption><p>CTA のみ表示フィルター</p></figcaption></figure>

> CTA の設定方法は [ブロック・要素の設定方法 — CTA とは](https://helps.ptengine.com/insight/smart-heatmap/pages/nMt0VhjvPFQTPK8rfwck#cta-とは) をご覧ください。

***

## 使用する指標

| 指標名        | 定義                              | 計算式                           | 表示モード  |
| ---------- | ------------------------------- | ----------------------------- | ------ |
| **クリック数**  | 対象要素に対するクリック数。リンクの有無に関わらず計測されます | —                             | 要素クリック |
| **クリック率**  | 対象要素のクリック率                      | 対象要素のクリック数 ÷ 対象ブロックに到達した PV 数 | 要素クリック |
| **クリック比率** | ページ内のクリック全体数に対する対象要素のクリック割合     | 対象要素のクリック数 ÷ ページ全体のクリック数      | 要素クリック |

> 各指標の詳しい計算式は [指標リファレンス](/insight/smart-heatmap/metric-reference) をご覧ください。

***

## 分析のヒント

### クリックの「ポジティブ要因」と「ネガティブ要因」

赤くなっている箇所が、必ずしも良い状態とは限りません。

* **ポジティブ要因**：CTA ボタンや重要なリンクにクリックが集まっている
* **ネガティブ要因**：リンクのない画像やテキストにクリックが集まっている（＝ ユーザーの期待とページの設計にズレがある）

### CTA クリック率の目安

CTA ボタンのクリック率は、訪問数に対して **10% 以上**が一つの目安です。10% を下回るときは、CTA の視認性、コピー、配置などを見直してみるとよいでしょう。

### チェックポイント

* クリックが集中している場所は、想定通りか
* よくクリックされている要素が、ページの目の届きにくい場所に置かれていないか
* クリックされているのにリンクやアクションが設定されていない要素はないか
* CTA ボタンのクリック率は十分か

***

## 関連ページ

* [コンバージョン貢献ヒートマップ](/insight/smart-heatmap/conversion-heatmap) — クリックされた要素が CV に貢献しているかを確認
* [滞在ヒートマップ](/insight/smart-heatmap/stay-heatmap) — クリックされた要素があるブロックの滞在状況
* [指標リファレンス](/insight/smart-heatmap/metric-reference)


# コンバージョン貢献ヒートマップ

各ブロック・要素がコンバージョンにどれだけ貢献しているかが見えるヒートマップです。コンバージョンのボトルネック特定や CTA の最適化のヒントになります。

***

## このヒートマップで分かること

* どの要素をクリックしたユーザーがコンバージョンに至りやすいか
* どのブロックをしっかり閲覧したユーザーがコンバージョンに至りやすいか
* コンバージョンに最も影響を与えているコンテンツはどこか

> **💡 まずはコンバージョン目標の設定を**：このヒートマップは、対象ページに **コンバージョン目標** を設定すると本来の力を発揮します。コンバージョン未設定の状態だと、画面に黄色の帯または「コンバージョン設定」ボタンが表示されますので、そちらから設定してみてください。
>
> 設定方法は [ブロック・要素の設定方法 — コンバージョンの設定](https://helps.ptengine.com/insight/smart-heatmap/pages/nMt0VhjvPFQTPK8rfwck#コンバージョンの設定) でご確認いただけます。

<figure><img src="/files/50YUEFR3f9oZGdyxfVDK" alt=""><figcaption><p>コンバージョン未設定時の警告表示</p></figcaption></figure>

***

## 2 つの表示ビュー

ヒートマップ左上のプルダウンで、表示ビューを切り替えられます。

| ビュー             | 説明                             | 活用シーン                       |
| --------------- | ------------------------------ | --------------------------- |
| **要素コンバージョン**   | ボタン・リンク・画像などの要素ごとのコンバージョン貢献を表示 | どのボタンが CV に効いているか調べたいとき     |
| **ブロックコンバージョン** | ページのエリア（ブロック）ごとのコンバージョン状況を表示   | どのセクションが CV に貢献しているか把握したいとき |

<figure><img src="/files/xDr40oEguxhDjukPnCen" alt=""><figcaption><p>要素コンバージョンとブロックコンバージョンの切り替え</p></figcaption></figure>

### 複数コンバージョンの切り替え

複数のコンバージョン目標を設定している場合、確認したいコンバージョンをフィルターで切り替えられます。切り替えると、右側のデータテーブルもリアルタイムで連動します。

> **主コンバージョンについて**：コンバージョン設定画面で**最上位に並んでいるコンバージョン**が、このページの**主コンバージョン**として扱われます。本ヒートマップではフィルターで自由に切り替えられますが、[スマートサマリー](/insight/smart-heatmap/smart-summary) の「広告効果分析」「オーディエンス分析」では**主コンバージョンだけ**が分析対象になります。
>
> 分析の主軸となるコンバージョンを変えたいときは、コンバージョン設定画面で対象のコンバージョンを**ドラッグして 1 番目に移動**するだけで切り替わります。詳細は [ブロック・要素の設定方法 — コンバージョンの設定](https://helps.ptengine.com/insight/smart-heatmap/pages/nMt0VhjvPFQTPK8rfwck#コンバージョンの設定) をご覧ください。

<figure><img src="/files/avBayiRnCQj3WJpyJPf9" alt=""><figcaption><p>要素コンバージョンビュー</p></figcaption></figure>

<figure><img src="/files/ykSdEERxsGy1LRl08RhB" alt=""><figcaption><p>ブロックコンバージョンビュー</p></figcaption></figure>

***

## CTA のみ表示フィルター

「**CTA のみ表示**」にチェックを入れると、CTA 要素のコンバージョンデータだけに絞り込めます。非 CTA 要素のノイズを除いて、主要 CTA のパフォーマンスを比較するのに便利です。

<figure><img src="/files/q2yCSD7k5GuAP5zuCJv4" alt=""><figcaption><p>CTA のみ表示フィルター</p></figcaption></figure>

***

## ブロックコンバージョン率の考え方

ブロックコンバージョン率は、Ptengine 独自の指標です。一般的な「到達率ベースのコンバージョン率」とは違う考え方をしています。

### 一般的なコンバージョン率との違い

| 指標               | 計算式                                            | 意味                                  |
| ---------------- | ---------------------------------------------- | ----------------------------------- |
| 一般的なページコンバージョン率  | コンバージョンしたセッション数 ÷ ページに訪問した全セッション数              | ページに来た人のうち何 % が CV したか              |
| **ブロックコンバージョン率** | コンバージョンしたセッション数 ÷ 対象ブロックに **5 秒以上滞在** したセッション数 | そのブロックを**しっかり閲覧した人**のうち何 % が CV したか |

### なぜ「5 秒以上滞在」を条件にしているのか

ページをスクロールして一瞬だけ通過したユーザーと、コンテンツをじっくり読んだユーザーでは、そのブロックが購買意思決定に与えている影響がまったく違います。

5 秒以上という滞在条件を設けることで、「**このコンテンツをしっかり読んだ人は、どれくらいの割合でコンバージョンに至ったか**」 という、コンテンツの実質的な影響力が測れるようになっています。

> デフォルトの滞在条件は **5 秒**です。閾値はヒートマップ画面右上の「ページコンバージョン設定」から変更できます。

***

## 使用する指標

| 指標名              | 定義                              | 計算式                            | 分析モード       |
| ---------------- | ------------------------------- | ------------------------------ | ----------- |
| **要素コンバージョン数**   | 対象要素をクリックした後に CV に至ったセッション数     | —                              | 要素コンバージョン   |
| **要素コンバージョン率**   | 要素をクリックしたセッションのうち CV した割合       | 要素コンバージョン数 ÷ クリックしたセッション数      | 要素コンバージョン   |
| **ブロックコンバージョン数** | ブロックに 5 秒以上滞在し、かつ CV したセッション数   | —                              | ブロックコンバージョン |
| **ブロックコンバージョン率** | ブロックに 5 秒以上滞在したセッションのうち CV した割合 | ブロックコンバージョン数 ÷ 5 秒以上滞在したセッション数 | ブロックコンバージョン |

> 各指標の詳しい計算式は [指標リファレンス](/insight/smart-heatmap/metric-reference) をご覧ください。
>
> **計算単位について**：コンバージョン関連の指標（要素コンバージョン率・ブロックコンバージョン率）は**セッション単位**で計算されます。インプレッション率や離脱率が PV 単位なのに対し、コンバージョンはセッション全体を通じて目標達成の有無を判定するためです。

***

## β 版から移行する方への注意

ブロックコンバージョンの計算方法がアップデートされています。

|             | 計算対象                                    |
| ----------- | --------------------------------------- |
| 変更前（β 版）    | ブロックを見たすべてのユーザーの CV をカウント               |
| **変更後（現行）** | ブロックに**設定した閾値以上滞在**してから CV に至った場合のみカウント |

この変更で、「コンテンツの実質的な影響力」がより正確に測れる指標になりました。詳しくは [ブロック・要素の設定方法](https://helps.ptengine.com/insight/smart-heatmap/pages/nMt0VhjvPFQTPK8rfwck#β-版から移行する方への注意) をご覧ください。

***

## 分析のヒント

### ブロックコンバージョン率が高い ＝ 購買決定に影響を与えたコンテンツ

ブロックコンバージョン率が高いブロックは、ユーザーの購買意思決定に直接影響を与えている可能性が高いコンテンツです。内容を強化したり、より目立つ位置に配置するなど、活かす方向で検討してみてください。

### 要素コンバージョンとブロックコンバージョンの使い分け

| 分析モード       | 向いている分析                                 |
| ----------- | --------------------------------------- |
| 要素コンバージョン   | CTA ボタンやリンクなど、クリック可能な要素の効果を比較したいとき      |
| ブロックコンバージョン | 商品説明、レビュー、価格表示など、閲覧するコンテンツ全体の効果を比較したいとき |

### チェックポイント

* コンバージョン率が高いブロックが、ページの下のほうに埋もれていないか
* 複数の CTA がある場合、どの CTA のコンバージョン率が最も高いか
* コンバージョン率が低い CTA は、位置の変更や文言の改善を検討する余地がある
* ブロックコンバージョン率が高いブロックの内容を、他のページに横展開できないか

***

## 関連ページ

* [クリックヒートマップ](/insight/smart-heatmap/click-heatmap) — 要素クリックの効果を確認
* [滞在ヒートマップ](/insight/smart-heatmap/stay-heatmap) — 高 CV 率ブロックの滞在状況
* [スマートサマリー](/insight/smart-heatmap/smart-summary) — AI が CV ボトルネックを自動分析
* [指標リファレンス](/insight/smart-heatmap/metric-reference)


# データレポート

ページ・ブロック・要素の主要指標がまとまって見られるレポートです。ページ全体の状況を素早く確認したいときや、チームメンバーとの認識合わせに活用できます。

> 製品内では「**データレポート**」タブとして表示されます。

***

## このレポートで分かること

* ページ全体の訪問数、ページビュー数、ユニークユーザー数
* 直帰率、離脱率、平均滞在時間、ファーストビュー離脱率
* コンバージョン数、コンバージョン率、CTA クリック数・率
* 各ブロックの表示数・滞在時間・離脱・コンバージョン
* 各要素の表示・クリック・コンバージョン

<figure><img src="/files/qm47Jw2oxgZ6MPASYUq7" alt=""><figcaption><p>データレポート画面</p></figcaption></figure>

***

## 使い方

ヒートマップツールバーの **「データレポート」** タブをクリックすると、レポートが開きます。

### レポートの操作

| 操作            | 説明                     |
| ------------- | ---------------------- |
| 詳細レポートのエクスポート | ページ・ブロック・要素の詳細データを書き出し |
| 主要指標のエクスポート   | ページ全体のサマリーデータを書き出し     |
| CTA のクイック設定   | レポート画面から CTA をその場で設定   |

<figure><img src="/files/A7pv7K7iVmYCRbYyiDLv" alt=""><figcaption><p>データレポートの全画面表示</p></figcaption></figure>

***

## ページ全体の指標

### トラフィック獲得

| 指標名         | 説明                           |
| ----------- | ---------------------------- |
| セッション数      | ページが閲覧されたセッション数              |
| ページビュー数（PV） | ページが閲覧された回数                  |
| 訪問者数        | ページを閲覧したユーザー数                |
| 新規セッション比率   | 閲覧セッションのうち新規訪問の割合            |
| ランディング数     | そのページがランディングページとして使われたセッション数 |

### 行動インタラクション

| 指標名         | 説明                                                   |
| ----------- | ---------------------------------------------------- |
| ファーストビュー離脱率 | スクロール・CV・ページ遷移をまったく行わずに離脱した割合。高いときはファーストビューの見直しがおすすめ |
| ページ平均滞在時間   | ページ全体の平均滞在時間                                         |
| CTA クリック数   | CTA として設定した要素のクリック数                                  |
| CTA クリック率   | CTA クリック数 ÷ PV 数                                     |
| クリック数       | ページ全体のクリック合計（リンクの有無を問わず）                             |
| クリック数 / PV  | 1 PV あたりのクリック回数。エンゲージメントの指標                          |
| 直帰率         | そのページから入って、他ページを見ずに離脱した割合                            |
| 平均セッション PV  | そのページ経由で訪問したユーザーの平均閲覧ページ数                            |

### コンバージョン

| 指標名      | 説明                     |
| -------- | ---------------------- |
| コンバージョン数 | ページを訪問して CV に至ったセッション数 |
| コンバージョン率 | 訪問セッションのうち CV に至った割合   |

***

## ブロックの指標

| 指標       | 説明                               |
| -------- | -------------------------------- |
| 表示数      | そのブロックが画面に表示された PV 数             |
| 表示率      | そのブロックが表示された PV の割合              |
| 離脱       | そのブロックから離脱し、クリック・CV に至らなかった PV 数 |
| 離脱率      | 離脱した PV の割合                      |
| 平均滞在時間   | そのブロックを見たユーザーの平均滞在時間             |
| コンバージョン数 | そのブロックで一定時間滞在してから CV に至ったセッション数  |
| コンバージョン率 | 滞在セッションのうち CV に至った割合             |

***

## 要素の指標

| 指標       | 説明                            |
| -------- | ----------------------------- |
| 表示数      | その要素が画面に表示された PV 数            |
| 表示率      | その要素が表示された PV の割合             |
| クリック数    | その要素がクリックされた回数                |
| クリック率    | クリック数 ÷ 表示数                   |
| コンバージョン数 | その要素をクリックして CV に至ったセッション数     |
| コンバージョン率 | その要素をクリックしたセッションのうち CV に至った割合 |

> 各指標の詳しい計算式は [指標リファレンス](/insight/smart-heatmap/metric-reference) をご覧ください。

***

## 活用のヒント

* **施策前後の比較**：ページ改修や A/B テスト実施前後の数値を見比べる
* **ベースラインの把握**：ヒートマップ分析を始める前に、ページの基本的なパフォーマンスをひと通り確認しておく
* **定期レポート**：週次や月次で主要指標の推移を追う
* **チーム共有**：エクスポートして、社内資料やステークホルダーへの報告に使う

### チェックポイント

* 直帰率が想定より高くないか
* ファーストビュー離脱率が高くなりすぎていないか（ファーストビュー改善の余地）
* 平均滞在時間がコンテンツ量に対して適切か
* コンバージョン率の推移に違和感がないか
* 新規率とリピーター率のバランスは適切か

***

## 関連ページ

* [スマートサマリー](/insight/smart-heatmap/smart-summary) — AI による自動分析
* [指標リファレンス](/insight/smart-heatmap/metric-reference) — 全指標の詳細定義と計算式


# 比較ヒートマップ

異なる条件のヒートマップを並べて比較できる機能です。改修前後の効果検証や、セグメント別の行動比較、複数のヒートマップを横断した俯瞰など、いろいろな見せ方が選べます。

***

## この機能で分かること

* ページ改修や A/B テストの前後で、何がどれくらい変わったか
* セグメント別（流入元・デバイス・地域など）のユーザー行動の違い
* 同じページを「滞在 / 離脱 / クリック」など複数視点で同時に俯瞰

<figure><img src="/files/Jy490f6GYoF9JtfevC7j" alt=""><figcaption><p>比較ヒートマップの全体像</p></figcaption></figure>

***

## 2 つの比較モード

| モード          | 内容                                             |
| ------------ | ---------------------------------------------- |
| **異なる条件を比較** | 同じヒートマップタイプを、期間・セグメント・ページバージョンなどの条件違いで並べる      |
| **異なる視点を比較** | 同じ条件・同じページに対し、複数のヒートマップタイプ（滞在・離脱・クリックなど）を同時に表示 |

***

## 異なる条件を比較

**同じページ・同じデバイスを土台に、条件だけを変えて並べる**モードです。本質は「**同じページに来た異なる人たちが、それぞれどう振る舞っているか**」の差を見ること。

「Google 検索から来た人と、Instagram 広告から来た人で、同じ LP の読み方はどう違うか？」「改修前と改修後で、ファーストビュー直下のクリック率は変わったか？」といった問いに、並べて答えを出せます。

複数のヒートマップカードを並べて比較でき、各カードをクリックすると以下の条件を変えられます。

* 期間（日付・時刻単位まで指定可）
* セグメント条件（流入チャネル / 訪問者タイプ / 地域 など）
* ヒートマップの保存済みバージョン（改修前後）
* 体験バージョン（A/B テストの異なるバリアント）

右側のデータテーブルには、各カードの数値と比率が並んで表示されます。

<figure><img src="/files/fnVsYVGOUbkOFfNGTazz" alt=""><figcaption><p>異なる条件を比較</p></figcaption></figure>

<figure><img src="/files/sFbTAfkEbTDC1K4vEQ2y" alt=""><figcaption><p>カードごとの条件設定</p></figcaption></figure>

> **⚠️ デバイスはカードごとに変えられません**
>
> このモードは「**同一ページ・同一デバイス**」を共通の土台にしているため、PC とスマートフォンを 1 つのカード比較画面に並べることはできません。PC とスマートフォンではヒートマップの背景画像（ページレイアウト）自体が違うので、並べても同じ場所同士を比較できないからです。デバイス間の行動差を見たいときは、ツールバーのデバイス切り替えで、それぞれのデバイス用ヒートマップを別々に開いて見比べるのがおすすめです。

### 活用シーン

* **改修前 vs 改修後**：ページ保存機能で取っておいた旧バージョンと現バージョンを並べて、改善効果を見極める
* **流入チャネル別**：Google 検索 / 広告 / 直接流入など、流入元の違いによる行動の差を発見する
* **新規 vs リピーター**：訪問者タイプ別の関心ポイントの違いを見比べる
* **A/B テストのバリアント比較**：体験バージョンの違いで CTA 周辺の行動がどう変わるかを確認する

***

## 異なる視点を比較

**共通の基準条件**を設定した上で、複数のヒートマップタイプを並べるモードです。

<figure><img src="/files/yAN0XXg91urkjhNUdCyF" alt=""><figcaption><p>異なる視点を比較</p></figcaption></figure>

設定する共通条件：

* ページ URL
* 分析期間（例：4/1〜4/30）
* デバイス種別（PC・スマートフォンなど）

例：「PC ユーザーの 4 月分」で「滞在ヒートマップ」と「コンバージョン貢献ヒートマップ」を同時に表示する、といった使い方ができます。

<figure><img src="/files/gA4yUGfprmTvobsfpAua" alt=""><figcaption><p>視点比較の表示例</p></figcaption></figure>

### 活用シーン

* 「滞在は長いのに CV に貢献していないブロック」を直感的に見つける
* 同じデータで「滞在 / 離脱 / クリック」の各視点を一気に俯瞰する

***

## 入口について

比較ヒートマップは、**どのヒートマップタイプからでも追加できます**。さらに、比較ヒートマップ画面内に、新しく比較ヒートマップを追加するための入り口も用意されています。

詳しくは [クラシック版・β 版からの変更点 — 比較ヒートマップの入り口](/insight/smart-heatmap/migration-from-classic) をご覧ください。

***

## 関連ページ

* [ツールバー機能](/insight/smart-heatmap/toolbar) — 期間・デバイス・セグメントの設定
* [滞在ヒートマップ](/insight/smart-heatmap/stay-heatmap)
* [離脱ヒートマップ](/insight/smart-heatmap/exit-heatmap)
* [クラシック版・β 版からの変更点](/insight/smart-heatmap/migration-from-classic)


# ツールバー機能

すべてのヒートマップタブで共通して使える、ツールバーの各機能をご紹介します。これらを活用すると、分析の幅がぐっと広がります。

<figure><img src="/files/6r5YjSzP9l8HrGEBneTL" alt=""><figcaption><p>スマートヒートマップのツールバー全体（番号は下表と対応）</p></figcaption></figure>

***

## 機能一覧（番号は上のスクリーンショットと対応）

|  #  | 機能           | 種別         | 詳細                                                                                                              |
| :-: | ------------ | ---------- | --------------------------------------------------------------------------------------------------------------- |
|  1  | ページ切り替え      | ツールバー      | [↓ (1) ページ切り替え](#id-1-pjirie)                                                                                   |
|  2  | 対象期間         | ツールバー      | [↓ (2) 対象期間](#id-2-dui-xiang-qi-jian)                                                                           |
|  3  | セグメント        | ツールバー      | [↓ (3) セグメント](#id-3-segumento)                                                                                  |
|  4  | 比較ヒートマップ     | ツールバー      | → [比較ヒートマップ](/insight/smart-heatmap/comparison)                                                                 |
|  5  | 共有           | ツールバー      | [↓ (5) 共有](#id-5-gong-you)                                                                                      |
|  6  | ページ設定        | ツールバー      | [↓ (6) ページ設定](#id-6-pji)                                                                                        |
|  7  | ヘルプ・チャットサポート | ツールバー      | [↓ (7) ヘルプ・チャットサポート](#id-7-herupuchattosapto)                                                                   |
|  8  | ヒートマップの更新    | ツールバー      | [↓ (8) ヒートマップの更新](#id-8-htomappuno)                                                                             |
|  9  | スマートサマリー ⭐   | タブ         | → [スマートサマリー](/insight/smart-heatmap/smart-summary)                                                              |
|  10 | 滞在ヒートマップ ⭐   | タブ         | → [滞在ヒートマップ](/insight/smart-heatmap/stay-heatmap)                                                               |
|  11 | 離脱ヒートマップ ⭐   | タブ         | → [離脱ヒートマップ](/insight/smart-heatmap/exit-heatmap)                                                               |
|  12 | クリックヒートマップ   | タブ         | → [クリックヒートマップ](/insight/smart-heatmap/click-heatmap)                                                            |
|  13 | コンバージョン貢献 ⭐  | タブ         | → [コンバージョン貢献ヒートマップ](/insight/smart-heatmap/conversion-heatmap)                                                  |
|  14 | データレポート ⭐    | タブ         | → [データレポート](/insight/smart-heatmap/numerical-report)                                                            |
|  15 | デバイス切り替え     | ツールバー      | [↓ (15) デバイス切り替え](#id-15-debaisurie)                                                                            |
|  16 | ブロック / 要素設定  | ツールバー      | → [ブロック・要素の設定方法](/insight/smart-heatmap/block-element-settings)                                                 |
|  17 | 画面操作モード ⭐    | ツールバー      | [↓ (17) 画面操作モード](#id-17-mdo)                                                                                    |
|  18 | ページ保存        | ツールバー      | [↓ (18) ページ保存](#id-18-pji)                                                                                      |
|  19 | スクリーンショット    | ツールバー      | → [スクリーンショット](/insight/smart-heatmap/screenshot)                                                                |
|  20 | サマリー機能残り利用回数 | 表示         | → [スマートサマリー — プラン別の利用回数](https://helps.ptengine.com/insight/smart-heatmap/pages/eNsQIeJJ4CtDs35qJo6V#プラン別の利用回数) |
|  —  | 色調整バー        | ツールバー（番号外） | [↓ 色調整バー](#b)                                                                                                   |

> ⭐ は新機能です。

***

## (1) ページ切り替え

分析対象のページを切り替える機能です。

* ツールバー左端の⇄アイコンから、別のページに切り替えられます
* URL・パラメータ除外 URL・ページグループの単位で対象を選べます
* 「**パラメータ合併モード**」を ON にすると、URL パラメータが異なるページ（例：`?utm_source=google` と `?utm_source=facebook`）のデータを合算して見られます
* 保存済みのページバージョンに切り替えることもできます

***

## (2) 対象期間

データの対象期間を選ぶ機能です。

* ヒートマップで選べる最大期間は **31 日間**
* ヒートマップリスト画面では最大 **180 日間**まで選べます
* 「**時刻を指定**」をオンにすると、期間を時（正時）単位まで絞り込めます（例：当日の 9:00〜12:00 のみ）。特定の時間帯の訪問者行動を確認したいときに便利です
* 施策の前後比較をするときは、期間を揃えて並べると比較しやすくなります

![](/files/HRftog9hD3pKixnwIgec)

***

## (3) セグメント

特定の条件で訪問者を絞り込む機能です。複数のセグメント条件を組み合わせて使えます。

### 主なセグメント条件

| カテゴリ   | 条件の例                              |
| ------ | --------------------------------- |
| 流入元    | 検索エンジン、キャンペーン、参照サイト、ソーシャル、ノーリファラー |
| デバイス   | OS、ブラウザ                           |
| 地域     | 国、地域                              |
| 訪問者タイプ | 新規、リピーター                          |

### 活用シーン

* 検索エンジン経由と広告経由のユーザーで、ページ上の行動がどう違うかを見比べる
* モバイルと PC で、離脱ポイントに違いがあるかを確認する
* 新規訪問者とリピーターで、注目するコンテンツが違うかを見る

***

## (5) 共有

ヒートマップの共有リンクを発行できます。チーム内でヒートマップを共有したいときに便利です。

* リンクを開くだけで、同じ条件のヒートマップが見られます
* チームメンバーへの分析結果共有がスムーズになります

***

## (6) ページ設定

コンバージョン・ブロック・要素・CTA を一箇所でまとめて設定できる機能です。

詳しい設定内容はこちら：

* [はじめに：3 つの設定順序](/insight/smart-heatmap/getting-started)
* [ブロック・要素の設定方法](/insight/smart-heatmap/block-element-settings)

***

## (7) ヘルプ・チャットサポート

ドキュメントやサポートチャットへのアクセス入口です。困ったときはこちらからどうぞ。

***

## (8) ヒートマップの更新

表示データを最新状態に更新する機能です。データが最新になっていないと感じたときにご利用ください。

***

## (15) デバイス切り替え

訪問端末の種類を選ぶ機能です。

| デバイス   | 説明              |
| ------ | --------------- |
| PC     | デスクトップおよびノート PC |
| Mobile | スマートフォン         |
| Tablet | タブレット           |

端末によってユーザーの行動パターンは大きく違うので、端末を切り替えて見比べてみるのがおすすめです。

***

## (17) 画面操作モード

ヒートマップ上でページの通常操作（アコーディオンの開閉、ハンバーガーメニューの展開など）が行えるモードです。

動的なコンテンツ（折りたたみ、スライド、メガメニューなど）のヒートマップを確認するときに役立ちます。

> 製品内では「**画面操作モード**」と表示されます。

***

## (18) ページ保存

ページの構成ファイルを保存する機能です。ページが改修されたあとも、改修前のページデザインでヒートマップが確認できます。

* ヒートマップ画面内、または URL の切り替え欄から保存できます
* スマートヒートマップでは、各ヒートマップタイプの中で履歴ヒートマップを追加できます

### 活用シーン

* ページ改修前にページを保存しておき、改修後のデータと並べて見比べる
* A/B テストの各バージョンを保存して記録する
* デザイン変更の効果を時系列で追う

***

## 色調整バー

ヒートマップの色づきの上限値（赤色になる閾値）を調整できるツールです。スクリーンショットの番号には含まれていませんが、ツールバー上で常に使えます。

* つまみを**左**に動かす → 上限値が下がり、赤や黄色が増える
* つまみを**右**に動かす → 上限値が上がり、全体的に赤や黄色が減る

データに偏りがあって、ページ全体が真っ赤（あるいは全体が透明）になって読み取りづらいときに使うと便利です。

***

## 関連ページ

* [スマートヒートマップ概要](/insight/smart-heatmap)
* [比較ヒートマップ](/insight/smart-heatmap/comparison)
* [スクリーンショット](/insight/smart-heatmap/screenshot)
* [ブロック・要素の設定方法](/insight/smart-heatmap/block-element-settings)
* [指標リファレンス](/insight/smart-heatmap/metric-reference)


# スクリーンショット

ヒートマップの表示内容を画像として保存できます。レポート資料への添付や、社内での共有に便利です。

***

## 方法 1：ヒートマップ画面から保存

1. 各ヒートマップの右上にあるスクリーンショットアイコンをクリック
2. 「**スクリーンショットを取得中**」のポップアップが表示される
3. 取得が終わると、自動でローカルにダウンロードされる

<figure><img src="/files/9SQ19k36mcfi3OgOqy58" alt=""><figcaption><p>スクリーンショットアイコンの位置</p></figcaption></figure>

<figure><img src="/files/VuwdTrajUeh0a5yJWsJI" alt=""><figcaption><p>取得中のポップアップ表示</p></figcaption></figure>

### ご利用時のポイント

* 取得中はページを閉じたり、更新したりしないようにしてください
* 複数のスクリーンショットを同時にダウンロードできます
* 複数ファイルを同時ダウンロードする際、ブラウザから許可を求められたら「**許可**」を選んでください

### ダウンロード後のファイル

* **ZIP 形式**で保存されます
* ZIP 内の「**完全ヒートマップ**」フォルダを開くと、スクリーンショットが確認できます

***

## 方法 2：Chrome 拡張機能から保存

ページのデザインや仕様によっては、ヒートマップ画面からの保存がうまく動かないことがあります。そのときは Ptengine の Chrome 拡張機能を使って、手動でダウンロードしていただけます。

<figure><img src="/files/pcdIW1DB1PvuV37rAfNY" alt=""><figcaption><p>Chrome 拡張機能からのキャプチャ</p></figcaption></figure>

拡張機能のインストール方法は [Ptengine アシスタント](/start-guide/what-is-ptengine/ptengine-assistant) をご覧ください。

***

## 関連ページ

* [ツールバー機能 — キャプチャ](https://helps.ptengine.com/insight/smart-heatmap/pages/V0kGYP5UgSSoGxITlE8W#キャプチャスクリーンショット)
* [Ptengine アシスタント](/start-guide/what-is-ptengine/ptengine-assistant)


# 指標リファレンス

Ptengine ヒートマップで使う指標を、レベル別にまとめた一覧表です。指標の定義・計算式・用途を確認したいときにご活用ください。

***

## ページレベル指標

ページ全体のパフォーマンスを示す指標です。主に「データレポート」タブや「スマートサマリー」で使用されます。

| 指標名          | 定義                                                          | 単位  |
| ------------ | ----------------------------------------------------------- | --- |
| 訪問数          | サイトに訪問した回数（セッション数）。同一ユーザーが複数回訪問した場合、それぞれ 1 訪問としてカウントされます。   | 回   |
| ユニークユーザー（UU） | 指定期間内にサイトを訪問した人数。同一ユーザーは何度訪問しても 1 UU です。                    | 人   |
| ページビュー（PV）   | ページが表示された回数。ページが読み込まれるたびに 1 PV としてカウントされます。                 | 回   |
| 新規率          | 全体の訪問における新規訪問の割合です。計算式：新規訪問数 ÷ 全体の訪問数                       | %   |
| 直帰率          | 流入したページでそれ以外のページに遷移せず離脱した訪問の割合です。計算式：直帰訪問数 ÷ 総訪問数           | %   |
| 平均滞在時間       | 特定のページでの滞在時間（閲覧された時間）の平均です。計算式：特定ページの合計滞在時間 ÷ 特定ページの合計 PV 数 | 秒   |
| ファーストビュー離脱率  | ファーストビュー（ページ表示時に最初に目に入るエリア）で離脱した訪問の割合です。                    | %   |
| 入口数          | 対象ページが入口ページ（ランディングページ）として訪問された回数です。                         | 回   |
| 平均ページビュー数    | 1 回の訪問で閲覧された平均ページ数です。                                       | ページ |
| クリック数        | ページ内で発生したクリック（PC の場合）またはタップ（スマホの場合）の総数です。リンクの有無に関わらず計測されます。 | 回   |
| クリック率        | ページ内のクリック率です。                                               | %   |
| CTA クリック率    | CTA（Call To Action）ボタンのクリック率です。                             | %   |
| コンバージョン率     | サイト上で設定した目標を達成した訪問の割合です。計算式：CV 回数 ÷ サイトの総訪問数                | %   |
| 完了数          | コンバージョンを達成した訪問数です。                                          | 回   |

***

## ブロックレベル指標

ページ内の各ブロック（セクション）ごとのパフォーマンスを示す指標です。「滞在」「離脱」「コンバージョン貢献」ヒートマップで使用されます。

> ブロックの定義については [ブロック・要素の設定方法 — 用語の定義](https://helps.ptengine.com/insight/smart-heatmap/pages/nMt0VhjvPFQTPK8rfwck#用語の定義) をご参照ください。

### インプレッション　※PV単位

| 指標名       | 定義                             | 計算式                                    |
| --------- | ------------------------------ | -------------------------------------- |
| インプレッション率 | 対象ブロックまでスクロールして表示された PV の割合です。 | ブロック上端に到達した PV 数 ÷ 総 PV 数              |
| インプレッション数 | 対象ブロックが表示された回数です。              | ブロック上端に到達した PV 数（= インプレッション率 × 総 PV 数） |

### 滞在　※PV単位

| 指標名        | 定義                                                           | 計算式                                     |
| ---------- | ------------------------------------------------------------ | --------------------------------------- |
| ブロック平均滞在時間 | 対象ブロックがビューポート内に表示されていた平均時間（秒）です。ユーザーがそのブロックをどれくらい見ていたかを示します。 | ブロックがビューポート内にあったフレームの滞在時間合計 ÷ インプレッション数 |

### 離脱　※PV単位

| 指標名     | 定義                                       | 計算式                                            |
| ------- | ---------------------------------------- | ---------------------------------------------- |
| ブロック離脱率 | 対象ブロックを閲覧した PV のうち、対象ブロックで離脱した PV の割合です。 | 対象ブロックで離脱した PV 数 ÷ 対象ブロックを閲覧した PV 数（インプレッション数） |
| 離脱数     | 対象ブロックで離脱が発生した PV の合計件数です。               | 対象ブロックで離脱した PV 数（= 離脱率 × インプレッション数）            |

### コンバージョン　※セッション単位

| 指標名          | 定義                                                                   | 計算式                                                     |
| ------------ | -------------------------------------------------------------------- | ------------------------------------------------------- |
| ブロックコンバージョン数 | 対象ブロックに一定時間以上滞在し、かつコンバージョンを達成したセッション数です。                             | 滞在条件を満たし、かつコンバージョンが発生したセッション数                           |
| ブロックコンバージョン率 | 対象ブロックに一定時間以上滞在したセッションのうち、コンバージョンを達成した割合です。デフォルトの滞在条件は **5 秒以上** です。 | ブロックコンバージョン数 ÷ 滞在条件（real\_duration ≥ 5000ms）を満たしたセッション数 |

> **ブロックコンバージョン率の考え方**：単にブロックに「到達した」ユーザーではなく、「一定時間以上しっかり閲覧した」ユーザーの中で CV に至った割合を表します。コンテンツが購買意思決定にどれだけ影響したかが、ここから読み取れます。
>
> **計算単位について**：ブロックコンバージョン率は**セッション単位**で計算されます（インプレッション率や離脱率の PV 単位とは違います）。コンバージョンはセッション全体を通じて目標達成の有無を判定するため、この単位になっています。

### ブロックレベル指標の計算単位まとめ

| 指標カテゴリ   | 計算単位        | 対象指標                      |
| -------- | ----------- | ------------------------- |
| インプレッション | **PV単位**    | インプレッション率、インプレッション数       |
| 滞在       | **PV単位**    | ブロック平均滞在時間                |
| 離脱       | **PV単位**    | ブロック離脱率、離脱数               |
| コンバージョン  | **セッション単位** | ブロックコンバージョン数、ブロックコンバージョン率 |

> インプレッション・滞在・離脱はページビュー（PV）ごとの行動を計測するため**PV単位**で計算されます。一方、コンバージョンはセッション全体を通じて目標達成の有無を判定するため**セッション単位**で計算されます。

***

## 要素レベル指標

ページ内の個々の要素（ボタン、リンク、画像など）ごとのパフォーマンスを示す指標です。「クリック」ヒートマップおよび「コンバージョン貢献」ヒートマップの要素分析で使用されます。

| 指標名        | 定義                                                      | 計算式                            |
| ---------- | ------------------------------------------------------- | ------------------------------ |
| クリック数      | 対象の要素に対するクリック数です。                                       | —                              |
| クリック率      | 対象要素のクリック率です。                                           | 対象要素のクリック数 ÷ 対象ブロックに到達した PV 数  |
| クリック比率     | ページ内で発生したクリック全体数のうち、対象要素がクリックされた割合です。                   | 対象要素のクリック数 ÷ ページ全体のクリック数       |
| 訪問数        | この要素をクリックした訪問の数（セッション数）です。                              | —                              |
| 要素コンバージョン数 | 対象要素をクリックした後にコンバージョンに至ったセッション数です。                       | この要素をクリックした後に CV に至ったセッション数    |
| 要素コンバージョン率 | 対象要素をクリックしたセッションのうち、コンバージョンに至った割合です。**セッション単位**で計算されます。 | 要素コンバージョン数 ÷ この要素をクリックしたセッション数 |

***

## 補足：スマートサマリーで使用される分析指標

スマートサマリーの「広告効果分析」と「オーディエンス分析」では、上記ページレベル指標に加え、以下の概念が使用されます。

| 概念     | 説明                                                                    |
| ------ | --------------------------------------------------------------------- |
| セッション数 | 訪問回数。PV や UU ではなく、セッション単位で計算されます。                                     |
| 四象限分類  | 訪問数（セッション数）とコンバージョン率の 2 軸で広告ソースやオーディエンスセグメントを 4 つのグループに分類する分析手法です。    |
| 集中型    | 特定の広告ソースやセグメントが全体の 95% 以上のトラフィックを占めている状態です。この場合、比較分析ではなく全体概況として扱われます。 |

***

## 関連ページ

* [スマートヒートマップ概要](/insight/smart-heatmap)
* [滞在ヒートマップ](/insight/smart-heatmap/stay-heatmap)
* [離脱ヒートマップ](/insight/smart-heatmap/exit-heatmap)
* [クリックヒートマップ](/insight/smart-heatmap/click-heatmap)
* [コンバージョン貢献ヒートマップ](/insight/smart-heatmap/conversion-heatmap)
* [データレポート](/insight/smart-heatmap/numerical-report)


# クラシック版・β 版からの変更点

旧ヒートマップ（クラシック版）や β 版からスマートヒートマップに移ってきた方向けに、それぞれのバージョンとの機能の対応関係や違いをまとめています。

***

## クラシック版機能 → スマートヒートマップでの場所

| クラシック版の機能    | スマートヒートマップでの場所                                                      |
| ------------ | ------------------------------------------------------------------- |
| クリックヒートマップ   | [クリック](/insight/smart-heatmap/click-heatmap) タブ内                    |
| アテンションヒートマップ | [滞在ヒートマップ](/insight/smart-heatmap/stay-heatmap) タブ内                 |
| 分析ヒートマップ     | [クリックヒートマップ](/insight/smart-heatmap/click-heatmap) → 要素クリック → クリック数 |
| ページ保存        | 各ヒートマップ内、または URL 切り替え欄の「**履歴ヒートマップの保存**」から                          |
| 比較ヒートマップ     | どのヒートマップタイプからでも追加できるようになり、入口が増えました                                  |

### クラシック版「クリックヒートマップ」→ スマート版「クリック」

クラシック版の「クリックヒートマップ」は、スマートヒートマップの「**クリック**」タブ内に移動しています。

<figure><img src="/files/c5cY3xba4e4izQAFkLLE" alt=""><figcaption><p>クラシック版のクリックヒートマップ</p></figcaption></figure>

<figure><img src="/files/5MJIcmXkfjsaLDaBk8zV" alt=""><figcaption><p>スマート版のクリックタブ</p></figcaption></figure>

### クラシック版「アテンションヒートマップ」→ スマート版「滞在ヒートマップ」内

クラシック版の「アテンションヒートマップ」は、スマートヒートマップでは「**滞在ヒートマップ**」タブ内のアテンションモードに移っています。

<figure><img src="/files/CFvZ9hcEuS1wRT1V0UMn" alt=""><figcaption><p>クラシック版のアテンションヒートマップ</p></figcaption></figure>

<figure><img src="/files/X2l3B5PwXKnwTkDnDlNB" alt=""><figcaption><p>スマート版の滞在ヒートマップ内のアテンションモード</p></figcaption></figure>

### クラシック版「分析ヒートマップ」→ スマート版「クリック」→「要素クリック」→「クリック数」

クラシック版の「分析ヒートマップ」は、スマートヒートマップでは「**クリックヒートマップ**」→ 要素クリック → クリック数の中に統合されています。

<figure><img src="/files/9TqmsdC6q1Emt4SE2FWS" alt=""><figcaption><p>クラシック版の分析ヒートマップ</p></figcaption></figure>

<figure><img src="/files/rdM8FssfzrhQSaw0lsCl" alt=""><figcaption><p>スマート版の要素クリック画面</p></figcaption></figure>

### ページ保存の入り口

スマートヒートマップでは「**各ヒートマップタイプの中から履歴ヒートマップを追加**できるほか、URL の切り替え時に「**ページ保存**」を選ぶこともできます。

<figure><img src="/files/Yd6njN5u4wYQWnW3DhJG" alt=""><figcaption><p>各ヒートマップタイプ内の履歴ヒートマップ追加</p></figcaption></figure>

<figure><img src="/files/yIZFF1ilnFUY2ttx9Csw" alt=""><figcaption><p>URL 切り替え欄からのページ保存</p></figcaption></figure>

### 比較ヒートマップの入り口

どのヒートマップタイプからでも比較ヒートマップを追加できるようになりました。さらに、比較ヒートマップ画面内にも、新しく比較ヒートマップを追加するための入口が用意されています。

<figure><img src="/files/2ueO1LtRSivCIs8sJPCo" alt=""><figcaption><p>比較ヒートマップへの入り口（任意のヒートマップタイプから）</p></figcaption></figure>

<figure><img src="/files/LoLIhWPZ31YcFtdpUSKY" alt=""><figcaption><p>比較ヒートマップ画面内の入り口</p></figcaption></figure>

<figure><img src="/files/bfam7JdkZLO1In1ZSH35" alt=""><figcaption><p>比較カードの追加</p></figcaption></figure>

<figure><img src="/files/lyCm4qdd5IZYOn9bvU7n" alt=""><figcaption><p>比較ヒートマップの利用例</p></figcaption></figure>

#### 滞在時間の追加とFV離脱率の調整

**滞在時間の追加**

滞在時間とは、スクロールを止め、このブロックに注目した時間の平均です。<br>

<figure><img src="/files/dZ31CchnCVIptS4jdnId" alt=""><figcaption></figcaption></figure>

それに伴い、アテンションヒートマップの計算ロジックの調整を行いました。

以前のアテンションヒートマップは、ユーザーのスクロール頻度に基づいて計算されていました。今回は、平均滞在時間の追加することで、アテンションヒートマップも平均滞在時間に基づいて算出するようになりました。

![](https://devhelp.ptengine.jp/wp-content/uploads/2024/03/%E6%96%B0%E6%97%A7%E7%83%AD%E5%9B%BE.png)

**FV離脱率の調整**

また、FV離脱の定義を更新し、いかなる操作やアクションも行わなかったユーザーをFV離脱に定義するよう変更しました。

#### スクロール開始位置とスクロール到達率の調整

ユーザーごとに画面解像度は異なるため、以前は固定だった100%の位置設定を、訪問者の画面解像度に基づいて算出する「スクロール開始位置」へとアップデートしました。

ユーザーがページを開いて最初に表示される平均の表示エリアを算出するため、ページの冒頭の重要なコンテンツがユーザーにきちんと表示されているかどうかを知るのに役立ちます。

![](https://devhelp.ptengine.jp/wp-content/uploads/2024/03/%E6%96%B0%E6%97%A7%E7%83%AD%E5%9B%BE2-1.png)

スクロール到達率の数値表記の精度を上げ、表示しているラインの数字は、そのラインに到達した割合となりました。

旧バージョン：各ラインにおける数値は、一つ前のラインとの間で離脱したユーザーも含む。\
新バージョン：各ラインにおける数値は、そのラインに到達したユーザーの割合を指す。\
![](https://devhelp.ptengine.jp/wp-content/uploads/2024/03/E383A9E382A4E383B3.png)

{% hint style="info" %}
**Tip：**\
スクロール到達率が以前よりやや低く算出される可能性がありますが、事実に基づいたより精度の高い数値となります。
{% endhint %}

***

## β 版からの変更点

スマートヒートマップ β 版から正式版への移行で、以下のアップデートが入っています。

### 1. ブロックコンバージョン貢献の計算方法を改善

<figure><img src="/files/OZcwO9kKaRAmtPz2l0Ym" alt=""><figcaption><p>ブロックコンバージョン計算方法の変更</p></figcaption></figure>

|             | 計算対象                                    |
| ----------- | --------------------------------------- |
| 変更前（β 版）    | ブロックを見たすべてのユーザーの CV をカウント               |
| **変更後（現行）** | ブロックで**設定した閾値以上滞在**してから CV に至った場合のみカウント |

閾値は画面右上の「**ページコンバージョン設定**」から変更できます。デフォルトは**5 秒**です。

詳しくは [コンバージョン貢献ヒートマップ — ブロックコンバージョン率の考え方](https://helps.ptengine.com/insight/smart-heatmap/pages/c3rcwHED568CT0BDJA9Q#ブロックコンバージョン率の考え方) をご覧ください。

### 2. 固定表示要素のショートカット操作を追加

設定画面または要素設定画面で要素にマウスを乗せた状態で `Option`（Mac）または `Alt`（Windows）キーを押すと、固定表示要素を表示・確認できるようになりました。

<figure><img src="/files/aKKUhn41MUHL6UgNw2U3" alt=""><figcaption><p>固定表示要素のショートカット操作</p></figcaption></figure>

<figure><img src="/files/tyxqbhpIbVWOCbBaEAUV" alt=""><figcaption><p>ショートカット使用時の表示</p></figcaption></figure>

詳しくは [ブロック・要素の設定方法 — 固定表示要素とは](https://helps.ptengine.com/insight/smart-heatmap/pages/nMt0VhjvPFQTPK8rfwck#固定表示要素とは) をご覧ください。

### 3. 多視点比較機能を追加

比較ヒートマップに「**異なる視点の比較**」モードが加わりました。同じ URL・日付・セグメントで、異なるヒートマップタイプを並べて確認できます。

<figure><img src="/files/fBFvqBBrxLjV4xmiYi10" alt=""><figcaption><p>多視点比較機能</p></figcaption></figure>

詳しくは [比較ヒートマップ — 異なる視点を比較](https://helps.ptengine.com/insight/smart-heatmap/pages/49i2QMAl7YXUWrmqZzDX#異なる視点を比較) をご覧ください。

***

## 関連ページ

* [スマートヒートマップ概要](/insight/smart-heatmap)
* [比較ヒートマップ](/insight/smart-heatmap/comparison)
* [コンバージョン貢献ヒートマップ](/insight/smart-heatmap/conversion-heatmap)
* [ブロック・要素の設定方法](/insight/smart-heatmap/block-element-settings)


# 特殊ケース・トラブルシュート

スマートヒートマップが思うように動かないときや、特殊なページ構造での注意点と対処方法をまとめています。

***

## iframe を埋め込んでいるページ

ページに iframe（外部コンテンツの埋め込み）が含まれていると、クリックなどの指標データが正しく取得できないことがあります。

**対処方法：**

* 主な分析対象が iframe 内のコンテンツである場合は、iframe 元のページに直接タグを設置してヒートマップを取得するのがおすすめです
* iframe の外（親ページ）のコンテンツであれば、通常どおり計測されます

***

### アコーディオンコンテンツが入っているページ

FAQ ページや商品詳細ページなど、アコーディオンコンテンツを多く含むページでは、 ユーザー操作によってページ全体の高さが動的に変化します。 このため、同じスクロール位置で離脱したユーザーでも、実際に見ていたコンテンツが ユーザーごとに異なる可能性があり、ユーザーの関心度を示す指標が正しく解釈できなくなります。

**影響を受ける原因：**

同じ高さで離脱していても、ユーザー A は本文を読み終えて離脱、ユーザー B はアコーディオンが展開された結果その位置に到達して離脱、というケースが混在します

**影響を受ける指標：**

* **スクロール到達率**： アコーディオン展開によりページ全高が伸びるため、同じ実コンテンツを見たユーザーでも分母（ページ全体の高さ）が変動し、**到達率は実態より低く算出される傾向**があります。逆に未展開のまま閲覧したユーザーは分母が小さく、**到達率が過大に算出される**ため、ユーザー間の比較が困難になります。
* **アテンションヒートマップ**： 同じスクロール位置に異なるコンテンツが表示されるため滞在時間が分散し、**特定領域の色が実態より薄く表示される**傾向があります。また、展開状態によっては本来注目されていない領域に滞在が集計され、**誤って高アテンションと判定される**箇所が発生する可能性もあります。
* **ブロック滞在時間**： アコーディオン展開によりブロックの表示位置がページ内で変動するため、同一ブロックでもユーザーごとに計測条件が異なります。展開操作中に該当ブロックが画面内に留まり続けるケースでは**滞在時間が実際の閲読時間より長く計測される**一方、ページ高変動でブロックが画面外に押し出された場合は**短く計測される**など、値のばらつきが大きくなります。
* **離脱ヒートマップ**： 離脱位置がページ高さに依存するため、アコーディオン展開後に離脱したユーザーは**ページ下部寄りに分布**し、未展開で離脱したユーザーは**上部寄りに分布**します。結果として離脱ポイントが分散し、**特定位置への離脱集中が見えにくくなる（ピークが弱まる）**&#x50BE;向があります。

いずれも「スクロール位置 × 滞在時間」を基準に算出しているため、 ページ高さが変動するページでは、ユーザーの関心に関する厳密な判断が難しくなることがございます。

**対処方法：**

* 上記の指標を用いた**ユーザー関心度分析では、現時点で上記機能・指標の利用は推奨しません**
* ただし、**クリックヒートマップは引き続き有効**です。ボタンのクリック状況を見ることで、 どの内容にユーザーの関心が集まっているかを評価できます

***

## ページの高さやコンテンツが変わった場合

ページ全体の高さやコンテンツが変わると、設定済みのブロック位置がずれて、データが正しく表示されなくなることがあります。

**対処方法：**

1. ブロック設定画面で「**ブロックの再スキャン**」を実行する
2. スキャンは、ページが**完全に読み込まれてから**行うのがおすすめです（途中だとブロックの高さがずれる場合があります）
3. 大きく構造を変える前後では、[ページ保存](https://helps.ptengine.com/insight/smart-heatmap/pages/V0kGYP5UgSSoGxITlE8W#ページ保存) で旧バージョンを残してから、改修後と並べて比較すると違いがつかみやすくなります

***

## 動的 ID を使っているサイト

JavaScript で動的に ID が生成されるサイトでは、要素を一意に特定できず、クリックデータが正しく取得できない場合があります。

**対処方法：** サポートにお問い合わせください。サイトの実装に合わせて、個別に対応方法をご案内します。

***

## ヒートマップが正しく取得できないその他のケース

以下のような場合は、ヒートマップの計測が不安定になることがあります。

* コンテンツが頻繁に更新される場合
* インタラクションなしで動的に要素が生成される場合
* 同一ページ内で ID 名が重複している場合
* SPA（Single Page Application）で、URL がページ遷移時に変わらない場合

SPA に関する設定方法は [SPA サイトにおける Ptengine 計測設定ガイド](broken://pages/lsXW3UllgfX3muTVfOzm) をご覧ください。

***

## データが反映されないとき

ヒートマップにデータが反映されていないと感じたときは、次の順番で確認してみてください：

1. ツールバーの「**ヒートマップの更新**」ボタンで最新データに更新する
2. データの集計は数十分〜数時間程度の遅延が出ることがあります
3. それでも反映されない場合は [ヒートマップが表示されない](/faq/start-guide/heatmap-not-showing) をご覧ください

***

## スクリーンショットがうまく取れない

ページのデザインや仕様によって、標準のスクリーンショットがうまく動作しない場合があります。

**対処方法：** [Chrome 拡張機能から保存](https://helps.ptengine.com/insight/smart-heatmap/pages/dnjYjsKzN7MRvfMpJtqV#方法-2chrome-拡張機能から保存) をご利用ください。

***

## 推奨ブラウザ

スマートヒートマップは、以下のブラウザで動作確認しています。

* Google Chrome（推奨）
* Microsoft Edge
* Mozilla Firefox

[Ptengine アシスタント](/start-guide/what-is-ptengine/ptengine-assistant)（Chrome 拡張機能）を入れておくと、互換性が高まります。

***

## 関連 FAQ

* [タグが正常に発火しているか確認する方法](/faq/start-guide/check-tag-firing)
* [タグを設置したのに正しく計測されない場合](/faq/start-guide/incorrect-tracking)
* [ヒートマップが表示されない](/faq/start-guide/heatmap-not-showing)
* [ヒートマップを表示した背景のページが文字化けしてしまった場合](/faq/insight-setting/heatmap-garbled)
* [ページ分析ヒートマップのクリック数が少ない](/faq/data/heatmap-low-clicks)
* [クリック数とコンバージョン数に大きなズレがある場合の対処法](/faq/data/click-cv-mismatch)

***

## 関連ページ

* [スマートヒートマップ概要](/insight/smart-heatmap)
* [ブロック・要素の設定方法](/insight/smart-heatmap/block-element-settings)
* [スクリーンショット](/insight/smart-heatmap/screenshot)


# Experience概要

ABテスト、ノーコードページ編集、Web接客配信、リダイレクトテストなどを通じて、分析結果に基づいた改善施策を実際に実行し、ウェブサイトのパフォーマンス向上を実現するための施策実行モジュールです。

## **主な機能**

1. A/Bテスト
2. リダイレクトテスト
3. ノーコード or ローコードでのページ編集
4. ポップアップや追従バナーの配信
5. パーソナライズ配信

## 期待される効果

#### 即時的な効果

* サイトの問題点を素早く特定
* ユーザーの行動パターンを把握
* 改善ポイントの明確化

#### 長期的なメリット

* コンバージョン率の向上
* ユーザー満足度の改善
* サイト最適化の継続的な実現


# Experience用語集

この記事では、Ptengine Experienceで使用される主要な用語について解説します。

## 体験

体験とは、Ptengine Experienceで実行する様々な施策の実行単位を指します。具体的には以下のようなものが含まれます：

* ページ編集
* Web接客（ポップアップの表示）
* 固定バーの配信
* ABテスト/リダイレクトテスト

💡 「体験」は、ユーザーに提供する一連のインタラクションや変更を包括的に表現する概念です。

## 表示

表示とは、その体験が実際にユーザーに表示された（見られた）回数を意味します。

* 📊 体験レポートで確認可能
* 🔍 施策の到達度を測る重要な指標

## 表示UU

表示UUは、その体験が表示されたユニークユーザー（Unique User）の数を表します。

* 📊 体験レポートで確認可能
* 🔍 実際に何人のユーザーに体験が届いたかを示す指標

{% hint style="warning" %}
💡 クッキーが存在している限り、同じ端末からのアクセスは同じUUとして識別します。
{% endhint %}

## クリックUU

* 定義：体験内のポップアップボタンウィジェットで、閉じる以外の[クリックアクション](/experience/campaign/create-new/editor-usage#kurikkuakushonno)を発生させたユニークユーザー数
* 確認場所：体験レポート

## クリック率

* 計算方法：クリックUU ÷ 表示UU
* 確認場所：体験レポート

## 取り消しUU

* 定義：ポップアップまたは固定バーの取り消しボタンをクリックしたユニークユーザー数
* 確認場所：体験レポート

## 取り消し率

* 計算方法：取り消しUU ÷ 表示UU
* 確認場所：体験レポート

## フォーム回答UU

* 定義：Experienceで追加したフォームに回答したユニークユーザー数
* 確認場所：体験レポート

## フォーム回答率

* 計算方法：フォーム回答UU ÷ 表示UU
* 確認場所：体験レポート

## ゴール

ゴールとは、サイト上でユーザーに到達してほしい目標やアクションを指し、ユーザー単位で計測します。

Ptengine Experienceでは、以下の2種類のゴールを設定できます：

1. 特定ページURLへのアクセス
   * 例：会員登録完了ページ、購入完了ページなど
   * カウント方法：指定ページへの到達1回につき1カウント
2. イベントの発生
   * あらかじめ設定したPtengineイベントの発生
   * カウント方法：イベント発生1回につき1カウント

💡 ゴールの詳細については、[「ゴールとは」](/experience/goal/setting#grutoha)のドキュメントもご参照ください。

## **ゴール到達UU**

🎯 ゴール到達UUとは、体験が表示されたユーザーのうち、設定されたゴールに到達したユニークユーザー数を指します。

📌 重要な条件：

* ゴール到達UUとして計測されるためには、同一セッション内で体験が表示される必要があります。

💡 計測の仕組み：

1. ユーザーに体験が表示される
2. 同一セッション内でゴールに到達
3. ゴール到達UUとしてカウント

❌ 計測されないケース：

* 体験接触後に離脱し、再訪問時に体験表示なしでゴール到達

✅ 例外的に計測されるケース：

* ブラウザにページが開かれたまま当セッションが終了
* その後ページに戻り、以下の条件を満たした場合
  * ページ編集：クリックまたはスクロール
  * Web接客：ポップアップまたは固定バーのクリック

🔍 注意点：

ゴール一覧画面の「ゴールに到達したユーザー」数と、体験レポート内の「ゴール到達UU」は異なる場合があります。

* ゴール一覧：体験表示に関係なく、定義に到達した純粋なユーザー数
* 体験レポート：体験表示後、同セッション内でゴールに到達したユーザー数

この違いを理解することで、より正確な分析が可能になります。

## ゴール率

ゴール率は、体験が表示されたユーザーのうち、設定されたゴールに到達したユーザーの割合を示します。

計算式：ゴール到達ユーザー数 ÷ 体験表示ユーザー数 × 100%

## 表示達成率 / クリック達成率

体験のゴールには「計測モード」があり（ゴールの「アドバンス設定」で切り替え）、レポートの達成指標は計測モードに応じて変わります。

* **表示達成率**：体験を表示したユーザーのうちゴールを達成した割合。母数は表示ユーザー数（上記「ゴール率」と同じ基準）。
* **クリック達成率**：体験内のボタン／リンクをクリックしたユーザーのうちゴールを達成した割合。母数はインタラクションUU（体験内のボタン／リンクをクリックした人）。

クリックできる要素を持たない体験（インライン／リダイレクトなど）では計測モードの切り替えはなく、従来どおり「ゴール率」として表示されます。クリック達成の計測は2026年6月22日(JST)以降のデータを対象としています。

## 平均滞在時間

体験表示後、ユーザーがPtengineで計測していないページに遷移（離脱）するまでの平均時間を表します。

計算式：(体験表示後の総滞在時間) ÷ (表示UU)

## 平均ページビュー数

体験表示後、ユーザーがPtengineで計測していないページに遷移（離脱）するまでの平均ページビュー数です。

計算式：(体験表示後の総ページビュー数) ÷ (表示UU)

## 直帰率

体験表示後、Ptengineで計測中の他のページに遷移せずに離脱したユーザーの割合を示します。

計算式：(直帰数) ÷ (表示UU) × 100%

## ユーザーラベル

サイト訪問者を識別するための情報です。

デフォルトで取得される主なラベル：

* 総セッション数
* 初回参照元
* ドメイン
* ユニークユーザーID
* 初回リファラー
* 初回アクセス日時
* 最終アクティブ日時
* 国
* OS
* 都市
* 地域
* ブラウザ


# Experience設定

原則として、WebサイトにPtengineの基本タグが設置されていれば、Experience機能をご利用いただけます。

ただし、以下のような施策をExperienceで配信する場合には、追加の設定が必要です。

* 個人情報に基づいたパーソナライズ配信
* 購入された商品情報に基づいたパーソナライズ配信

これらの施策に必要な特定の行動データや個人情報を取得するためには、イベント機能やユーザー識別機能を利用します。

このセクションでは、Experienceのイベント機能とユーザー識別機能について、およびそれぞれのタグの取得方法と設定方法などを説明します。


# カスタムイベントの設定方法

この記事ではPtengineのカスタムイベント機能の設定方法をご案内します。

## カスタムイベントの設定方法

1. Experienceにログインし、管理画面にある「データ管理」>>「トラッキングタグを取得」をクリックしてします。

   ![](/files/8W2eXPspRlS3vqlvRTPm)
2. 「トラッキングタグを取得」画面に入り、「イベント計測」をクリックし、イベントタグをコピーします。

   ![](/files/JWacWpjUXpLPNL8QbNlf)
3. 更にユーザー行動トレンドを正確に把握したい場合、トラッキングタグでイベントラベルとしての詳細情報を追加しましょう。サンプルタグのように、必要に応じてタグを計測したい情報へ変更してください。

   <mark style="color:purple;">**Note：**</mark>**イベントラベル: '値'**

   イベントラベルは任意に定義でき、値はイベント発火時に取得する指示を書き入れます。

   イベントラベルの詳細については[こちら](/experience/setting/event-labels#ibentoraberutoha)の記事をご参照ください。

   ```jsx
   ptengine.track('check_out', {
   event_label_1: 'value_1',
   event_label_2: 'value_2'
   });
   ```
4. 3のコードをイベントが発生するページ設置してください。
   1. Google Tag Managerを利用している場合、[Google Tag Manager経由で設定](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/start-guide/tag-gtm.md#ptenginenotaguwogoogle-tag-manager-gtm-nisuru)をご参照ください。
   2. 直貼りの場合は\</body>の前に設置してください。

## **設定事例**

**実例1：「Login」ボタンをクリックしたユーザー行動をイベントとして計測する場合**

**サンプルタグ1（HTML）：**

```jsx
<button onclick="ptengine.track('イベント名')">Login</button>
```

**サンプルタグ2（JavaScript）：**

```jsx
document.getElementById('btnLogin').addEventListener('click', function (){
ptengine.track('イベント名');
});
```

**実例2：「Submit」ボタンをクリックしたユーザー行動をイベントとして計測し、メールアドレスや登録日を計測する場合**

**サンプルタグ1（HTML）：**

```html
<button id="btnSubmit"
    onclick="ptengine.track('イベント名', {
	    email: document.getElementById('email').value,　
	    submit_date: new Date()
    });">
submit</button>

```

**サンプルタグ2（JavaScript）：**

```jsx
    document.getElementById('btnSubmit').addEventListener('click', function() {
        ptengine.track('イベント名', {
            email: document.getElementById('email').value,
            submit_date: new Date()
        });
    });

```

{% hint style="warning" %}
トラッキングタグの設定はサイトのhtmlソースコードを変更することになるため、技術者の方に設定して頂くか、弊社サポートが必要な場合はチャットなどによりお気軽にお問い合わせください。
{% endhint %}

設定完了後「データ管理」画面でイベントの詳細情報を確認できます。

また「イベント」や「イベントラベル」機能で「…」編集ボタンをクリックすると、説明も追加できます。

![](/files/cO8AoQQFXnIWjnW7nyyR)


# カスタムイベントの設定方法（詳細）

{% hint style="info" %}
コード不要のビジュアル設定方法については[ビジュアルイベント設定方法](/insight/event/setup)をご覧ください。
{% endhint %}

## 設定手順

1. Ptengine Experienceにログインし、管理画面にある「データ管理」>「トラッキングタグを取得」をクリックします。
2. 「トラッキングタグを取得」画面に入り、「イベント計測」をクリックし、イベントタグをコピーします。
3. コピーしたコードをイベントが発生するページに設置してください。
   * Google Tag Managerを利用している場合、[Google Tag Manager経由で設定](/start-guide/othertag/tag-gtm)をご参照ください。
   * 直貼りの場合は`</body>`の前に設置してください。

## コードによるイベント計測

`ptengine.track` メソッドを使用して、重要な行動のイベントトラッキングを行います。このメソッドをフォーム送信成功や決済成功など、あらゆるユーザー行動に埋め込むことができます。商品情報や関連するインタラクション情報などのプロパティをイベントに追加することも可能です。

```javascript
ptengine.track('check_out', {
    // イベントプロパティー：決済した商品情報、予約情報など
    product_category: 'Clothing',
    product_pricing: '1293'
});
```

イベントプロパティーを活用することで、ユーザー行動トレンドをより正確に把握できます。必要に応じてプロパティを追加・変更してください。

イベントプロパティーの詳細については[イベントプロパティーについて](/experience/setting/event-labels)の記事をご参照ください。

## 設定事例

### 実例1：「Login」ボタンのクリックを計測する

**HTMLの場合：**

```html
<button onclick="ptengine.track('登録')">Login</button>
```

**JavaScriptの場合：**

```javascript
document.getElementById('btnLogin').addEventListener('click', function() {
    ptengine.track('登録');
});
```

### 実例2：「Submit」ボタンのクリック時にメールアドレスや登録日も計測する

**HTMLの場合：**

```html
<button id="btnSubmit"
    onclick="ptengine.track('イベント名', {
        email: document.getElementById('email').value,
        submit_date: new Date()
    });">
submit</button>
```

**JavaScriptの場合：**

```javascript
document.getElementById('btnSubmit').addEventListener('click', function() {
    ptengine.track('イベント名', {
        email: document.getElementById('email').value,
        submit_date: new Date()
    });
});
```

### 実例3：複数のカート追加ボタンを1つのイベントとして記録する

```javascript
try {
    var opationRecord = [];

    function ptEventSend(eventName) {
        if (eventName && !opationRecord.includes(eventName)) {
            opationRecord.push(eventName);
            window.ptengine && window.ptengine.track(eventName);
        }
    }

    function addEventListenersToElements() {
        var addCartBottom = document.getElementById('add_cart_bottom');
        var addCart = document.getElementById('add_cart');

        if (addCartBottom) {
            addCartBottom.addEventListener('click', function() {
                ptEventSend('カート追加');
            }, false);
        }

        if (addCart) {
            addCart.addEventListener('click', function() {
                ptEventSend('フローティングバーカート追加');
            }, false);
        }
    }

    addEventListenersToElements();
    var ptTimer = setInterval(addEventListenersToElements, 500);

} catch (e) {}
```

{% hint style="warning" %}
トラッキングタグの設定はサイトのHTMLソースコードを変更することになるため、技術者の方に設定して頂くか、弊社サポートが必要な場合はチャットなどによりお気軽にお問い合わせください。
{% endhint %}

設定完了後「データ管理」画面でイベントの詳細情報を確認できます。また「イベント」や「イベントプロパティー」機能で「…」編集ボタンをクリックすると、説明も追加できます。


# イベントラベルについて

イベントプロパティーはカスタムイベントのみ利用可能です。

## イベントプロパティーとは📝

1．ウェブ解析ツール（PtengineやGoogleアナリティクスなど）でイベントをさらに細かく分類・説明するためのプロパティです。

2．ウェブサイトやアプリでユーザーが行った以下のような行動の【詳細】です。

* フォーム送信　 【送信した内容など】
* 新規会員登録　 【性別、年齢など】
* その他ボタンのクリック　 【カートに追加した商品など】

### イベントの基本構成🔍

ウェブ解析のイベント（Ptneingeではカスタムイベント）は、主に3つの要素で構成されています。

1. **イベントカテゴリ**🗂️\
   例：ボタンクリック、ページ閲覧、フォーム送信など、行動の「大まかな種類」
2. **イベントアクション**▶️\
   例：クリックした、送信した、開いたなど、具体的な「動作」
3. **イベントプロパティー**🏷️\
   例：どのボタンか、どのページか、どんな内容か、どのようなユーザーかなど、「詳細な情報」

**イベントプロパティー**はこの中で、行動の詳細や背景を記録する役割を持っています。

### イベントプロパティーの役割✨

イベントプロパティーを使うことで、ユーザー行動をより深く理解できます。

<table><thead><tr><th width="105.53125">例</th><th width="170.078125">イベントカテゴリ</th><th width="169.8203125">イベントアクション</th><th width="170.48046875">イベントプロパティー</th><th>可能な分析</th></tr></thead><tbody><tr><td>ECサイト</td><td>ボタンクリック</td><td>カートイン</td><td>・商品名<br>・商品ID<br>・価格<br>・商品カテゴリなど</td><td><p>・人気の商品は？</p><p>・高額商品かどうか</p></td></tr><tr><td>求人サイト</td><td>ボタンクリック</td><td>応募</td><td>・応募した求人のID<br>・性別、年齢<br>・勤務年数など</td><td><p>・人気のある求人は？</p><p>・応募者の特徴は？</p></td></tr></tbody></table>

このように、イベントプロパティーは以下のような内容を見える化し、サイト改善やマーケティング施策をヒントを与えます。

・「ユーザーがなぜその行動を取ったのか」

・「その行動の裏にどんな特徴があるのか」

### イベントプロパティーの実装💡

#### Step１：何を知りたいかを明確にする

イベントプロパティー導入において最初で最も重要なステップです。

「ユーザーのどんな行動や意図を深く理解したいか」を明確にすることです。

**ビジネス課題**（例：「なぜ購入されないのか？」、「どのコンテンツが効果的か？」）を出発点に考えましょう。

**自問すべきポイント：**

* 自社の主要なビジネス目標は何か？
* その達成に必要なユーザー行動は何か？
* その行動の背景や詳細で知りたいことは何か？

#### Step２：コードの用意（開発者向けガイド）

Ptengineのイベントプロパティーは、シンプルなJavaScriptコードをウェブサイトに埋め込むことで実装できます。

通常、技術的な知識を持つ開発者の協力が必要です。

基本的な呼び出し形式は以下の通りです。

```javascript
ptengine.track('イベント名', {
    property_key1: 'property_value1',
    property_key2: 'property_value2'
});
```

{% hint style="success" %}
'label\_key1' はイベントプロパティー名、'label\_value1' はラベルの値です。
{% endhint %}

**実装の具体例**

**例1：「資料請求」のボタンがクリックされた場合**

* `資料請求`がイベント名
* `document_id`や`user_type`などがイベントプロパティー

```javascript
ptengine.track('資料請求', {
    document_id: 'DL001',
    document_name: 'Ptengine活用ガイド',
    user_type: '法人'
});
```

**例2：フォーム送信イベント**

* `お問い合わせ送信`がイベント名
* `inquiry_type`や`service_name`がイベントプロパティー

```javascript
ptengine.track('お問い合わせ送信', {
    inquiry_type: '製品について',
    service_name: 'ヒートマップ機能'
});
```

{% hint style="info" %}
*ウェブサイトの読み込み速度に影響を与えないよう、Ptengineのタグは非同期で読み込まれるように設計されています。*
{% endhint %}

**ポイント☝️**

* ラベルは「何を知りたいか」に合わせて自由に設計できます。
* コード実装が、Ptengineのサポートも利用可能です（有料サービス）。

### Ptengineにおける活用例🚀

Ptengineでは、イベントプロパティーを簡単に設定・活用できます。

* **導入ステップ🛠️**
  1. まず、「どんな情報を知りたいか」を決める（例：購入につながらない理由、人気商品の傾向など）。
  2. 必要なイベントプロパティーを設計し、開発者がJavaScriptコードを実装。
  3. Ptengineの管理画面でデータを確認し、ヒートマップや分析機能で活用。
* **活用事例📊**
  * 商品カテゴリや価格帯ごとにカート投入率や離脱率を比較し、改善点を発見。
  * サービス申し込みの各段階での離脱理由を分析し、フォームや案内を最適化。
  * ユーザー属性ごとの行動傾向を把握し、パーソナライズ配信やクーポン施策に活用。

## まとめ📝

* **イベントプロパティー**は、ユーザー行動の「詳細」、「背景」を記録するための大切な仕組みです。
* これを活用することで、「なぜその行動が起きたのか」、「どんな特徴があるのか」を深く分析でき、ビジネスの課題発見や成果向上につながります。
* Ptengineなら、イベントプロパティーの設定・活用も手軽に始められるので、ユーザー理解とサイト改善の強力な武器としてぜひ活用してください。


# ユーザー識別機能の概要

> **SUCCESS**
>
> **ユーザー識別は**
>
> Ptengine Experienceの強力な機能で、独自のユーザー属性データを取得・活用できます。
>
> この機能を活用することで、ユーザー理解が深まり、より効果的なマーケティング戦略の立案が可能になります。
>
> 🔒 注意：ユーザーのプライバシーを尊重し、適切なデータ取り扱いが必要です。

## メリット 💡

匿名ユーザーと識別済みユーザーの紐付け 匿名ユーザーID（デバイスID）

```
識別済みユーザーID（例：ログインアカウントID）
```

正確なユーザー行動把握

詳細なユーザーセグメンテーション

パーソナライズされたコンテンツ提供

## 具体的な活用方法 🚀

匿名ユーザーの識別済みユーザーへの変換

識別済みユーザーの属性収集

### デフォルトで収集される属性

最終アクティブ日

登録日

総セッション数

初回訪問時の参照元ドメイン

初回訪問時の参照元URL

### カスタム属性のアップロード

名前

電話番号

性別

年齢

興味

会員ランク

その他CRMやデータベースの情報 📊 オンライン・オフラインデータの統合により、より詳細なユーザープロファイルを構築できます。

## 利用ケース例 🌟

ログイン機能のあるサイトでの活用：

ユニークIDによるユーザー識別

ユーザーセグメント別のアプローチ 匿名ユーザー：ログイン誘導キャンペーン

```
識別済みユーザー：パーソナライズされた情報提供
```


# ユーザー識別タグの設定方法

## **ユーザー識別タグの設定**

⚠️**注意事項**

* サンプルタグはあくまで参考用です。実際の実装時には、サイトの構造やデータ取得方法に合わせてカスタマイズが必要です。
* 識別IDが取得できない場合、匿名ユーザーとして計測されます
* ユーザーのプライバシーに配慮し、必要最小限の情報のみ取得してください

```jsx
//ユーザー識別タグ
ptengine.identify('ユーザー識別ID', {　
    ユーザーラベル1: '値',
    ユーザーラベル2: '値'
});

//実際の設定例
    if(userId){
        ptengine.identify(userId, { 
            free_registered_date: {{registered_date}},
            monthly_registered_date: {{pay_date}},
            member_status: {{member_status}},
            user_id: pickPatternIdFromAcVisitorUserId(getCookieValue('user_id'))
        }
```

### 📌 推奨設定場所

ユーザー情報を取得し、身分を特定できる箇所に設定します。例えば：

* ログインページ
* 会員登録ページ
* ユーザー情報更新ページ

### 🔧 設定手順

1. Ptengine Experienceにログイン
2. 「データ管理」>「タグ取得」へ移動
3. 「タグ取得」>「ユーザー識別」を選択
4. ユーザー識別用タグをコピー
5. 計測したいページを選定
   1. ユーザー情報取得ページ（メールアドレス、性別、IDなど）
   2. 具体的なアクション発生ページ（登録、ログイン、購買など）
6. GTM経由もしくは5で選定したページに直貼り

### 💡 タグのカスタマイズ

* ユーザー識別ID：変更の少ないユニークな情報（例：アカウントID）
* ユーザーラベル：データの項目名（例：名前、性別、年齢）
* 値：ユーザーが入力した実際の内容

### 🚀 実装のポイント

* ログインや登録が完了した瞬間にタグを発火させる
* フォーム送信時にユーザー識別IDと値を動的に取得する

***

## **ユーザー識別タグの設定実例**

🌟 シナリオ：「登録」ボタンクリック時にユーザー情報を取得

![](/files/Q89aoo0uqpkkcFYq9gWL)

### 📋 取得情報：

* ユーザーID (uid)
* メールアドレス
* 電話番号
* 性別
* 年齢
* 登録日

### 🔧 タグ実装例

```jsx
document.getElementById('btnSignup').addEventListener('click', function() {
    ptengine.identify(document.getElementById('uid').value, {
        email : document.getElementById('email').value,
        phone : document.getElementById('phone').value,
        gender: document.getElementById('sex').value,
        age: document.getElementById('age').value,
        last_active_date: new Date()
    })
});
```

### 📊 活用例

このタグ設定により、ユーザーの登録プロセスを詳細に分析し、以下のような施策が可能になります：

* 年齢層別のコンバージョン率分析
* 性別に応じたパーソナライズドコンテンツの提供
* 登録日ベースのリテンションマーケティング

この実装例を基に、各サイトの具体的な要件やセキュリティ方針に合わせてカスタマイズしてください。


# データ管理ページの説明

{% hint style="success" %}
**データ管理セクションは**

さらに3つのカテゴリに分かれています：

1. イベント
2. イベントプロパティー
3. ユーザーラベル
   {% endhint %}

このセクションでは、以下の操作が可能です：

* 📋 現在取得しているデータリストの確認
* ✏️ ラベルのデータ形式の編集
* 📝 説明メモの編集

🌟データ管理のページから現在取得しているデータリストの確認、ラベルのデータ形式の編集、また説明メモを編集することができます。

💡 データ管理ページを活用することで、収集しているデータの整理や管理が効率的に行えます。これにより、データの可視性が向上し、分析や意思決定プロセスが改善されます。

🔍 定期的にこのページを確認し、データの整合性を保ち、必要に応じて更新することをおすすめします。特に新しいイベントやラベルを追加した際には、適切に分類され、説明が付与されているか確認しましょう。

✅ データ管理を適切に行うことで、チーム内でのデータの共有や理解が促進され、より効果的なデータ活用につながります。

<figure><img src="/files/RNIzBMNgck7K6kIRWuyz" alt=""><figcaption></figcaption></figure>

### イベント

<figure><img src="/files/ElLSJJkh5x10OrvwtBCk" alt=""><figcaption></figcaption></figure>

管理画面では、設定したイベントの関連情報を確認できます。以下の情報が表示されます：

1. イベント名 📝
   * イベントタグ埋め込み時に設定した名称
   * 自由に設定可能
2. 取得方法 🔍

   * Experienceでは「タグ」、「体験」、「タグ、体験」と表示

   \*体験で設定したイベントは体験と表示、そうではない場合は「タグ」と表示します。
3. 説明 ℹ️
   * イベントの詳細説明を追加可能
   * 「編集」ボタンから自由に追加・修正可能

💡 説明を追加することで、イベントの目的や内容がより明確になり、チーム内での共有や理解が促進されます。

{% hint style="danger" %}
**注意**：イベントが計測されてから管理画面に反映されるまで時間がかかる場合があります。新しく設定したイベントがすぐに表示されない場合は、しばらく待ってから再確認してください。
{% endhint %}

✅ イベントの設定と管理を適切に行うことで、ユーザー行動の詳細な分析が可能になり、より効果的なウェブサイト最適化やマーケティング戦略の立案に役立ちます。

📌イベント機能と設定方法等の詳細について[こちらのガイド](/experience/setting/custom-event-setup)をご参照ください。

### イベントプロパティー

イベントプロパティーは、ユーザーの行動に付随する追加情報を集計・管理するための機能です。例えば、「購入した商品カテゴリ」や「購買金額」などの情報を取得できます。

<figure><img src="/files/g6KXnRhEON8uiSJ42lO8" alt=""><figcaption></figcaption></figure>

右側の設定ボタンをクリックし、編集を押しますと、下記画面が表示されます。

<figure><img src="/files/ZQgZxffJyzs0ZiLFtCpA" alt=""><figcaption></figcaption></figure>

イベントプロパティーは、イベント設定時に取得することができます。

管理画面では、設定したイベントプロパティーの関連情報を確認できます。以下の情報が表示されます：

1. データ名 📝
   * イベントタグで埋め込んだイベントプロパティー名
   * 自由に設定可能
2. 取得方法 🔍
   * タグ：イベントタグの設置により取得されたデータ
3. データ形式 🔢
   * 取得データの形式を指定
   * 選択肢：テキスト、日付、数値
4. 説明 ℹ️
   * イベントプロパティーの詳細説明を追加可能
   * 「編集」ボタンから自由に追加・修正可能

💡 説明を追加することで、イベントプロパティーの目的や内容がより明確になり、チーム内での共有や理解が促進されます。

{% hint style="danger" %}
注意：イベントプロパティーが計測されてから管理画面に反映されるまで時間がかかる場合があります。新しく設定したイベントプロパティーがすぐに表示されない場合は、しばらく待ってから再確認してください。
{% endhint %}

✅ イベントプロパティーを適切に設定・管理することで、ユーザー行動のより詳細な分析が可能になります。これにより、商品カテゴリごとの人気度や購買金額の傾向など、ビジネスに直結する洞察を得ることができます。

🔧 データ形式の選択は、後の分析や可視化の際に重要になります。例えば、購買金額は「数値」、購入日は「日付」、商品カテゴリは「テキスト」として設定することで、それぞれに適した分析が可能になります。

### ユーザーラベル

<figure><img src="/files/ZRlLhBlTMbHreifLLu6V" alt=""><figcaption></figcaption></figure>

ユーザーラベルは、高精度なパーソナライゼーションを実現するための機能です。行動データだけでなく、お客様が保有する顧客データ（メールアドレス、誕生日、購買頻度など）と連携し、管理することができます。

📌 詳細な設定方法は[こちらのガイド](/experience/setting/user-identification/user-id-tag-setup)をご参照ください。

管理画面では、設定したユーザーラベルの関連情報を確認できます。以下の情報が表示されます：

1. データ名 📝
   * ユーザー識別タグで埋め込んだユーザーラベル名
   * 自由に設定可能
2. 取得方法 🔍
   * デフォルト：基本タグによる自動取得データ（例：total session、initial referring、domain など）
   * タグ：ユーザー識別タグによる取得データ
   * キャンペーンフォーム：キャンペーンフォームの「ユーザー属性として収集」機能による取得データ💡 キャンペーンフォームの設定方法は[こちらの記事](/experience/campaign/create-new-1/survey-text#fmunitsuite)をご参照ください。
3. データ形式 🔢
   * 取得データの形式を指定
   * 選択肢：テキスト、日付、数値
4. 説明 ℹ️
   * ユーザーラベルの詳細説明を追加可能
   * 「編集」ボタンから自由に追加・修正可能

💡 説明を追加することで、ユーザーラベルの目的や内容がより明確になり、チーム内での共有や理解が促進されます。

{% hint style="danger" %}
注意：ユーザーラベルが計測されてから管理画面に反映されるまで時間がかかる場合があります。新しく設定したユーザーラベルがすぐに表示されない場合は、しばらく待ってから再確認してください。
{% endhint %}

✅ ユーザーラベルを適切に設定・管理することで、より詳細なユーザープロファイルを構築し、高度なセグメンテーションやパーソナライゼーションが可能になります。これにより、ユーザーエクスペリエンスの向上やマーケティング効果の最大化が期待できます。

🔒 個人情報を含むデータを扱う際は、プライバシーポリシーやデータ保護規制に準拠していることを確認してください。

## タグ取得

タグ取得セクションでは、Ptengineの機能を活用するために必要な3種類のタグを取得できます。各タグの役割と特徴を以下に説明します：

### 基本タグ 📌

* 役割：Ptengineの基本的な計測機能を有効にする
* 特徴：すべてのページに設置が必要
* 使用例：ページビュー数、訪問者数の計測

insightの画面で取得可能です。同じプロジェクトであれば、どの画面から取得しても構いません。

<figure><img src="/files/JjoWCKnAoMyYe2iJWND4" alt=""><figcaption></figcaption></figure>

### イベントタグ 🎯

* 役割：特定のユーザーアクションを計測する
* 特徴：必要な箇所にのみ設置
* 使用例：ボタンクリック、フォーム送信の計測

📌イベント機能と設定方法等の詳細について[こちらの記事](/experience/setting/custom-event-setup#kasutamuibentono)をご参照ください。

<figure><img src="/files/tZ424pGhY0H05FTnbddj" alt=""><figcaption></figcaption></figure>

### ユーザー識別タグ 👤

* 役割：個々のユーザーを識別し、行動を追跡する
* 特徴：ログイン後のページなど、ユーザーが特定できる箇所に設置
* 使用例：ログインユーザーの行動分析、顧客セグメンテーション

💡 これらのタグを適切に設置することで、より詳細で正確なデータ収集が可能になります。

🔧 タグの設置方法や位置によって、収集できるデータの質と量が変わるため、目的に応じて適切なタグを選択し、正しく実装することが重要です。

✅ 各タグの役割を理解し、ウェブサイトの構造や分析目的に合わせて効果的に活用しましょう。必要に応じて、開発者やウェブ管理者と協力して、タグの実装を行うことをおすすめします。

📌 詳細な設定方法は[こちらの記事](/experience/setting/user-identification/user-id-tag-setup)をご参照ください。

<figure><img src="/files/d9asFID0JvnIHC4Oa8nH" alt=""><figcaption></figcaption></figure>


# ユーザーグループ

{% hint style="success" %}
**ユーザー機能とは**

同じ特徴や傾向を持つユーザー群をセグメントする機能です。これにより、ユーザーの行動や属性に基づいた精密な分析と最適化が可能になります。
{% endhint %}

## 💡 なぜユーザー機能が必要か

Ptengine Experienceは、**パーソナライゼーション**を実現するためのプラットフォームです。その中心となるのが、**ユーザー機能**です。この機能は、単にデータを集めるだけでなく、ビジネスの成長と顧客満足度の向上に直接つながる、非常に重要な役割を担っています。

### ユーザー機能がもたらす価値とは**🤔**

1. **🎯 多角的なユーザー識別**
   * 行動パターン🚶‍♀️、属性👔、興味関心💡など、様々な角度からユーザーを分類し、深く理解することができます。
2. **📊 効果的なセグメンテーション**
   * 詳細なユーザー理解に基づき、似た特性を持つユーザーをグループ化👥します。
   * これにより、より的確なマーケティング戦略を立て、キャンペーンやコンテンツを最適化できます。
3. **✨ 最適化された体験の提供**
   * セグメンテーションの結果や他の機能と組み合わせることで、各ユーザーにピッタリ合った体験を提供できます。
   * サイト訪問者一人ひとりに合わせたコンテンツや機能は、ユーザー体験 (UX) を向上させます。
4. **😊 ユーザー満足度の向上**
   * 自分に関連性の高い、パーソナライズされた体験は、ユーザーの満足度を高めます。

### ユーザー満足度がビジネスにもたらす好循環**🔄**

満足度の高いユーザー体験は、ビジネスに大きな成果をもたらします。

* **📈 コンバージョン率 (CVR) の向上**
* **🤝 顧客ロイヤリティの強化**
* **🌱 長期的な事業成長のサポート**

これらは短期的な売上増だけでなく、持続的なビジネスの成長を支えます。

**まとめ：ユーザー機能は成功への基盤**

つまり、ユーザー機能は…

<img src="/files/hXXHmi2IfhDPHXZvphX1" alt="" class="gitbook-drawing">

という、ビジネス目標達成に向けた一連のプロセスの**基盤**となっているのです。

このように、ユーザー機能は現代のデジタルマーケティングにおいて**不可欠な要素**であり、Ptengine Experienceの中核を成す**最も重要な機能の一つ**と言えるでしょう。

## 🚀 ユーザーの分類

Experienceは、ウェブサイトを訪れるユーザーを大きく2つのカテゴリーに分類して識別します。

匿名ユーザーと識別ユーザーです。この分類方法により、様々なレベルでユーザーの行動を追跡し、分析することが可能になります。

### 匿名ユーザー❓️

匿名ユーザーの識別は、主にブラウザのクッキーを利用して行われます。ptengineの基本タグを設置するのみでデフォルトで取得されます。

#### **識別できる情報**

1. **行動データ💨**
   * 訪問開始ページ
   * 新規訪問か再訪問か
   * 流入元
2. **属性データ✨️**
   * 使用デバイス（PCかスマホか）
   * ブラウザの種類とバージョン
   * OS情報
   * アクセス元の地域情報（国や都道府県レベル）

#### **匿名ユーザー識別のメリット**

* プライバシーを侵害せずにユーザー行動を分析可能
* 大量のデータ収集によるトレンド分析

#### **匿名ユーザー識別のデメリット**

* クッキーの有効期限や削除によりデータの連続性が失われる可能性
* デバイスやブラウザを跨いだ追跡が困難

### 識別ユーザー👥

Experienceは、匿名ユーザーの基本データに加え、ユーザー識別タグを実装することで、より詳細で個別化されたデータを取得することができます。

#### 取得可能なデータ例

* 年齢
* 性別
* 特定ID（会員IDなど）
* 購買単価
* その他、サイト運営者が独自に保有するデータ

#### ユーザー識別タグを利用するメリット

1. **データ統合**：独自データとExperienceの行動データを統合し、包括的なユーザープロファイルを作成。
2. **高度なパーソナライゼーション**：

   詳細なユーザーデータを基に、個々のユーザーに最適化されたコンテンツや体験を提供。
3. **ユーザー体験の向上**：

   パーソナライズされた体験により、ユーザー満足度と engagement を向上。
4. **マーケティング効果の最大化**：

   適切なターゲティングとメッセージングにより、コンバージョン率や顧客ロイヤリティを向上。

#### ユーザー識別タグを利用するデメリット

* **JavaScript知識が必要**
  * フロントエンド開発スキルが必要
  * 非技術者にとっては実装が困難
* **実装時間の増加**
  * 開発リソースの確保が必要
  * プロジェクトのタイムラインに影響を与える可能性

このように、Experienceのユーザー識別システムは、匿名ユーザーの基本的な行動分析から始まり、ユーザー識別タグによる詳細なデータ統合へと発展します。これにより、大規模なトレンド分析から個別ユーザーへのパーソナライズされたアプローチまで、幅広いマーケティング戦略の実現が可能となります。

結果として、ユーザー体験の質が向上し、ビジネス目標の達成に直接的に貢献することができるのです。

## ユーザー機能の使い方

ユーザー機能は常に[体験](/experience/glossary#ti-yan)と合わせて利用することになります。以下に、具体的な活用シナリオとその実装手順を紹介します。

**シナリオ1：ECサイトでの非会員向け会員登録促進 🛒**

**目的**: 非会員ユーザーに対して、会員登録やメルマガ登録の導線を強化する。

**Experienceでの実装手順**

1. Web接客の体験を作成し、登録を促すポップアップを作成する
2. ユーザー機能で匿名ユーザーのユーザーグループを作成する
3. 1で作成した体験の対象ユーザーを2で作成したグループを指定して配信する

**シナリオ2：Facebook広告からの再訪問者へのコンテンツ配信 📘**

**目的**: Facebook広告から流入したユーザーが再訪問した際に、ユニークな内容を訴求する。

**Experienceでの実装手順**

1. ページ編集の体験を作成し、コンテンツXを追加する
2. ユーザー機能でFacebook流入のユーザーグループを作成する
3. 1で作成した体験の対象ユーザーを2で作成したグループを指定して配信する

具体的な設定方法については次の記事をご参照ください。


# ユーザーセグメントの作り方

## **ユーザーセグメントの作成ガイド**

### 📚 既存テンプレートの活用

Ptengine Experienceでは、以下の基本テンプレートを提供しています：

1. **匿名ユーザー（Anonymous）** 🕵️
   * 対象：主要コンバージョンに未到達のユーザー
   * 例：未会員登録、未問い合わせ、未予約など
   * 戦略：
     * 流入・訪問履歴に基づくパーソナライズ
     * 製品・サービスの価値訴求
2. **識別済みユーザー（Known users）** 👤
   * 対象：基本的なビジネスゴールを達成したユーザー
   * 例：ログイン済み、購入済み、問い合わせ済み
   * 戦略：
     * ユーザー属性・行動データに基づく付加価値提案
     * 継続的な関係構築によるファン化
3. **ロイヤルユーザー（Loyal users）** 🌟
   * 対象：製品・サービスを高く評価しているユーザー
   * 戦略：
     * 特別案内の提供
     * ユーザーボイスの収集と改善への活用
     * 口コミ促進

### 🛠️ オリジナルセグメントの作成

ビジネスニーズに合わせたカスタムセグメントの作成も可能です。

## **ユーザーセグメントの設定手順**

{% hint style="info" %}
**動画↓↓↓**

チャプターーユーザーセグメントの作成方法をご覧ください。
{% endhint %}

{% embed url="<https://app.arcade.software/flows/7gHMfuEgCgi56EJLMo2V/view>" %}

***

{% hint style="info" %}
**テキスト↓↓↓**
{% endhint %}

### **1. 画面を開く**

Experienceのタグで「ユーザー」をクリックし、そして画面下部にある緑のボダンをクリックします。

<figure><img src="/files/XIHK7Jzx3wSmoz4lsmPp" alt=""><figcaption></figcaption></figure>

### **2. セグメント選択 🎯**

#### テンプレート利用の場合：

1. 星印をクリックしておすすめ内容（3つ）を表示
2. 利用したいテンプレートを選択
3. 「詳細を確認して定義する」をクリック

<figure><img src="/files/5pMUdTINcnGvTO4faPDD" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ckAoVdX08I1ciSCW2rgy" alt=""><figcaption></figcaption></figure>

#### オリジナルセグメント作成の場合：

* 「ユーザーセグメントを新規作成」をクリック
* または「オリジナル」から作成

<figure><img src="/files/fPMRpyYj4Yw5WKQkexeS" alt=""><figcaption></figcaption></figure>

### **3. セグメント設定 ⚙️**

①ユーザーグループの作成画面に入る

②ユーザーグループ名を記入

③フィルター条件を設定：

* ユーザー行動
* 訪問の属性
* ユーザーラベルなど

④「保存する」ボタンでセグメントを保存

![](/files/qNTrMaAAehV7DTUFk54w)

## 作成のポイント

1. 明確な目的設定
2. 適切なセグメント条件の選択
3. データの正確性の確認
4. 定期的な見直しと更新

### 💡 ヒント

* ユーザーの特定の行動に合わせたグループ
* 特定の商品・サービスに関心を示したユーザーグループ
* 地域や年齢層に基づくグループ

### 🔍 注意点

* データの質と量の確保
* セグメントの重複や矛盾の回避

### 📊 設定例

ユーザーセグメント条件についての説明は[こちら](/experience/user-group/segment-advanced)の記事をご参照ください。

* 「高頻度訪問ユーザー」セグメント：過去30日間で5回以上特定のページに訪問したユーザー

  <figure><img src="/files/dU8b4Os9JSorce4jqUCb" alt=""><figcaption></figcaption></figure>
* 「カート放棄ユーザー」セグメント：カートに商品を入れたが購入に至らなかったユーザー

  ⚠️注意：イベントは事前に設定する必要があります。

  <figure><img src="/files/kIWC8R2q3eiCN45Tz6hx" alt=""><figcaption></figcaption></figure>
* 「季節商品関心層」セグメント：特定の季節商品ページを閲覧したユーザー

  <figure><img src="/files/PYzOqvsn2Ki2Jrv4oTkw" alt=""><figcaption></figcaption></figure>

これらのテンプレートやカスタムグループを効果的に活用することで、より精緻なユーザー分析と、それに基づいたマーケティング施策の実施が可能になります。


# ユーザーセグメントの詳細設定ガイド

ユーザーセグメントを効果的に活用するには、適切な条件設定が不可欠です。

[ユーザーセグメントの作り方](/experience/user-group/create-segment)の記事ではセグメント設定の大まか流れについて説明しましたが、

この記事ではユーザーセグメントのフィルター条件について詳しく説明します。

<figure><img src="/files/pJWs7aS1a5MBL4cITAXm" alt=""><figcaption></figcaption></figure>

### フィルターの種類

ユーザーセグメントのフィルターは大きく3つのカテゴリーがあります。

1. ユーザーの行動
2. 訪問の属性
3. ユーザーラベル

#### 1. ユーザーの行動🏃‍♂️

ユーザーの行動は、ウェブサイト上での具体的なアクションを基にセグメントを作成します。以下の4つの項目から設定可能です

* ウェブサイト：過去●日間にどのようなページを何回訪問したか／しなかったかをフィルターする
  * **設定例**
    * 過去30日間に商品ページを5回以上訪問したユーザー
    * 過去7日間にブログを1回も訪問していないユーザー
  * **活用ポイント**
    * 高関心ユーザーの特定
    * 再エンゲージメントが必要なユーザーの抽出
* イベント：過去●日間にどのイベントを何回発生させたか／しなかったかをフィルターする
  * **設定例**：
    * 過去14日間に「カートに追加」を3回以上行ったユーザー
    * 過去30日間に「問い合わせフォーム送信」を1回も行っていないユーザー
  * **活用ポイント**：
    * 購買意欲の高いユーザーの特定
    * コンバージョン促進キャンペーンのターゲティング
* 訪問：具体的なページや行動問わず、過去●日間に全サイトに何回訪問したか／しなかったかをフィルターする
  * **設定例**：
    * 過去7日間に5回以上サイトを訪問したユーザー
    * 過去30日間に1回もサイトを訪問していないユーザー
  * **活用ポイント**：
    * ロイヤルユーザーの特定
    * 離脱リスクの高いユーザーへのリエンゲージメント
* 体験：過去●日間にどの体験のどのパターンを見たか／見なかったかをフィルターする
  * **設定例**：
    * 過去14日間にA/BテストのパターンAを見たユーザー
    * 過去30日間に特定のポップアップを見ていないユーザー
  * **活用ポイント**：
    * A/Bテストの結果分析
    * マーケティングキャンペーンの効果測定

#### 2. 訪問の属性🌐

訪問の属性データは、ユーザーが毎回サイトを訪問する際にブラウザのクッキーから取得される重要な情報です。デフォルトでは以下の18種類の属性データが取得できます。

以下のうち、キャンペーン名、流入元、メディア、キーワード、コンテンツはそれぞれutmパラメータのutm\_campaign、utm\_source、utm\_media、utm\_keyword、utm\_contentに当たります。

| 入口ページ   | 参照URL      |
| ------- | ---------- |
| 参照Host  | 訪問の種類      |
| キャンペーン名 | 流入元        |
| メディア    | キーワード      |
| コンテンツ   | 端末の種類      |
| OS      | OSのバージョン   |
| ブラウザ    | ブラウザのバージョン |
| 解像度     | メーカー       |
| 国／地域    | 都道府県       |

#### 3. ユーザーラベル🏷️

以下デフォルトでptengineでは識別できるユーザー属性データのラベルになります。

![](/files/Y1LpiLRuUwMYNUGcyMuu)

訪問の属性と一部同じですが、ユーザーラベルで条件を設定する場合、時間の指定は不要です。

<figure><img src="/files/ur1UPaevxcIrTWtqFfkK" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/eAn5nR9ZS3hkekN7VKwY" alt=""><figcaption></figcaption></figure>

また、ユーザー識別タグで独自のユーザー属性データを取得している場合は、その属性も上記に含まれます。

### フィルター条件の設定方法💅

Ptengineでは、ユーザーセグメントを作成する際に、多様なフィルター条件を設定することができます。これにより、特定の行動や属性を持つユーザーを正確に抽出し、ターゲットマーケティングや分析に活用できます。

#### 設定の基本構造

フィルター条件は以下の構造で設定します：

「フィルター」>>「データ」>>「マッチングルール」 >>「期間」

#### マッチングルールの詳細

マッチングルールには以下のオプションが含まれます（具体的な内容は提供されていませんが、一般的には以下のようなものが含まれます）：

* **等しい** (=)
* **等しくない** (≠)
* **以上** (≥)
* **以下** (≤)
* **含む**
* **含まない**
* **開始する**
* **終了する**

### 実践的なフィルター設定例

1. 🛒 **高頻度購入者**
   * フィルター：ウェブサイト上のユーザー行動
   * データ：購入イベント
   * マッチングルール：3回以上
   * 期間：過去30日間
2. 📱 **モバイルユーザー**
   * フィルター：訪問中の属性
   * データ：デバイス
   * マッチングルール：等しい
   * 値：モバイル
3. 🆕 **新規登録ユーザー**
   * フィルター：ユーザーラベル
   * データ：first seen
   * マッチングルール：以降
   * 値：\[現在の日付から30日前]
4. 🌟 **VIPユーザー**
   * フィルター：ユーザーラベル（カスタム）
   * データ：会員ランク
   * マッチングルール：等しい
   * 値：ゴールド

{% hint style="danger" %}
**注意点**

* **データの正確性**: フィルター条件設定前に、関連するイベントやユーザーラベルが正しく設定・取得されていることを確認
* **組み合わせの効果**: 複数のフィルターを組み合わせることで、より精緻なセグメントを作成可能
* **定期的な見直し**: ユーザー行動や市場トレンドの変化に合わせて、定期的にフィルター条件を見直し・更新
* **テストの重要性**: 新しいフィルター条件を適用する前に、小規模なテストを行い、意図した結果が得られるか確認
  {% endhint %}


# ユーザーセグメントのレポート

ユーザーセグメントを作成した後、ユーザー機能のTOPページから詳細なレポートにアクセスできます。このレポートは、セグメント化されたユーザーグループの分析に不可欠なツールです。

<figure><img src="/files/qGyjLmv7H57XQlGq5FIG" alt=""><figcaption></figcaption></figure>

上記画面内の赤枠に囲まれたエリアをクリックすれば、ユーザーグループのレポート画面に入ります。

レポートは主に以下の3つの部分から構成されています。

***

### レポートの主要構成要素

### 1. 概要 📊

* **基本データ**
  * ユーザーグループの総数
  * 全ユーザーに対する割合（%）
  * 過去7日間のアクティブユーザー数
  * トップ20ユーザーのアクセス状況
* **ユーザー識別機能利用時の追加情報**:

  例：メールアドレスなどの詳細ユーザー情報

  <figure><img src="/files/CjhHOcwi83pvW9hZIeL9" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**ヒント**: ユーザー識別機能を活用することで、より深いユーザー理解が可能になります。
{% endhint %}

#### 2. セグメントレポート 📈

* **分析可能なデータ**:
  * ユーザーの行動データ
  * 属性データ
  * ユーザー数の推移

<figure><img src="/files/l5VCIslcvxgH6dNnGwuu" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/kNO1i2lj7h8jMrZeER1c" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**活用ポイント**:

このデータを用いて、セグメント特有のトレンドや行動パターンを識別し、マーケティング戦略の最適化に活用できます。
{% endhint %}

#### 3. ユーザーリスト 📋

* **機能**:
  * グループ内の全ユーザーリスト表示
  * 属性データの確認
  * CSVデータのエクスポート
* **ユーザー識別設定時の追加機能**:

  独自に保有するデータとの連携が可能

![](/files/ILP6dWYSNlBmBNNKKh1Q)

🚀 **活用例**:

* ターゲットマーケティングキャンペーンの対象者リスト作成
* カスタマーサポートでの個別対応の改善

### レポート活用のベストプラクティス

1. **定期的なレビュー**: 週次や月次でレポートを確認し、トレンドの変化を把握
2. **クロスセグメント分析**: 複数のセグメント間で比較分析を行い、インサイトを得る
3. **アクションプランの策定**: レポートから得られた洞察を基に、具体的な改善策を立案
4. **A/Bテストの実施**: セグメント別に異なるアプローチを試し、効果を測定
5. **チーム間での共有**: マーケティング、製品開発、カスタマーサポートなど、関連部署でインサイトを共有

***

### データ活用戦略：ユーザーセグメントの最適化

効果的なユーザーセグメントを作成するには、適切なデータの収集と活用が不可欠です。以下に、必要なデータ、その収集方法、そして活用方法についての詳細を説明します。

### 1. 必要なデータとその収集方法

#### 1.1 基本データ（基本タグで収集）

* **ユーザー行動データ**:
  * ウェブページ閲覧履歴
  * サイト内での移動パターン
  * クリック行動
* **訪問属性データ**:
  * 流入元
  * 訪問頻度
  * 滞在時間
* **デバイス情報**:
  * 端末の種類（PC、スマートフォン、タブレットなど）
  * ブラウザの種類とバージョン
* **時間関連データ**:
  * 最終アクティブ日時（last active）

{% hint style="success" %}
**ポイント**: 基本タグの実装で、これらのデータを自動的に収集できます。
{% endhint %}

#### 1.2 独自のユーザー属性データ（ユーザー識別タグで収集）

* **人口統計学的データ**:
  * 年齢
  * 性別
  * 居住地域
* **行動履歴データ**:
  * 購買履歴
  * 購入金額
  * 商品カテゴリーの好み
* **会員情報**:
  * 会員ID
  * 会員ランク
  * ポイント数
* **その他のカスタムデータ**:
  * アンケート回答
  * 顧客満足度スコア

🔧 **実装方法**: ユーザー識別タグを設定し、独自データをExperienceと連携させます。

### 2. データの活用方法

#### 2.1 セグメントの作成

1. **基本セグメント**:
   * 新規訪問者 vs リピーター
   * デバイス別ユーザー（PC、モバイル、タブレット）
   * 地域別ユーザー
2. **行動ベースのセグメント**:
   * 高頻度訪問者
   * 長時間滞在ユーザー
   * 特定ページ閲覧者
3. **購買行動ベースのセグメント**:
   * 高額購入者
   * 複数回購入者
   * カート放棄ユーザー
4. **属性ベースのセグメント**:
   * 年齢層別グループ
   * 性別グループ
   * 会員ランク別グループ

#### 2.2 セグメントの活用

* **パーソナライズドコンテンツ配信**:

  各セグメントの特性に合わせたコンテンツや商品推奨を行う
* **ターゲティング広告**:

  セグメント別に最適化された広告キャンペーンを展開
* **顧客体験の最適化**:

  ユーザーの行動や属性に基づいてサイトのUI/UXを調整
* **リテンションマーケティング**:

  セグメント別にカスタマイズされたリテンション戦略を実施
* **製品開発への反映**:

  各セグメントのニーズや行動パターンを製品改善に活用

### 3. 実践のポイント

* **定期的な更新**: セグメントを定期的に見直し、最新のトレンドや行動変化を反映
* **A/Bテスト**: 異なるセグメントに対して異なるアプローチをテストし、効果を測定
* **クロスセグメント分析**: 複数のセグメントを組み合わせて、より深いインサイトを得る
* **プライバシーへの配慮**: データ収集と活用において、ユーザーのプライバシーを尊重し、適切な同意を得る

これらの戦略を実践することで、より精緻なユーザー理解と効果的なマーケティング施策の実現が可能になります。Experienceの機能を最大限に活用し、データドリブンな意思決定を行うことで、ビジネスの成長を加速させることができるでしょう。


# 体験配信

こちらのブロックではPtengine Experienceの「体験」を説明している記事をまとめてあります。

Ptengine Experienceは、ウェブサイト改善のための多様な「体験」タイプを提供しています。これらの体験は、ユーザーエンゲージメントの向上、コンバージョン率の改善、そしてより効果的なA/Bテストの実施を可能にします。

**提供される4つの体験タイプ**

1. Web接客：ポップアップや固定バーをテンプレートからもしくはノーコードで作成し、配信する
2. ページ編集：ノーコードもしくはローコードでページのデザインを変更する
3. ABテスト
4. リダイレクトテスト

{% embed url="<https://app.arcade.software/share/GxDJz7MdycO4FECXF8XY>" %}

このセクションでは上記4タイプの体験のそれぞれの設定方法やレポートの見方について説明する記事を確認いただけます。


# 体験作成前後の管理画面

### 初めての体験を作成する

Experienceで初めて体験を作成する場合、Experience→体験管理　をクリックしたら、以下の画面が表示されます。

こちらの画面で作成したい施策のタイプを選択して作成していただきます。

1. Web接客
2. ページ編集
3. ABテスト
4. リダイレクトテスト

上記施策タイプ以外に、画面下部にあるテンプレートからテーマ別にも施策を選択していただけます。ただし、利用できる施策タイプは上記4つですべてです。

<figure><img src="/files/gEcoKGc66K8hacdcEf9L" alt=""><figcaption></figcaption></figure>

### 2個目以降から作成する

同じくExperience→体験管理のタブですが、すでに作成した体験が存在する場合、画面が以下のようになります。

この場合、画面右上にある緑のボタンから体験を作成してください。

作成ボタンをクリックしたあとに施策タイプを選択画面（上記キャプチャ）になります。

<figure><img src="/files/3sLPTkYrQs94Wtkajxcb" alt=""><figcaption></figcaption></figure>

## 体験作成後の管理画面

体験の内容（ポップアップやページコンテンツの変更）を設定し保存した後、以下の重要な設定項目を含む画面に進みます。

この画面では以下の項目の設定ができます。

* 詳細設定
* 体験作成
* ページ条件
* 対象ユーザー
* 体験のゴール
* スケジュール
* 公開

<figure><img src="/files/rpSSp8grxdK1tOmZAMuy" alt=""><figcaption></figcaption></figure>

### 詳細設定

Ptengine Experienceでは、多くの体験が配信されている場合に備え、管理を容易にするために体験ごとに概要説明を追加する機能とラベル機能を提供しています。

詳細設定の項目では、各体験の概要説明とラベルの追加ができます。

#### 概要説明

詳細設定の右にある編集ボタンをクリックすると、概要を追加する欄が表示されます。

<figure><img src="/files/z1V67eNlUQvRauIa1aS6" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/PXrQox2iJZ0smqaSvOMX" alt=""><figcaption></figcaption></figure>

基本的には、この体験を作成した背景、目的、変更点、ABテストの場合は仮説などを記入することをおすすめします。

チームや自社の都合に応じて、自由に記述してください。

#### ラベル

チームをまたいで多くの体験が配信されている場合、各自の目的に応じて自分が配信した体験を簡単に見つけられるように、ラベル機能の活用をおすすめします。

基本的に、ラベルはチーム別、ページ別、目的別などに付けることが一般的です。

**ラベルの作成**

緑の枠にラベル名を入力し、キャプチャ内の赤枠で囲まれたエリアをクリックすると、ラベルが作成されます。

<figure><img src="/files/tJ0WdIL1HwXz05abnVp6" alt=""><figcaption></figcaption></figure>

**ラベルを付ける**

一つの体験には、複数のラベルを付けることができます。

<figure><img src="/files/j35XcASYcPTg0tRBVACR" alt=""><figcaption></figcaption></figure>

**ラベルの訂正と削除**

訂正または削除したいラベルにマウスオーバーすると、右側に鉛筆とゴミ箱のアイコンが表示されます。

それぞれをクリックすることで、ラベル名の編集やラベルの削除が可能です。

<figure><img src="/files/W4CeGIk5JwBGDyNJDTOk" alt=""><figcaption></figcaption></figure>

### 体験作成

体験作成の項目では、体験の種類により、キャプチャ内の①〜⑥の項目の数は少し異なります。

ABテストの体験を例に説明します。

<figure><img src="/files/6IiZuujegAMDmIhWQR1F" alt=""><figcaption></figcaption></figure>

#### ①設定

ABテストの配信割合、最短配信時間、アンチフリッカー機能のON/OFFを設定できます。

各項目の設定内容と設定方法は[こちら](https://www.notion.so/experience-campaign-abtest-overview-9ae8007761f146bfb791a5251afbad9c?pvs=21)の記事をご参照ください。

<figure><img src="/files/VKWgPcplwfrVBjqKecax" alt=""><figcaption></figcaption></figure>

#### ②A/Bテストのスイッチ

A/Bテストの体験が作成されると、このスイッチは自動的にONになります。

OFFにすると、コントロールパターン以外のテストパターンが削除されます。

また、すべてのパターンがテストパターンの場合、一番上のパターン以外は削除されます。

A/Bテストを停止したい場合は、各体験を停止してください。

{% hint style="warning" %}
場合によってはデータも削除されるため、なるべくこのスイッチをOFFにしないことをおすすめします。
{% endhint %}

#### ③プレビュー

目の形をしたアイコンをクリックすると、プレビューリンクとQRコードが発行されます。

本番配信の前に挙動を確認するために利用することをおすすめします。

<figure><img src="/files/M579Oh6JOyfINYDGYvuE" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/FxvhHT6no8svRApBdkEI" alt=""><figcaption></figcaption></figure>

その他のプレビュー機能の詳細については、[こちら](/experience/campaign/preview)の記事をご参照ください。

#### ④パターンの設定

パターンごとに縦の3点アイコンがあります。

不要になったパターンを削除したり、パターン名を変更したりする必要がある場合は、ここをクリックしてください。

<figure><img src="/files/d2UfV9b4xclzhRCnUSZN" alt=""><figcaption></figcaption></figure>

#### ⑤体験の編集

すでに編集済みの内容を変更する必要がある場合は、鉛筆のアイコンをクリックしてください。

ここをクリックすると、エディターが開きます。

<figure><img src="/files/WMHAHdnWIidmPLKB80Cx" alt=""><figcaption></figcaption></figure>

#### ⑥パターンの追加

一つの体験では最大5パターンを追加可能です。コントロールグループを含めて、合計6パターンまで同時に配信できます。

パターン追加についてその他の詳細は[こちら](/experience/campaign/create-new-2/creative-production#patnno)の記事をご参照ください。

<figure><img src="/files/08AhH2vqzQVitKDjgqOS" alt="" width="305"><figcaption></figcaption></figure>

### ページ条件

ページ条件では、この体験で編集した内容をどのページに表示させるかの範囲を指定できます。

### 対象ユーザー

対象ユーザーでは、この体験を誰に表示させるかを設定できます。

### 体験のゴール

A/Bテストやリダイレクトテストの場合、体験のゴールが必須です。

### スケジュール

スケジュールでは、体験配信の開始時刻と停止時刻、また配信頻度などを指定できます。

<mark style="background-color:green;">上記4項目の具体的な設定方法については、まとめて</mark>[<mark style="background-color:green;">こちら</mark>](/experience/campaign/delivery-conditions)<mark style="background-color:green;">の記事をご参照ください。</mark>

### 公開

体験の編集が未完成もしくはなにか不備（設定漏れがある）場合、以下のようにアラートが表示されます。

アラートが表示された場合、表示内容に従って、設定を完了させてください。

<figure><img src="/files/73H65bfDHKxGvfqLCn8P" alt=""><figcaption></figcaption></figure>

特に不備がない場合、チェック項目にチェックし、公開してください。

<figure><img src="/files/hHuSUkSFZTzMNM9H5395" alt=""><figcaption></figcaption></figure>

## 体験作成の基本フロー

どのタイプの体験を作成しても大体以下の手順に沿って作成する必要があります。

1. 配信内容の作成、編集、調整
2. 配信ページ範囲を指定
3. 配信対象ユーザーを指定
4. 体験のゴールを指定
5. プレビュー画面で最終確認して公開

次の記事からは、各体験タイプについて、これらの基本ステップに沿ってより詳細な作成方法を説明します。

***


# ページ編集体験の作成ガイド

ページ編集は、Webサイトのコンテンツをビジュアル的に編集できるPtengine Experience独自の施策タイプです。

💡 主な特徴

* ノーコード/ローコードでの編集が可能
* オリジナルソースを保持したまま変更を適用
* テキスト、画像、ボタン、レイアウトなどの編集に対応
* 動画追加やHTML編集も実行可能

### 作成方法

ページ編集の開始方法は以下の2通りです：

1. ヒートマップ画面からの作成
2. Experienceの体験作成画面からの作成

🔍 以降のセクションでは、これらの作成手順について詳しく解説します。

{% hint style="danger" %}
📌 重要な注意点

ページ編集による変更は、オリジナルのソースコードとは別セットとして管理されるため、ページ読み込み時にフリッカー（ちらつき）が発生する可能性があります。

フリッカー現象を回避したい場合は、ページの\<head>内に直接設置することをお勧め致します。

詳しくは、「[ページ編集を使う前に必ずお読みください](/faq/experience-edit/anti-flicker)」をご覧ください。
{% endhint %}

{% hint style="info" %}
**動画↓↓↓**
{% endhint %}

{% embed url="<https://app.arcade.software/share/MWAQYCa3KO7jZcvh3fvL>" %}

***

{% hint style="info" %}
**テキスト↓↓↓**
{% endhint %}

#### **ヒートマップ画面から始める場合**

Webビュー画面右上の「施策する」ボタンからページ編集を選択すると、体験作成画面に入りページ編集を実行できます。

![](/files/M1pYJBhMCLaMIpUcZQeG)

例えば、下記のようなシーンでご活用ください。

（例）

・ヒートマップで「○○に関するユーザーの関心が高そう」と判断したら、ページ編集で○○のコンテンツを追加してみる

・スクロール到達率がページの△△％の場所で高くなっており、離脱の原因となっている可能性があるとしたら、△△周辺のコンテンツを削除しコンテンツを入れ替えてみる

#### **体験作成(Experience)から始める場合**

Experienceにて「初めての体験作成」から、ページ編集を選択します。

<figure><img src="/files/pQu1FRKJwHfP9CsOPAyX" alt=""><figcaption></figcaption></figure>

もしくは、「＋体験を新規作成」から、ページ編集を選択します。

<figure><img src="/files/v67qwFcXjvmQncGtoPp1" alt=""><figcaption><p>すでに体験が作成されている場合</p></figcaption></figure>

<figure><img src="/files/Lf5On11fAGfDwdnNWnz7" alt=""><figcaption></figcaption></figure>

オリジナルの体験を作成したい場合は「＋オリジナル作成」を、アイデアやテンプレートを参考にしたい場合はそれぞれのコンテンツをクリックし、体験名と編集ページを指定して編集をします。

<figure><img src="/files/gHpTKcYeWKXlAnKj5Nhs" alt=""><figcaption></figcaption></figure>


# エディターの使い方

{% hint style="info" %}
**動画↓↓↓**

順番と内容はテキストとやや異なりますが、初心者の方におすすめな内容をご案内しています。
{% endhint %}

{% embed url="<https://app.arcade.software/share/g8vw7sIdcN3qeqFC9bcv>" %}

***

{% hint style="info" %}
**テキスト↓↓↓**
{% endhint %}

## **テキストの変更**

### **テキスト編集**

変更したいテキスト要素をクリックすると、ツールバーに「テキスト変更」が表示されます。テキストはこの画面上で直接変更可能です。

![](/files/gebTM5jwjj8Z1Fyez79A)

コピーやCTAボタンのテキストなどを変更し、コンバージョン率を検証できます。

![](/files/cKcxaqM7YYaqzUCiGE0Z)

### **スタイル編集**

ツールバーの「スタイル編集」のアイコンをクリックすると、以下を変更できます。

* 要素のサイズ
* フォント、フォントサイズ、太さ、フォントの色
* 行間、配置、
* 下線や斜体、取り消し線などの装飾
* 選択した要素の背景や枠線の色、太さ、余白

![](/files/G4KgVJBgpf1JC5ygRa3O)

## **画像の変更**

### 画像の差し替え

#### **基本手順 🖼️**

1. **要素の選択**
   * 変更したい画像要素をクリック
2. **ツールバーの表示**

   * 「画像変更」オプションがツールバーに表示

   <figure><img src="/files/Jo0ZWC5IsVswiTN5EqvI" alt=""><figcaption></figcaption></figure>
3. **画像のアップロード**

   * お手持ちの画像ファイルをアップロード
   * もしくは画像のリンクを入力する

   ![](/files/vTlznW6fTxMkfbltnCzl)
4. **画像の入れ替え**
   * アップロードした画像が元の画像と自動的に入れ替わる

{% hint style="danger" %}
重要な注意点

* この機能は、imgタグで作成された画像にのみ適用可能です。
* 背景画像やCSS内で指定された画像には使用できません。
  {% endhint %}

**アップロード可能な画像形式と制限 📁**

* **対応フォーマット**:　JPEG, PNG, GIF, AVIF, WebP, ICO, SVG
* **最大ファイルサイズ**:　6メガバイト

アイキャッチ画像やバナー画像などを変更して、効果を検証できます。

テキストの変更と同様にスタイル編集からサイズや余白を調整可能です。

### **画像の設定（代替テキスト）**

画像要素を選択すると、ツールバーに「画像の設定」アイコンが表示されます。選択中の画像に代替テキスト(Alt)を設定することができます。

代替テキストについての詳細は、[Webアクセシビリティへの対応](/faq/experience-edit/web-accessibility)をご参照ください。

![](/files/zqJqa7c9VnqSRE7Z1WoO)

## 動画の挿入と編集

ページに新しい動画を挿入したり、既存の動画を編集したりすることができます。 YouTube動画および直リンク動画（MP4/WebMなど）の2種類に対応しています。

***

### 動画の挿入 🎬

#### 基本手順

1. **要素の選択**
   * 動画を挿入したい場所の近くにあるコンテンツ要素をクリックします。
2. **「コンテンツ追加」をクリック**
   * 挿入位置（前、後、内部など）を選択します。
3. **「動画」を選択**

   * コンテンツ追加のタイプ一覧から「動画」を選択します。

   <figure><img src="/files/iRTB8s8cXo9zZQblcJHe" alt=""><figcaption></figcaption></figure>
4. **動画の URL を入力**

   * YouTubeの動画リンクまたは動画ファイルの直リンク URL を入力します。

   <figure><img src="/files/gjDpw6UelYHYvkBaHTod" alt=""><figcaption></figcaption></figure>
5. **再生オプションとサイズを設定し、「確定」をクリック**

#### 対応している動画形式

| タイプ     | 例                                       |
| ------- | --------------------------------------- |
| YouTube | `https://www.youtube.com/watch?v=xxxxx` |
| 直リンク動画  | MP4、WebM など                             |

{% hint style="warning" %}
動画の URL は `http://` または `https://` で始まる必要があります。有効なリンクアドレスを入力してください。
{% endhint %}

#### 再生オプション

動画挿入ダイアログの「再生設定」で以下のオプションを設定できます。

* **自動再生**：ページ読み込み時に自動的に再生を開始します。
* **ミュート**：動画の音声をオフにします。自動再生を有効にすると自動的に有効になります。
* **ループ再生**：動画の再生終了後に自動的に繰り返し再生します。
* **コントロールを非表示**：再生プログレスバーなどの操作画面を非表示にします。

#### サイズ設定

「表示設定」で動画の幅と高さを設定できます。

* **ピクセル指定**：数字のみを入力します（例：`380`）。
* **パーセント指定**：数字に `%` を付けて入力します（例：`100%`）。
* 🔒 アイコンをクリックすると縦横比をロックできます。

<figure><img src="/files/5YFFJheYJzICl1GLQPgE" alt=""><figcaption></figcaption></figure>

***

### 動画の編集

挿入済みの動画要素はツールバーから再編集することができます。

#### 操作手順

1. **動画要素をクリック**

   * ツールバーに「動画を編集」ボタンが表示されます。

   <figure><img src="/files/2FqHBIJGbEi6MZwrnAhy" alt=""><figcaption></figcaption></figure>
2. **「動画を編集」をクリック**
   * 動画編集ダイアログが開き、現在の設定が自動的に入力されます。
3. **内容を変更して「確定」をクリック**
   * 動画リンク、再生オプション、サイズをそれぞれ変更できます。

## コンテンツの追加と位置の調整

### コンテンツの追加

コンテンツ追加では、テキストや画像、動画などのコンテンツを新たに追加できます。

（例）

* 「カートに追加する」というボタンの近くに「7日間の返品保証つき」というようなテキストを追加
* 新着記事へのリンク用に画像バナーを追加
* ページの中間に重要なCTAを追加

#### **コンテンツの追加手順**

1. コンテンツを追加したい場所周辺のコンテンツをクリックします。

   緑色で表示されているレイヤー選択機能を活用して、適切なレイヤーを選択します。親レイヤーを選択することを推奨しています。

{% hint style="warning" %}
Note：コンテンツを追加する場所やスタイル調整には、いくつかポイントがございます。

詳しく&#x306F;**「**[**コンテンツ追加のコツ**](/experience/campaign/create-new/notes-add-content)**」**&#x3082;ご覧ください。
{% endhint %}

1. **「コンテンツ追加」をクリックして、コンテンツを追加したい場所を選択します。**

<figure><img src="/files/eGbp9UZMfI6Y6efUrPnu" alt=""><figcaption></figcaption></figure>

次の5つのタイプのコンテンツを追加することが可能です。

* 見出しテキスト
* 本文テキスト
* 画像
* ボタン
* HTML

{% hint style="warning" %}
コンテンツを追加する場所やスタイル調整には、いくつかポイントがございます。

**詳しくは「**[**適切なレイヤーの選択**](/experience/campaign/create-new/notes-layer)**」もご覧ください。**
{% endhint %}

![](/files/uTRpXn9VMdnXZPDOF09c)

1. **追加したコンテンツは同様にツールバーから編集することができます。**

### **コンテンツの複製と貼り付け**

既存のコンテンツと同じコンテンツを追加したい場合、ツールバーの「コピーを作成する」アイコンからコピーすることができます。

![](/files/XNZwQeU1mgbvWzC9tgSR)

そして、「貼り付け」アイコンをクリックしてコピーしたコンテンツをページ内の別の場所に貼り付けることができます。

![](/files/mr9qSzzsOOXkmkLOARVe)

貼り付けたコンテンツは同様にツールバーから編集することが可能です。

### コンテンツの削除

削除したいコンテンツを選択肢、ツールバーの一番右にあるゴミ箱のアイコンをクリックして削除できます。

<figure><img src="/files/eIomVJ9H9AWAaeV0SvJ9" alt="" width="563"><figcaption></figcaption></figure>

### コンテンツの位置調整

1. 場所を移動させたいコンテンツを選択し、ツールバーにある以下のアイコンをクリックします。

   <figure><img src="/files/zgv2Udy9rCgCxAMwAeNC" alt=""><figcaption></figcaption></figure>
2. 以下のポップアップが表示されます。

   <figure><img src="/files/5rdoraBIt2IQQDZ3TONG" alt="" width="415"><figcaption></figcaption></figure>
3. 移動先をクリックして、移動ボタンをクリックします。

   <figure><img src="/files/LzVwHBo8b0jVyQzJQmeo" alt="" width="334"><figcaption></figcaption></figure>
4. 具体的な位置を選択します。

<figure><img src="/files/MpQlrjeu1W23YGPLCDIR" alt="" width="379"><figcaption></figcaption></figure>

💡サイトの構造によっては、うまく移動できる場合があります。詳細は[こちら](/faq/experience-edit/rearrange-bug)でご参照ください。

## **リンクの編集**

リンクアイコンからは「クリックアクションの有効化」と「イベント計測の有効化」について編集できます。

![](/files/HgJ1nMlNsvmV5htHzU1u)

何もリンクが貼られていない要素は、デフォルトで「クリックアクションの有効化」がOFFになっています。ONにスライドし、クリックアクションの設定を行なってください。

既にリンクが設定してある場合は、ツールボックスの内容を編集してください。

イベント計測についても同様です。

### **クリックアクションの有効化**

要素にリンクを設定する機能です。アクションタイプからクリック後のアクションを指定することができます。

![](/files/jFdNTc8AjcxxXtjunePl)

#### **アクションタイプ**

リンクへ遷移：指定のURLに遷移します

**LINE公式アカウントを開く：**[LINE公式アカウントのURL](https://developers.line.biz/ja/docs/messaging-api/sharing-bot/#url-scheme-to-open-the-screen-for-adding-friend)を入力することで、当該ページに遷移します

電話をかける：指定した電話番号に発信します（例：03-1234-5678 ※15文字制限）

テキストやURLのコピー：指定した文字列をクリップボードにコピーします（例：クーポンコードなど）

ファイルのダウンロード：URLで指定したファイルをダウンロードします

**コードを実行：**&#x6307;定したJavaScriptコードを実行します。JavaScriptコード設定の際に入力枠が小さい場合は、右下の矢印から入力枠を拡大できます。

クリックアクションの利用シーンについては、関連記事も参考にしてください。

### **イベント計測の有効化**

「イベント計測を有効化」をONにすると、対象要素のクリックをイベントとして計測できます。既存イベントへ合算する、もしくは新規でイベントを作成することが可能です。

![](/files/AMkas1a9kTmZUR5Hn7tR)

#### **イベント設定の手順**

1. **「イベント計測を有効化」をONにする**

   ![](/files/O604ksWf5P7KEACJfBQW)
2. **イベントを選択もしくは新規作成する**

   \
   既にPtengine Insightでイベントを計測している場合、プルダウンから選択できます（※計測数が 1 以上ないとExperienceに連携されませんのでご注意ください）。

   新規のイベントを設定したい場合は新規作成をクリックしてください。

   ここで設定したイベントはデバイスに関わらず計測されます。

   ![](/files/ZBLnnSLTlGJTPZJCvFBW)
3. **作成したイベントを体験の評価軸として設定したい場合は、別途Experienceのゴールとして登録が可能です。**

{% hint style="warning" %}
ExperienceのゴールはUU（ユニークユーザー）単位で集計されるのに対し、Insightのイベントはセッション単位であるため、数値が必ずしも一致するわけではありません。
{% endhint %}

![](/files/6VweZpdquIbQX4PXgNhv)

#### **新規作成する場合**

* イベント名について

新規設定する場合は任意のイベント名を設定します。既に Insight で設定したイベント名と同じものを設定した場合は、そのイベントに今回の計測対象が合算されます。

* Insightへの連携について

ここで作成したイベントは、Insightのイベント分析画面でも計測値を確認できます。なお、設定したイベント一覧はイベント設定画面の「コーディングイベント」で確認できます。

![](/files/xzamhiiiSkSy8iqYfAFS)

#### 変更・削除について

体験を配信中でも「イベント計測を有効化」をOFFにすれば、当該体験のイベント計測は停止します。もしイベント名ごとを削除したい場合は、チャットサポートから【体験で作成したイベントの削除依頼】として対象のイベント名をご連絡ください。

#### **既存のイベントを使用する場合**

既存のイベントの中に、計測を合算したいアクションがある場合はプルダウンから当該イベント名を選択ください。Insightで作成したイベントは計測数が 1 以上あれば、Experienceに連携されます。既存のイベント名が表示されない場合は、Insightのイベント分析画面で計測数をご確認ください。

{% hint style="success" %}
このアクション計測で作成したイベントは、体験のゴールや配信ユーザーグループとして利用できるだけでなく、Ptengine Insightにも連携され、数値確認やセグメント条件としての利用も可能です。
{% endhint %}

## プレビュー

クリエイティブ作成中にプレビュー機能で正しく表示されているか確認しましょう。

エディター内でプレビューすることができます。

<figure><img src="/files/FAiXHAyOsehp3yeUDa9Q" alt=""><figcaption></figcaption></figure>

## その他の機能

### **HTMLの編集**

より自由度高く編集を行いたい場合は、ツールバーの「HTMLを編集」アイコンまたは、メニューバーの「コードモード」からソースコードを編集することができます。詳しくは「[コードモードで体験を設定](/experience/campaign/code-mode)」をご覧ください。

▼ツールバー

![](/files/pTZrAyOPeYlbI0RdOpTR)

![](/files/x1PluiR37qOv06Kci12w)

▼メニューバー

![](/files/hsJPPLlsCrZZ4dnklRlw)

### **ページ編集履歴**

全てのページ編集履歴はメニューバーにある「編集履歴」から確認できます。クリックすると、コンテンツの変更や追加した内容が左側に一覧に表示され、かつ右側に変更前後の違いを比較できます。

それぞれの変更履歴をクリックすれば変更箇所に誘導されます（削除したコンテンツを除く）。

<figure><img src="/files/vZsHLC5nbdKQsyaObQRX" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/nNIFLiG7fWbfHv6rrKfS" alt=""><figcaption></figcaption></figure>

また、削除アイコンをクリックすると、その変更自体を取り消し、オリジナルに戻すことができます。

<figure><img src="/files/wmJXSLbEatIliwzSPqNb" alt=""><figcaption></figcaption></figure>

### **画面操作モード**

ページ上でクリックをしないと表示されないアコーディオンメニューの中のコンテンツ等（インタラクティブコンテンツ）を編集したい場合は、「画面操作モード」を利用します。

画面操作モードに切り替えた後、クリックしてコンテンツを表示したら、「編集モードに戻る」ことができますので、そのままページ編集が可能になります。

![](/files/lmdqsomv6jpD8vTLAdXf)

![](/files/RjCOLT7G4je2kCSi5Rka)


# HTMLの編集

ページ編集機能では、HTMLコードの直接編集が可能です。

編集したコードはPtengineを通じて本番環境に反映することができます。

HTMLの知識をお持ちの方にとっては非常に便利な機能ですが、適切な知識や経験がない場合、予期せぬ不具合を引き起こす可能性がありますのでご注意ください。

![](/files/7JFihxmX16v5gI4NoMtb)

### **インタラクティブコンテンツの不具合**

#### **インタラクティブコンテンツとは**

ユーザーのクリックやマウスオーバーなどの操作に反応して動作するコンテンツや機能を指します。

具体的には以下のような要素が該当します：

* ナビゲーションメニュー
* アコーディオンパネル
* カート追加ボタン
* 購入ボタン
* 入力フォーム
* 各種リンク

### **状況説明**

HTMLの編集には以下のようなリスクが伴いますので、十分ご注意ください。

1. **JavaScriptイベントへの影響**

   特定の要素を編集することにより、以下のような動的機能が正常に動作しなくなる可能性があります。

   * スライダーの動作
   * ポップアップの表示/非表示
   * その他インタラクティブな機能
2. **モジュール構造への影響**

   HTMLの構造を変更することで、以下のような問題が発生する可能性があります。

   * タブの切り替え機能の停止
   * ナビゲーションメニューの崩れ
   * レイアウトの乱れ
   * モジュール間の連携機能の異常

これらの問題を防ぐため、以下の点に注意して編集を行ってください：

* 編集前に対象要素の機能や役割を十分確認する
* 必要最小限の変更にとどめる
* 編集後は必ず動作確認を行う(プレビュー機能)

### HTMLを安全に編集するためのベストプラクティス

**1. インタラクティブ要素の編集は最小限に**

* JavaScriptと連動する要素を変更する場合は特に注意が必要です
* 変更後はJavaScriptイベントの再適用が必要となります
* 同様の機能を実現したい場合は、「コードモード」を使用して新しい記述を追加することを推奨します

**2. 編集は個別要素レベルで実施**

* 複数のコンテンツを変更する必要がある場合でも、上位の階層（親要素）は極力編集しないようにします
* 変更が必要な要素それぞれを個別に編集することで、以下のメリットがあります：
  * ページ全体の構造を維持できる
  * 予期せぬ影響を最小限に抑えられる
  * 問題が発生した場合の特定と修正が容易になる

**3. HTML編集における推奨アプローチ**

例えば、下記の画像内赤枠の3つのコンテンツを変更する場合を例に挙げてご説明します。

✅ **推奨：個別要素の編集**

要素1、2、3をそれぞれ個別に変更する（3回の操作）

* 安全性が高い
* 影響範囲が限定的
* 問題が発生した場合の特定が容易
* 変更の取り消しが簡単

![](/files/VxoOciVSCrr5kM12gIzT)

**❌ 非推奨：一括編集**

上位レイヤーを選択して一括で編集する（1回の操作）

![](/files/LYWbH3YiYE95Z7iYj1Dx)

{% hint style="danger" %}
**一括編集のリスク**

* **構造の崩れ**
  * ページレイアウトが損なわれやすい
  * 予期せぬ副作用が発生しやすい
* **インタラクティブ要素への影響**
  * JavaScriptイベントの誤作動
  * 動的機能の停止
    {% endhint %}

**注意点**

* 一括編集は作業時間を短縮できますが、以下のデメリットがあります：
  * ページ構造を破壊するリスクが高い
  * 修正に多大な時間がかかる可能性
  * テストと確認作業が複雑化

## **コピーと貼り付け**

ページ内の要素を自由にコピーして、別の場所に貼り付けることができます。

この機能は非常に便利ですが、正しく使用しないと予期せぬ問題が発生する可能性があります。以下に主な注意点をご説明します。

### **IDの重複について**

要素をコピーする際、その要素にIDが設定されている場合、同じページ上に同一のIDを持つ要素が複数存在することになります。W3C標準では、IDは1ページ内で一意である必要があるため、重複すると不具合の原因となる可能性があります。

#### **想定される問題**

* IDに紐づいたイベント処理が正しく動作しない
* コピーした要素に対して、期待した動作やインタラクションが実行されない

#### **推奨する使用方法**

1. 要素を貼り付けた後、HTMLを確認する
2. ID属性が含まれているかチェックする
3. IDが存在する場合は、重複しない新しい値に変更する

```jsx
function findDuplicateIds() {
    // ページ上のすべての要素を取得します
    const allElements = document.querySelectorAll('*');
    const idMap = {};
    // すべての要素を反復処理し、重複するIDがあるかどうかを確認します
    allElements.forEach((element) => {
        const id = element.id;
        if (id) {
            if (idMap[id]) {
                // 重複するIDが存在する場合、そのIDを出力します
                console.log(`ページに重複するIDの要素が存在します：${id}`);
            } else {
                // 重複するIDが存在しない場合、IDをIDマップに追加します
                idMap[id] = true;
            }
        }
    });
}
// 重複するIDを検索するメソッドを呼び出します
findDuplicateIds();
```

上記のコードを使用してページ内でIDが重複している要素がないかを、以下の手順で確認することができます。

1. 対象のウェブサイトで、ディベロッパーツール（開発者ツール）を開く
   * Windows/Linuxの場合：F12キー または Ctrl + Shift + I
   * Macの場合：Command + Option + I
2. 「Console」（コンソール）タブを選択
3. 上記のコードをコンソールにコピー＆ペースト
4. Enterキーを押して実行

{% hint style="warning" %}
**IDの重複がある場合**： 「ページに重複するIDの要素が存在します：\[重複しているID]」というメッセージが表示されます。

**IDの重複がない場合**： 特にメッセージは表示されません。
{% endhint %}

### **スタイルの引き継ぎ**

要素をコピー＆ペーストする際、見た目や配置が元の要素と異なることがあります。

たとえば、商品情報をページ内で移動させると：

* 商品画像のサイズが変わる
* 価格表示の位置がずれる
* 説明文の書式が崩れる

このような問題を防ぐには、スタイル設定を確実に引き継ぐ必要があります。

#### **スタイルを保つためのポイント**

要素を移動する際のスタイル維持には、次の2つの方法が有効です：

1. CSSの見直し
   * スタイルの適用状況を確認
   * セレクタの調整
   * 要素間の関係を確認
2. スタイルの直接設定
   * HTML内で直接スタイルを指定
   * シンプルな構造を心がける
   * 移動の影響を最小限に

これらの方法で、一貫したデザインを保つことができます。

### **インタラクティブ機能の同期不良**

要素をコピーして新しい場所に配置すると、元の要素が持っていた操作機能が正しく動作しないことがあります。たとえば、「カートに追加」ボタンをコピーした場合、新しい場所に配置したボタンをクリックしても反応がない状態になってしまいます。

#### **状況説明**

元の要素に設定されていた操作機能（例：カートへの追加、商品の注文、お気に入り登録など）は、コピーして新しい場所に配置しただけでは、そのまま機能しないのが一般的です。これは、要素の見た目だけがコピーされ、その裏で動いている処理の設定が引き継がれないためです。

#### **おすすめの対応方法**

**インタラクティブ要素の扱いを避ける**

操作機能を持つ要素（ボタンやフォームなど）は、できるだけコピーを避けることをお勧めします。

**やむを得ずコピーが必要な場合**

JavaScriptを使用して新しく貼り付けた要素にインタラクションイベントが実行できるよう記述を追加してください。

記述を追加する場合、次のようなコードモードを使用して実行させることができます。

![](/files/R7OonPMp0RB21DhmZ6M1)

JavaScriptのインタラクションイベントを要素に追加する方法を、以下のように簡単に説明します。

1. ブラウザの開発者ツールを開く
2. 要素パネルで対象の要素を選択
3. イベントリスナーセクションを確認：
   * 必要なイベントタイプを探す
   * 関連するJavaScriptロジックを確認

この手順で、要素に適切なインタラクションイベントを追加できます。

![](/files/wMXIEYR28A8ieRI2oRsv)

***

## **スタイルの変更**

要素のスタイルはページ編集機能内で調整できます。例えば、色、レイアウト、フォントなどが変更できます。

### **スタイルが適用されないの場合**

#### 主な理由

* CSSの優先度（詳細度）の問題
* 既存のスタイルとの競合
* セレクタの指定ミス

#### 推奨される解決方法

スタイルの調整が反映されない場合、CSSコードモードでスタイルを直接変更し、!importantを使用して優先度を上げることができます。

例：

```css
.target-element {
    color: blue !important;
    font-size: 16px !important;
}
```

## **最後に**

Ptengineのインライン編集機能を効果的かつ安全に活用するには、各機能の仕組みと潜在的な問題点を理解することが重要です。これにより、一般的な問題を回避し、ウェブサイトの正常な動作と優れたユーザー体験を維持できます。

重要な注意点：

1. 操作前には必ずバックアップを取る
2. 変更後は十分なテストを行う

これらの原則を守ることで、Ptengineを最大限に活用できます。


# 適切なレイヤーの選択

この記事では、ページ編集におけるレイヤー選択について詳しくご紹介します。

## レイヤーの選択 <a href="#id-0-toc-title" id="id-0-toc-title"></a>

レイヤー選択機能は適切なサイトの構成要素を選択するのに役立ちます。

例えば、バナーとその中のテキストも含めて全体を選択したい場合、レイヤー選択バーの中間にある div を選択します。

選択されている要素には薄緑の背景がかかるので、適切な要素を選択できているかどうかご確認ください。

レイヤー選択バーの要素名をクリックするだけで要素を選択できます。

![](/files/HVTmJ6Rgeqq202o8BUHc)

上のコンテンツのサイト構成は下の図のようになっています。

![](/files/bXXWEiBdgEccnR2ZqeZI)

## **レイヤー選択機能はどのような時に使うのでしょうか？**

1. **バナーリンクの編集**
   * 画像をクリックしても「画像変更」しか表示されない場合、リンク先の編集はできません。
   * この場合、レイヤー選択バーから「aタグ」を選択すると、リンク先の編集が可能になります。

![](/files/JhhvhGub7h9lYGEzqZGY)

2. **選択しづらい要素の操作**

* 赤枠全体など、直接クリックでは選択できない要素がある場合、レイヤー選択機能を利用しましょう。
* レイヤー選択バーを使えば、重なって見えないコンテナなども確実に選択できます。

![](/files/lMt183Qi58npipgc0ylV)

3. **新しいコンテンツの追加**

* HTMLの知識がなくても、ページに新しい要素を追加したい場合に役立ちます。
* 例えば、中央のdivが親レイヤーの場合、これを選択して、その直後に新しいコンテンツを追加できます。

![](/files/yBzNXB718ijqJl95nOQv)

<br>


# コンテンツ追加のコツ

この記事では、ページ編集におけるコンテンツ追加のポイントをご紹介します。

## 追加する場所 <a href="#id-0-toc-title" id="id-0-toc-title"></a>

コンテンツ追加では、「選択した要素の前後」もしくは「選択した領域内の先頭/末尾」からコンテンツを追加する場所を指定できます。

![](/files/EsLzStiPWwZ8956LOXFg)

### **「選択した要素の前」と「選択した要素の後」**

一般的に、下図の例のように選択した要素の上部（または下部）にコンテンツが追加されます。

![](/files/E7rChI9pWg05gr63AM7B)

### **「選択した領域内の先頭」と「選択した領域内の末尾」**

一般的に、下図のように選択した要素の左側（または右側）にコンテンツが追加されます。

![](/files/tBYXl7Mz1pdACX0249tn)

{% hint style="success" %}
**Note：**&#x5F53;該ページの構成により、意図した場所に配置できない場合もありますので、数パターンお試しいただくことをおすすめします。\
コンテンツを追加したい場所にうまく追加できない場合は、チャットサポートまでお問い合わせください。
{% endhint %}

### 間隔調整 <a href="#id-1-toc-title" id="id-1-toc-title"></a>

スタイル編集アイコンをクリックし、ツールボックスを下にスクロールすると内側余白と外側余白を編集できます。

![](/files/LakfuLmzgsvffa21SAE4)

下の図のように、内側余白ではコンテンツの枠線内の余白を、外側余白ではコンテンツの枠線外の余白を調整できます。

![](/files/VHcOy8eW95kIyaK60ga7)

### 配置調整 <a href="#id-2-toc-title" id="id-2-toc-title"></a>

#### **テキスト**

テキスト要素を追加した場合、スタイル編集 > 配置 から、左寄せ、中央寄せ、右寄せ、均等割り付けから配置を指定することができます。

![](/files/cgXJ5lDjdWh0GtyXIvqc)

#### **画像・ボタン**

画像またはボタンを追加した場合、レイヤー選択機能で1つ前（これに限らならい場合もあります）のレイヤーを選択してからスタイル編集アイコンをクリックし配置を選択します。<br>

<figure><img src="/files/ErdXybuTtdT34DrAxE3W" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="/files/u9bO0EA6ki9ESsBQgTAF" alt="" width="563"><figcaption></figcaption></figure>

<br>


# Web接客体験の作成ガイド

## 操作動画

{% embed url="<https://app.arcade.software/share/gknHFJbxbs7HjalLOTgZ>" %}


# ポップアップ/固定バーの作成方法

### 体験作成 <a href="#id-0-toc-title" id="id-0-toc-title"></a>

1. 「体験を新規作成」から体験を作成し、「Web接客」を選択します。
2. 体験名を設定し、体験作成へ進めてください。
3. テンプレートまたは「空のポップアップを作成」を選択し、ポップアップ・固定バー作成画面に入ります。

### ポップアップの編集 <a href="#id-1-toc-title" id="id-1-toc-title"></a>

ポップアップ編集には下記の機能があります。

* 位置とサイズ\
  ポップアップの配置、サイズを選択できます。「オーバーレイ」にチェックを入れると、ポップアップ表示時に背景がグレイアウトされます。\
  ![](/files/Ihz37Dysvf3Iw6321qwc)
* 背景とスタイル\
  背景をカラーコードまたは画像から選択、ポップアップの角の鋭角や、影、クローズボタンの設置を調整できます。\
  ![](/files/VUO3rVJmBXTFV3ICdFGP)
* クリックアクション\
  ポップアップ内に配置した要素に対して、[クリックアクション](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/ja/experience/campaign/inline_gudie/editor.md#kurikkuakushonno)と[イベント計測](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/ja/experience/campaign/inline_gudie/editor.md#ibentono)を有効化できます。\
  ![](/files/PGqyL7swidsoZ9dmDSGv)

  **Note：**「リンクへ遷移」「LINE公式アカウントを開く」を利用する場合は、下記の設定もご活用ください。\
  新しいタブで開く：指定したURLを新しいタブで開きます。\
  クリック後、ポップアップを閉じる：この要素をクリックしたらポップアップが自動的に閉じます。\
  ![](/files/UYEwJNwKnhCMSRIxM2Ob)
* マイテンプレートに保存\
  編集したクリエイティブをテンプレートとしてライブラリーに保存でき、他の体験でも簡単に利用できます。\
  ![](/files/RC2CJis5p5nrGVUG0DeQ)
* 要素の追加・編集\
  ポップアップには、左側のツールバーからテキスト、画像、動画、ボタン、図形、フォームといった要素を追加できます。追加した要素は簡単に編集することも可能です。

### テキスト <a href="#id-2-toc-title" id="id-2-toc-title"></a>

新たにテキスト要素を追加したい場合は、左側のツールバーからテキストアイコンをクリックします。\
テキスト要素を選択すると、ツールバーが現れ、編集、クリックアクション、コピー、レイヤー、削除が可能です。フォントや行間、文字揃え、斜体、下線、取消線、ハイライト、箇条書、番号無しリストなどを編集したい場合は、「編集」をクリックしてください。

![](/files/wrEUAZVrVNYZxlhItSpS)

### 画像 <a href="#id-3-toc-title" id="id-3-toc-title"></a>

新しく画像を追加したい場合は、画像アイコンをクリックしてください。お手持ちの画像を追加することができます。ローカルフォルダからのアップロードまたはURLに対応しています。

＜アップロード可能な画像形式＞\
形式：jpeg,png,gif,avif,webp,ico,svg\
容量：最大6メガバイト

![](/files/xV4wJyywzQrHJftbC2nw)画像要素をクリックすると、画像変更、スタイル編集（不透明度、枠線の太さ、角丸、影）、クリックアクション、コピー、レイヤー、トリミング、その他の設定が行えます。その他の設定からは、[代替テキスト(Alt)](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/ja/faq/page_edit/web-accessibility.md#tekisutoaltno)の設定が可能です。

![](/files/dP1qqnq4NBY3FAKMn8wj)

### 動画 <a href="#id-4-toc-title" id="id-4-toc-title"></a>

ビデオアイコンからは動画を追加することができます。YouTube URLまたはiframeをご利用ください。

![](/files/lLNRIwPxmWrP54n1NmX3)

(1) YouTube URL：ブラウザに表示されるリンク、または共有URLにて動画を追加できます。（例：<https://www.youtube.com/watch?v=-_p7pkxjkiM>）\
(2) iframe：様々な動画プラットフォームで発行されている埋め込み用のiframeコードにて動画を追加できます（例: \&ltiframe\&gt…\&lt/iframe\&gt）。

#### サムネイルについて

ビデオURLを選択した場合は、サムネイル用画像を追加できます。\
YouTubeリンクの場合は、YouTubeで設定したサムネイルが使用されます。

#### 再生設定について

動画を自動的に再生するか、ループ再生にするか、コントロールバーを表示するかについて設定することができます。

### ボタン <a href="#id-5-toc-title" id="id-5-toc-title"></a>

新しくボタンを追加したい場合はボタンアイコンをクリックしてください。編集をクリックすると、フォント（サイズ、太さ、色）、行間、文字揃え、斜体、下線、取消線、ハイライト、箇条書きなどを設定できます。

![](/files/LUfYwV1ZKxK9I1ZaTOkC)

### 図形 <a href="#id-6-toc-title" id="id-6-toc-title"></a>

図の追加からは、ポップアップや固定バーの装飾として様々なアイコンを追加することができます。

![](/files/alKs52H9DocKFzmQo9YG)

### フォーム <a href="#id-7-toc-title" id="id-7-toc-title"></a>

フォームはポップアップまたは固定バーに1つまで追加できます。

![](/files/pVhDNgLutOPGrSNWACZC)

お好きなテンプレートから追加したフォームは、要素ごとにドラック＆ドロップで移動したり、サイズの調整、項目、入力欄などのフォント、色などを自由に編集できます。

![](/files/lpARQsHf3lH2P1QroOuz)

### ユーザー属性として収集 <a href="#id-8-toc-title" id="id-8-toc-title"></a>

フォームの項目に入力された内容は、ユーザー属性データとして収集することが可能です。ユーザー属性として収集すると、体験配信の対象ユーザーに指定したり、[ユーザーグループ](/experience/user-group)からレポートを確認することができます。

![](/files/OVFrU1eaIvjnyLwknWKm)

ユーザー属性としてデータを収集する場合は、項目の編集から、「ユーザー属性として収集」にチェックを入れれてください。

詳しくは[フォーム機能](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/ja/experience/campaign/popup/form-setting-text.md#fmunitsuite)をご参考ください。

### 表示・停止条件の設定 <a href="#id-9-toc-title" id="id-9-toc-title"></a>

クリエイティブを保存したら、表示・停止させるタイミングを設定してみましょう。（アドバンス編集モードの場合は、クリエイティブ編集画面よりポップアップの表示・停止条件の設定を行ってください。）

詳細は[こちらの記事](/experience/campaign/create-new-1/display-timing)をご参照ください。

### Webアクセシビリティへの対応 <a href="#id-10-toc-title" id="id-10-toc-title"></a>

Ptengine Experienceで設置するすべてのポップアップ・固定バーは、キーボード入力に対応しています。詳しくは[Webアクセシビリティへの対応](https://gitlab.com/PtmindDev/ptx/ptengine-helps/-/blob/main/DOCS/ja/faq/page_edit/web-accessibility.md)をご参照ください。


# クリエイティブの編集

編集

## 操作動画

{% hint style="success" %}
**Ptengine ExperienceのWeb接客体験とはこの動画では以下の内容をご案内します。**

* テキストの追加と編集
* 画像のアップロードと編集
* 動画の追加
* ボタンの追加と編集
* プレビュー画面の確認
* スマホ画面の編集
* 保存

下記動画のチャプター表紙のスキップボタンで次のチャプターへスキップできます。
{% endhint %}

{% embed url="<https://app.arcade.software/share/rluR0l0GdSElzLf2uRXJ>" %}

## **その他注意事項**

### 画像

#### アップロードについて

＜アップロード可能な画像形式＞

形式：jpeg,png,gif,avif,webp,ico,svg

容量：最大6メガバイト

画像要素をクリックすると、画像変更、スタイル編集（不透明度、枠線の太さ、角丸、影）、クリックアクション、コピー、レイヤー、トリミング、その他の設定が行えます。その他の設定からは、[代替テキスト(Alt)](/faq/experience-edit/web-accessibility#tekisutoaltno)の設定が可能です。

### テキスト

#### フォントについて

同じフォントに指定した場合でもOSにより形が異なることがあります。

各OSが同じフォントに対する定義が異なるからです。

Ptengine上では解決できることは難しいので、ご了承ください。

### ビデオ

#### **サムネイルについて**

ビデオURLを選択した場合は、サムネイル用画像を追加できます。

YouTubeリンクの場合は、YouTubeで設定したサムネイルが使用されます。

## **Webアクセシビリティへの対応**

Ptengine Experienceで設置するすべてのポップアップ・固定バーは、キーボード入力に対応しています。詳しくは[Webアクセシビリティへの対応](/faq/experience-edit/web-accessibility)アクセシビリティをご参照ください。


# 表示・停止タイミングの設定

設定

{% hint style="success" %}
**表示・停止タイミング**

ユーザーが Web ページに到着した直後にポップアップを表示したり、過度な頻度、または閉じにくいポップアップを出したりすることは避けましょう。

ポップアップは製品とブランドをユーザーによく理解してもらった後に出すことを心がけるべきです。\
また、閉じるボタンを設置することも忘れないようにしましょう。

Ptengineでは、表示・停止のタイミングを下記のように調整できます。
{% endhint %}

## 特定のタイミングで表示

![](/files/du70C2NRgCSJtzNhWJ5b)

1. **ブラウザから離脱した時（PCのみ対応）：**\
   該当ページに 5 秒以上滞在した上で、下記の条件を満たす必要があります。\
   **PCの場合：**&#x30AB;ーソルがページ内容外に置かれた時（ブラウザのブックマークバーやタブバーなどへ移動した時）。\
   モバイル端末では対応していません。詳しくは[こちら](https://www.ptengine.jp/blog/product/exit-popup-announcement/)をご覧ください。
2. **アクティビティ：**\
   ユーザーの最後のアクティビティ（クリック、スクロール）からX秒経過した時
3. **ページ訪問：**\
   対象ページをアクセスして X 秒経過した時
4. **ページのXX％まで閲覧した時：**\
   ユーザーが該当ページの指定の位置までスクロールした時
5. **指定のJavascriptコード：**\
   指定のJavascriptが発火した時（詳細は[こちらの記事](/faq/experience-edit/javascript-popup)をご確認ください）

## 特定のタイミングで停止

![](/files/ClpEr8TsdsspJ2z9cVng)

1. **ユーザーにX回表示した後：**\
   表示回数がX回に達したユーザーには体験の配信を停止ます。
2. **ユーザーがX回以上クローズ：**\
   ポップアップの「閉じる」ボタンをクリックした数がX回に達したユーザーには体験の配信を停止ます。
3. **1回でもボタンや画像をクリックした場合：**\
   体験のエディターから追加したボタンまたは画像を1回クリックしたユーザーには体験の配信を停止ます。
4. **フォームに回答した場合：**\
   体験のエディターから追加したフォームに回答したユーザーには体験の配信を停止ます。

## **頻度**

![](/files/hvLlW0sQ6qpmNsIuIdkC)

* **1セッションでX回まで**1回のセッション内に表示する回数を制限します。
* **1日ごとに最大X回表示**1日に表示する回数を制限します。
* **X日ごとに最大X回まで閉じられたら非表示**直近X日以内にユーザーがポップアップを閉じた（「閉じる」ボタンまたはマスクのクリック）回数がX回に達すると、そのユーザーへの表示を停止します。古い閉じる操作がX日間の集計期間の対象外になると、表示は自動的に再開されます。

また、頻度設定はアドバンスモードをご利用の場合、ご利用いただけません。ご注意ください。




---

[Next Page](/llms-full.txt/1)