インサイトで一般的な追跡イベントを作成
概要
この記事では、追跡イベントを作成する方法について説明し、ウェブサイトやアプリケーションに対するユーザーのエンゲージメントの追跡を可能にします。
追跡イベントの詳細については、以下の記事を参照してください：インサイト追跡イベントの概要。
使用方法
追跡イベントの設定ページ
追跡イベントを作成するには、insights.walkme.comからアクセス可能なインサイトの［追跡イベントの設定］ページに移動する必要があります。
正しいシステムが開いていることを確認します。
- + NEW EVENT（新しいイベント）
- カスタム設定ボタン
- イベントのキャプチャボタン
- 追跡イベントの概要表
- タイプ：各イベントには、タイプによってそれぞれ異なるアイコンが表示されます
- 名前：これは、イベントの作成者が追跡イベントに付けた名前です
- 定義：これは、追跡イベントが発生したとみなされる前に満たす必要のある基準です
- 作成日：これは、追跡イベントが作成された日付です
- 変更日：これは、追跡イベントが最後に変更された日付です
追跡イベントの作成
方法1 - イベントをキャプチャーする
前提条件
- WalkMeエディタ拡張機能とエディタアプリがインストールされていること
- WalkMeエディタにインサイトのユーザーアカウントでログインしていること
- 設定のパブリッシュが実行されていること
手順
- インサイトの［追跡イベントの設定］ページに移動します
- ［イベントのキャプチャ］をクリックします
- 注：「イベントのキャプチャ」ボタンがグレーで表示されている場合は、DXAがアカウントでまだ有効になっていないことを意味します。 管理者に連絡し、設定をオンにして、この機能を使用開始できるようにしてください。 詳細については、この記事を参照してください：インサイトのデジタルエクスペリエンス分析（DXA）レベル
- エレメントをキャプチャしたいページのURLを入力し、［LET'S GO（レッツゴー）］をクリックします
- ターゲットエレメントをキャプチャします
- キャプチャされたエレメントについて提供されたデータを確認し、必要に応じて設定を変更します
- 注：定義と一致するデータがすでに存在するかどうかを示すメッセージが表示されます。
- 注：定義と一致するデータがすでに存在するかどうかを示すメッセージが表示されます。
- ［完了］をクリックします
インサイトに自動的にリダイレクトされ、新しい追跡イベントが表示されます。
方法2 - カスタム設定
［カスタム設定］をクリックすることで、追跡イベントを手動で作成できます。
- 追跡イベントの名前を入力します
- ヒント：イベントが表すユーザーのアクションを示す命名規則を利用します
- ドロップダウンメニューから定義を選択します
- イベントを定義するのに役立つ任意のプロパティを選択します
- ［イベントプロパティ］セクションの下にある［+ プロパティを追加］をクリックします
- オプション：クリックまたは入力タイプのイベントでのみ使用できます
- ［保存］をクリックします
新しい追跡イベントが、ファネルとフィルタで使用できるようになります。
追跡イベントの編集
追跡イベントにカーソルを合わせると、以下のオプションが表示されます。
- ボタンをコピー：新たに類似した追跡イベントを複製して作成します
- ゴミ箱アイコン：追跡イベントを削除します
- 鉛筆アイコン：既存の追跡イベントを編集します
- 変更によって影響を受けるアイテムがある場合は、変更を適用するかどうかを確認する画面が表示されます。
- 変更によって影響を受けるアイテムがある場合は、変更を適用するかどうかを確認する画面が表示されます。
- 追跡イベントボタンを再キャプチャボタン：ターゲットエレメントを再キャプチャして、追跡イベントを編集します
利用可能なイベントタイプ
| イベントタイプ | 簡単な説明 | 詳細な定義 |
| クリック/タップ | クリックまたはタップされたエレメントフィルター |
以下を使用してエレメントを識別できます。 Text is：クリックされたエレメントをそのコンテンツで識別します。 ID：クリックされたエレメントを一意のエレメント識別子で識別します。 Class：クリックされたエレメントを1つ以上のクラスで識別します。 より正確な結果を得るには、スペースを使用して親エレメントのクラスも識別します。 例えば「.shippingForm .saveBtn 」です。 CSSセレクターの詳細については以下をご覧ください。 |
| ページビュー | ユーザーがアクセスする特定のURLでフィルタリングします。 | |
| 入力 | ユーザーが操作する入力フィールドでフィルタリングします。 |
以下を使用して入力フィールドを識別できます。 Name is：入力フィールド名で入力エレメントを識別します。 Label is：入力フィールド名でエレメントを識別します。 Class：1つ以上のクラスで入力エレメントを識別します。 ID：入力エレメントを一意のエレメント識別子で識別します。 CSSセレクターの詳細については以下をご覧ください。 |
イベントプロパティの作成
特定の種類の追跡イベント (クリック/タップや入力タイプのイベントなど) については、イベントプロパティを追加できます。 イベントプロパティは、イベントに問題が発生した際にユーザーがどの URL 上にいるかを記録します (ユーザーが使用している URL で既にイベントをフィルタリングしているページビューのイベントタイプは除きます) 。
例えば、「ユーザーが購入を完了」という新しい追跡イベントを作成し、HTML ID属性が「place_order」という、複数のページに存在する「注文を確定」ボタンをユーザーがクリックした時に発生するものとしてイベントを定義したとします。
イベントが発生したページに特定のURLが含まれているかどうかをチェックするイベントプロパティ、例えば「http://shopme.walkme.com/checkout」を追加できるようになります。
これにより、特定のページで発生した指定エレメントのクリックだけを追跡イベントでカウントします。 そうでない場合は、すべてのページでのクリックが追跡イベントでカウントされます。
CSSセレクター
CSSセレクターを使用すると、エレメントの正確な定義を追跡できます。 CSSセレクターを使用すると、ID、クラス、タイプ、属性、属性値などの特性に基づいてHTML構造内のエレメントを識別できます。
CSSの使用、構築、作成方法
- 要素を右クリックして［Inspect Element（要素の検査）］を選択し、HTMLで要素を見つけます。 そのエレメントが画面と開発者パネルで強調表示されます。 CSSセレクターを作成するために、エレメント固有の特性（場所、クラス、ID、追加属性など）を特定します。
- 特定したら、CSSセレクターを作成します。 以下は現在サポートされているCSSのサブセットです。
| サポートされているCSS属性 | 構文 | |
| ID | ハッシュセレクターは、ID 属性に基づいてエレメントを明確に定義するために使用されます。 | #IdName |
| クラス | クラス属性に基づいてエレメントを明確に定義するために、ドットが使用されます。 | .className |
|
追加属性 [attribute='value'] |
tagName, src, href, type, name, Role, Text |
Equals: [attribute=a] Contains: [attribute*=b] Begins with: [attribute^=a] cで終わるエレメント : [attribute$=c] |
|
属性セレクターはそのHTML属性のいずれかに基づいてエレメントを明確に定義するために使用されます。 デフォルトではクラスおよびID属性が収集されています。 HTML属性を追加収集するには、環境設定→収集有効化セクションでこれを有効にする必要があります。 |
||
| タグ名 | 名前 | |
| スペース - エレメントの階層 | スペースはエレメント間の階層を定義するために使用されます。 例：.className .className | |
| 上記の組み合わせ | #idName. className. className |
例： #idName. className. className |
CSSセレクターのテスト
-
- 追跡イベントを定義すると、Insightsは過去30日間から現在までの結果のプレビューをすぐに生成します。更新は1分ごとに行われ、 その定義に対してイベントがすでにキャプチャーされているかどうかを確認できます。
- 正しいイベントが追跡イベントとして識別されたことを確認するには、その定義の過去数か月間の使用状況を確認する必要があります。 結果がゼロになった場合、定義内の何かに欠陥がある可能性があります。
- また、ウェブサイトでのイベントをシミュレートし、追跡されていることをリアルタイムで確認することもできます。
- セッションプレイバック が有効になっている場合、イベントが表示されるセッションを簡単に見ることができます。