ptengineの使い方

Ptengine の使い方

株式会社 Ptmind

Ver. 1.1

2

Ptengine の使い方をご説明します。ヘッダー部の 5 つの項目の役割を把握していただくことで、 Ptengine の機能の全体を把握していだくことができます。

3

Section 1

数値レポート

4

Google Analyticsでも分析できる数値の世界

ヒートマップとの連携で、Ptengine ならではの分析（後述）

5

Section 2

イベント

6

HTML ソースを変更することなく、ボタン等のクリック回数が計測できる→ コーディング担当の方の負担軽減

右にあるような「お問い合わせボタン」が複数のページに設置してあります。

このボタンのクリック回数をまとめて計測したいのですが、設定方法を教えてください。

7

Q

8

A

HTML ソースを変更することなく、

Ptengine の管理画面だけで、計測の設定が完結します。

「イベント計測」の機能を使用します。

9

ボタンが設置してあるページ

10

設定モードが ON になっている

計測したいボタンをクリック

11

デフォルトのままで、「設定」をクリック

設定ウィンドウが開く

計測したいボタンが選択された状態になっている

12

各ページに設置されたボタンのクリック数をすべて計測したいので、「全プロファイル」を選択

13

プロファイル内の全ページの同じ記述のボタンのクリック数を計測

14

イベント比較

グラフに表示できるイベントは 5件までです。設定済みのイベントの中から、グラフに表示するイベントを選択することができます。「イベント数」か「訪問数」か切り替えることができます。

計測結果は「イベント」の「イベント分析」で

15

イベント一覧

設定済みのイベントが一覧で表示されて、「イベント数」「訪問数」をクリックすると、ソートをかけられます。

個別のイベント名をプルダウンメニューから選択すると、ディメンション（指標を分割して見る切り口）を 2 階層まで指定できます。たとえば、「流入元」「検索エンジン」と指定すると、流入元の検索エンジン別の「イベント数」「訪問数」を確認することができます。−

計測結果は「イベント」の「イベント分析」で

16

イベント – 設定　補足資料

イベント設定－スマートフォン向け画面編

17

スマートフォン向け画面の場合（ PC とスマホで同一 URL の場合を含む）、「イベント設定」の URL 一覧から設定画面を呼び出すと、

開いた時の状態では、 PC 向け画面が表示されます。

PC 向け画面

※ お客様側のウェブサーバーなどの設定によっては、 PC とスマホで同一 URL でない場合は、ページ一覧から画面を開くと、すぐに、スマート　フォン向け画面が表示される場合もあります。その場合は、 PC 向け画面と同様に、すぐにイベント設定をすることができますので、次ページ　以降の操作は不要となります。

18

スマートフォン向け画面のボタン等に

イベントを設定するためには、

スマートフォン向け画面を呼び出す必要があります。

※ Google Chrome ブラウザでの操作方法をご説明します。

19

イベント設定画面が表示されたら、 Windows の場合は F12 キー、Mac の場合は、 Command ＋ Option ＋ I キーをクリックしてください。 Chrome の「デベロッパー画面」が表示されます。

Chrome のデベロッパー画面で、図の (1) をクリックして青色の状態にした後、(2) で「 iPhone 6 」を選択します。ブラウザで再読み込みを行うと、 PC の画面からスマートフォンの画面に切り替わって、スマートフォンの画面を見ることができます。

20

ユーザーエージェント（ UA の偽装）

(1)(2)

F12 キー（ Mac の場合は Command ＋

Option ＋ I キー）

スマートフォン向け画面

PC の画面でイベントを設定する場合と同様に、イベントの設定を行ってください。

21

スマートフォン向け画面が表示されたら

22

「イベントの要素設定」ウィンドウはスマホのウィンドウ内側に表示されるので、ウインドウをマウスで移動させて、操作を行ってください。

23

イベント – 設定　補足資料

イベント設定－計測対象のボタンの HTML ソースの文字列

が少し異なるボタンが複数ある場合

24

計測対象のボタンの HTML ソースの文字列が少し異なるボタンが複数ある場合

たとえば、下記のような「買い物かごに追加」ボタンのクリック数をイベント計測で計測したいとします。

