HTMLのイベント属性をFlipdeskに連携するためのタグ、【イベントタグ】について説明します。
設定には、HTML・jsの知識を要します。
1. イベントタグとは
サイト内のイベント属性にFlipdeskのイベントタグを設置することで、サイト内のボタンをクリックした・クリックした日付など、収集したデータを集計することが可能になるタグです。
収集したデータは集計するだけでなく、シナリオの配信ターゲット条件として利用することも可能です。
2. イベントタグの仕様
イベントタグは設置いただいた要素に対し、ユーザーが行動をとることでデータを収集します。
正常に発火させるには、基本タグの設置が必須となりますので、詳しくは「3. 設置箇所」をご参照ください。
イベントタグを設置いただくと、ターゲティングの【イベントタグ】条件が使えるようになります。
「管理画面 ＞ タグ管理 ＞ イベントタグ」にイベントタグをご用意しておりますので、コピーしてご利用ください。
▼ イベントタグサンプル
<!-- ▼body内に埋める -->
<script id="fd_event">
window.fdData = window.fdData || [];
function fdtag(){window.fdData.push(arguments);}
</script>
<!-- ▲body内に埋める -->
<!-- ▼計測したいタグ内に埋める -->
fdtag('event', '任意のイベント名を入力', {
'任意の属性を入力': '指定した属性の変数or値を入力',
'任意の属性を入力': '指定した属性の変数or値を入力',
'任意の属性を入力': '指定した属性の変数or値を入力',
// 任意の属性、複数指定することが出来ます。
});
<!-- ▲計測したいタグ内に埋める -->
▼ 各項目の指定方法
| 項目名 | 説明 |
| イベント名 |
登録したいイベント名をタグ内の ここで登録したイベント名は「レポート管理 ＞ イベント計測」で表示されます。 イベント名が重複した場合、同じイベント名にデータが蓄積されていきますのでご注意ください。 指定例
|
| 属性 |
登録したい属性を 指定例
|
| 属性の変数 or 値 | 取得したいデータの変数または値を'指定した属性の変数or値を入力'に指定します。
変数を指定する際は、サイトで使用している変数を入力しください。 指定例
|
使用できない文字がありますのでご注意ください
以下文字は各項目で使用できない文字になります。
使用した場合はデータが正常に計測できなくなりますのでご注意ください。
- '（シングルクォーテーション）
- "（ダブルクォーテーション）
属性のタイプについて
属性の値には属性のタイプが付与されます。
※集計した値を参照して、自動付与
▼ サポートされている属性のタイプ
| 属性のタイプ | 説明 |
| 数値 |
引き渡されたデータを数値として取得します。 例）年齢 など |
| 日時 |
引き渡されたデータを日時として取得します。 例）2024-01-01~2024-12-31 など |
| リスト型 |
引き渡されたデータをリストとして取得し、ターゲティング条件として活用することが可能です。 例）ブロンズ会員・シルバー会員・ゴールド会員 など |
| 文字列 |
引き渡されたデータを文字列として取得します。 |
| 不明 |
引き渡されたデータから属性のタイプが推定できなかった場合に付与されます。 この場合、取得したデータはターゲティング条件として活用することができません。 取得した数値の範囲を指定し、ターゲティング条件として活用することが可能です。 |
3. 設置箇所
イベントに指定したいタグ内に設置してください。
イベントタグは単体では動作しないため、必ず基本タグと一緒に設置してください。
基本タグが設置されていないページにイベントタグを設置しても、データは計測できませんのでご注意ください。
4. 使用例
「資料ダウンロード」ボタンをイベントとして計測する場合のタグ設置例をご紹介します。
設置方法
① <body>タグ内に以下の<script>タグを挿入する
<!-- ▼body内に埋める -->
<script id="fd_event">
window.fdData = window.fdData || [];
function fdtag(){window.fdData.push(arguments);}
</script>
<!-- ▲body内に埋める -->
例のように日付を出力したい場合は、以下の<script>タグを挿入してください。
<!-- ▼body内に埋める -->
<script id="fd_event">
window.fdData = window.fdData || [];
function fdtag(){window.fdData.push(arguments);}
<!-- ▼ここから日付を出力する為の記述 -->
function currentDate() {
var date = new Date();
var year = date.getFullYear();
var month = ('00' + (date.getMonth()+1)).slice(-2));
var dat = ('00' + date.getDate()).slice(-2);
return year + '-' + month + '-' day;
}
<!-- ▲ここまでが日付を出力する為の記述 -->
</script>
<!-- ▲body内に埋める -->
② 計測したいタグにイベントを設定する
例のように、サイト上の「資料ダウンロード」ボタンにイベントを設定する場合は、既存の
タグ内にイベントの設定してください。
▼ 元のタグ
<button>資料DLボタン</button>
▼ イベントを設定した場合
<button onclick="fdtag('event', '資料請求ダウンロード', {
'会員ランク': '{sample_member.classlank}',
'年齢': '{sample_member.age}',
'日付': currentDate(),
});">
資料請求ダウンロード
</button>
実際に使用する変数は、ご利用中のサイトで使用されている変数をお使いください。
5. 動作確認の手順
設定したイベントタグが正常に動作しているか、設置されいているかを確認する場合は、
「管理画面 ＞ レポート管理 ＞ イベント計測」から確認することが可能です。
設定したイベントタグがクリックされると、管理画面上にデータが蓄積されていきます。
イベント計測画面の詳しい見方はこちらをご参照ください。