　 <a href=”class=”add_basket” data-ItemID=”STB64889″> 買物カゴに追加 </a>　 <a href=”class=”add_basket” data-ItemID=”DTB99057″> 買物カゴに追加 </a>　 <a href=”class=”add_basket” data-ItemID=”WTP99756″> 買物カゴに追加 </a>

上記 3 点の記述は、「 data-ItemID= 」の値が異なるため、上記のうちの一つ、　 <a href=”class=”add_basket” data-ItemID=”STB64889” > 買物カゴに追加 </a>をイベント取得のソースとして設定すると、 1 つの商品分のボタンの計測しかできません。そこで、イベント設定の管理画面で、「 data-ItemID=”XXXXXXXX” 」という部分を除外すると、「 data-ItemID= 」の値に関わらず、「買物カゴに追加」ボタンのクリック数を計測することが可能になります。

(1)(2)

(3)

一部の記述だけ異なるボタンなどを計測したい場合は、下記の設定画面で設定を行います。(1) 「要素範囲」で「カスタム」を選択し、 (2) 「要素」で計測対象としない要素のチェックを外します。 (3) 「 DOM構成を無視」にチェックを入れると、ページ内で条件を満たす全ての要素のイベント発生を計測します。同じ内容の要素がページ内で異なる DOM(Document Object Model)構成にある場合に有効です。

25

Section 3

ヒートマップ

27

スクロール到達率＝どこまで見た？

アテンションヒートマップ

＝どこをじっくり見た？

クリックヒートマップ＝どこをクリックした？

ページ分析

クリック数を数値で確認

28

スクロール到達率＝どこまで見た？

スクロール到達率を見ると、「ユーザーの何％が、そのエリアで閲覧したのか」が分かると聞いています。

どのような仕組みで計測していますか。

29

Q

30

ブラウザウェブページ

ブラウザ

ブラウザの下の端が到達したラインを計測しています。A

ブラウザ

100％

50％

ブラウザ

ユーザーの100％が到達

ユーザーの50％が到達

ユーザーの訪問数に対して計測

下記のような動きをしたユーザーがいた場合、スクロール到達率は、どうなりますか？

Q

ブラウザ

ウェブページ

最も下の到達ラインを、そのユーザーが到達したラインとして計測します。

ブラウザ

ウェブページ

A

最も下の到達ライン

34


35

クリックヒートマップ

クリックデータ

36

まず、対象のウェブページ内で最もクリック数が多かった箇所を赤色に設定します。

クリックされていない箇所は透明です。

赤色の箇所のクリック回数を基準にして、その他のクリック箇所の色を、

クリック回数の多い順に

「黄」→「緑」 → 「青」の順に色付けしていきます。

37

アテンションヒートマップ＝どこをじっくり見た？

「アテンションヒートマップ」は、「ユーザーがじっくり見た箇所が赤くなる」と聞いています。

どのような方法で計測しているのですか？

38

Q

39

A

「アテンションヒートマップ」は、３つのルールを組み合わせて、データを作っています。

その３つのルールをご説明します。

40

ルール 1

ブラウザの真ん中が最も赤くなる

41

ブラウザ

ウェブページ


ここが最もよく見られていると仮定して、ヒートマップを描きます

42

ルール 2

ユーザーがスクロールを止めた位置が重なると、赤くなる

43


Aと Bが重なったエリアエリアA

エリアB

エリアA エリア

B A と B が重なったエリア

集計結果

44

ルール 3

ユーザーがブラウザを長い時間、止めた位置が赤くなる

45


エリアA

エリアB

10秒

20秒集計結果

エリアA

エリアB

46




まとめ

47

アテンションヒートマップでウェブページの各エリアの滞在時間を計測する方法

ブラウザの位置が動いた時刻、クリックが発生した時刻から、各エリアの滞在時間を計測しています。

位置A

位置B

17 時 00 分00秒

17 時 00 分20秒

位置C

17 時 00 分50秒

400Pixcel 移動位置 A に 20秒滞在

ウェブページブラウザ

540Pixcel 移動位置 B に 30秒滞在

JavaScript Ptengine

server

サーバーに、位置情報を送るタイミングはいつか？

1. 最初にページを開いた時

2. スクロールした時

3. クリック（タップ）した時

4. スクロールもタップもないまま　 30秒経過して、まだ該当ウェブ　ページ上にいる時

ページを開いた時

400pixcel

540pixcel

5. スクロールもタップもないまま　 30秒経過して、該当ウェブ　ページから離脱していたら？　→最後に計測した位置に 15秒　　滞在したとみなし計測する

JavaScript

Ptengineserver

JavaScript

Ptengineserver

JavaScript

Ptengineserver

クリック

JavaScript

Ptengineserver

JavaScript

Ptengineserver

時間の経過

サーバーに送る

48ページ分析


クリック数を数値で確認

「ヒートマップ」の「ページ分析」とは、どのような機能ですか？

49

Q

「ページ分析」は、「サイト内リンク」「外部リンク」「ボタン」「フォーム」等のエリアを自動的に判別し、各エリアにおけるクリック数を表示する機能です。

50

A

クリックヒートマップでは、具体的なクリック数は分かりませんので、クリック数を知りたい時は、「ページ分析」をご利用ください。

51

クリックヒートマップ

ページ分析

「ページ分析」の「インタラクティブ要素の表示」「非インタラクティブ要素の表示」とは何ですか？

52

「インタラクティブ要素」「非インタラクティブ要素」とは、下記のような HTML 要素を指します。

「インタラクティブ要素」：a, input, select, embed, object, textarea, button, 設定された onclick イベント

「非インタラクティブ要素」：上記以外の要素（例： img, p, ol, ul, li ）

53

A

54

デフォルトでは「非インタラクティブ要素の表示」にはチェックが入っていません。クリック数を確認する際には、チェックを入れていただくよう、お願いします。

その理由は？

イメージファイルでリンクを張ると、（例） <a href="aaa.html"><img src="samplre.jpg"></a>座標上は下記のように額縁の枠のようなスペースができます。「インタラクティブ要素」だけは、クリック数を把握する際に取りこぼしが出ます。下記の例では、 10 ＋ 5＝ 15 がイメージファイルでリンクを張った箇所のクリック数になります。

55

「インタラクティブ要素」「非インタラクティブ要素」両方にチェックを入れていただく理由：

a 要素　＝　インタラクティブ要素

img 要素　＝非インタラクティブ要素 10 クリック

5 クリック

「ページ分析」のクリックデータを一覧表にしてまとめてダウンロードしたいのですが。

56

Q

「ページ分析」ヘッダー部「リスト表示」の内容を「 CSV 」アイコンをクリックするとダウンロードできます。

57

A

クリック数データのリスト

このような形で、 CSV形式のデータがダウンロードできます。

58

59

Section 3

ヒートマップ×

フィルター

60

フィルター

ヒートマップ & 数値データにかけられるフィルターの種類①

61

訪問関連・訪問の種類：新規訪問 or 再訪問でフィルタリング・入口ページ：入口ページの URL を選択してフィルタリング

流入元・流入元の種類：検索、参照サイト、ソーシャルメディア、ノーリファラー、キャンペーンから選択してフィルタリング・キャンペーン URL：キャンペーンの URL を指定してフィルタリング・参照元のホスト名：選択したホスト名でフィルタリング（例：www.ptmind.co.jp ）・参照元 URL：選択した参照元の URL でフィルタリング（例： www.ptmind.co.jp/info/re20121224.html)・検索エンジン名：選択した検索エンジン名でフィルタリング・検索エンジン（キーワード）：選択した検索エンジン＋検索時のキーワードでフィルタリング・キーワード：検索エンジンにかかわらず、検索時のキーワードでフィルタリング・ソーシャル：選択したソーシャルメディア名でフィルタリング・ソーシャル URL：選択したソーシャルメディアの URL でフィルタリング

＝サイト改善のきっかけを　つかむ際によく使われる　フィルター

ヒートマップ & 数値データにかけられるフィルターの種類②

62

端末・端末の種類： PC 、モバイル、タブレット、その他から選択してフィルタリング・メーカー：端末のメーカー別でフィルタリング・モデル：端末の製品名でフィルタリング・ OS：端末の OS でフィルタリング・ OS のバージョン：端末の OS のバージョンでフィルタリング・ブラウザ：利用されたブラウザでフィルタリング・ブラウザのバージョン：ブラウザのバージョンでフィルタリング・解像度：端末の解像度でフィルタリング

地域・国 /地区：ユーザーの国 /地区別にフィルタリング・都道府県：ユーザーの都道府県別にフィルタリング


ヒートマップ & 数値データにかけられるフィルターの種類③

63

CV・ CV 名：登録した CV 名別にフィルタリング・ CV タグ：登録した CV タグ別にフィルタリング

キャンペーン・キャンペーン名：登録したキャンペーン別にフィルタリング・流入元：登録したキャンペーンの流入元別にフィルタリング・メディア：登録したキャンペーンのメディア別にフィルタリング・キーワード：登録したキャンペーンのキーワード別にフィルタリング・コンテンツ：登録したキャンペーンのコンテンツ別にフィルタリング

前出

(3) CV の活用方法

(4) キャンペーンの活用方法


64

事例：生徒１００人以上の天然酵母パン教室（鹿児島市）

65

新規訪問

再訪問

ヒートマップに「フィルター」を掛ける

「セグメント」別に行動の違いを探る

例

69

比較するページを選択

70

別々のフィルターを掛けて比較してみましょう。

71別々のフィルターを掛けることができます。

72左：「新規訪問」　　右：「再訪問」

73新規訪問再訪問

74新規訪問再訪問

ユーザーの行動はどう違う？

75

新規訪問再訪問

再訪問のユーザーは「最新情報は

ブログで！」に注目

76

Section 4

リアルタイム

77

Google Analyticsでも分析できる数値の世界

78

Section 5

設定

79

「コンバージョン」

「キャンペーン」

を使いこなせれば OK

80

Section 5

設定

コンバージョン×

フィルター

EC サイトを運営しています。

ヒートマップを見る時に、購入したユーザーだけのフィルターを掛けられると聞きました。

購入した人が、どこをじっくり読んでいたかを知りたいです。

設定方法を教えてください。81

Q

82

A

CV 設定をするだけで、フィルターをかけられるようになります。

83

https://store.sample.co.jp

LP購入者情報入力

入力確認

カートに

入れる

サンクスページ

/form/thanks.html

84

CV の名前を付ける

サンクスページの URL を入力

その他はデフォルトのままで OK

https://shop.sample.co.jp/form/thanks.html

(1)

(2)

(3)(4)

85

フィルター

88

CV 設定で設定したCV 名が表示される

デフォルトのままで OK

89

購入完了ユーザー

CV 「購入完了」でフィルターを掛ける

ユーザー全体

購入していないユーザー

90

購入完了ユーザー

購入してないユーザー

クレンジング購入したユーザーは、「無添加」に注目

（※画像はイメージです）

コスメ　成功事例

91

コスメ　成功事例

（※画像はイメージです）

CVRファーストビュー

92

Section 5

設定

キャンペーン×

フィルター

93

もちろん CVR は大事

広告 A

広告 C

広告 B

CVR 0.1%

CVR 0.2%

CVR 0.8%

LPCVR が高かった理由を知れば、知見がたまる！

94

事例：某社キャンペーン LP

95

準備

広告流入元別のヒートマップを見るには

96

広告流入元別のヒートマップを見てみましょう

http://www.example.com/ の後に続くパラメーター?

utm_source=yahoo&utm_medium=cpc&utm_campaign=sum01?

utm_source=yahoo&utm_medium=cpc&utm_campaign=sum02?

utm_source=google&utm_medium=cpc&utm_campaign=sum01?

utm_source=google&utm_medium=cpc&utm_campaign=sum02

複数の URL のヒートマップが見られるのは、有料版のみの機能となります。

97

広告 A 広告 B 広告 C 広告 D 広告 E 広告 F 広告 G 広告 H

同じ LP を、広告流入元別にファーストビューが終わったエリアの

スクロール到達率を比較してみましょう

56％ 66％ 56％ 47％ 51％ 59％ 47％ 43％

98

広告 A 広告 B 広告 C 広告 D 広告 E 広告 F 広告 G 広告 H

同じ LP でも流入元広告が違うとアテンションがこんなに違う

99

じっくり見てくれるユーザーを連れて来た広告は？

スクロール到達率がファーストビューが終わってもなかなか下がらない。

アテンションヒートマップで、青いエリア（読み飛ばしエリア）が少ない。

広告 B 広告 E 広告 F

広告 H

ptengineの使い方

Internet