Kairos3への連携
概要
Kairos3のCookieを持っているリードのアクティビティに、Webビーコンとしてデモの閲覧開始・終了・進捗（特定ステップ到達／特定進捗率超過）を記録可能です。
こちらをトリガーとして、Kairos3のシナリオ・スコアリング機能を活用することで、閲覧者への自動メール配信や、デモ進捗度に応じたリードナーチャリングが可能になります。
手順
Webサイト等に、デモやシナリオをiframeで埋め込み
デモの埋め込みコードは、「︙」メニューから自動生成可能です
シナリオの埋め込みコードは、以下をサンプルとしてご利用ください
<iframe frameborder="none" style="width:100%; height:100vh;" src="https://product.plainer.co.jp/s/plainer-demo/a1ba01c0-70c4-4916-b7b0-0cccfea64be2"></iframe>
デモの埋め込みコードとは別に、下記の「連携コードサンプル」のJavaScriptを挿入
kairos3TrackerNameの値は、貴社のKairos3アカウント名に書き換えてくださいprogressPercentThresholds/progressStepThresholdsは、記録したい閾値に合わせて変更してください（不要な場合は[]）
Kairos3管理画面でアクティビティが記録されているかご確認ください
①指定したURLがWebアクセスとして顧客の行動に記録されます。
②タグルールを設定することで、対象のURLが記録された顧客にタグをつけることができます
③顧客画面でタグがついたことが確認できます
④PLAINREコンテンツを見た顧客をタグで絞り込みも可能です
記録されるURL形式
イベント | 記録URL |
デモ開始 |
|
デモ完了 |
|
特定ステップ到達 |
|
特定進捗率到達 |
|
demo_progress_percent の末尾は実際の進捗率ではなく、超えた閾値の値が記録されます。
送信条件の仕様
ステップ条件：指定したステップ数とちょうど一致したときに送信
進捗率条件：指定した閾値を超えたときに1回だけ送信
同じ条件では重複送信されません
補足
埋め込んだデモやシナリオを編集すると、Webサイト上のデモやシナリオも自動的に反映されます。
埋め込んだページのURL末尾に、
?pl_uid=email@plainer.co.jpというパラメータを追加することで、PLAINERのアクセスデータ上でも実名のトラッキングが可能です。メールアドレス部分は、送付先のメールアドレスやドメイン、SFAのID等に別途書き換えをお願いいたします。詳しくはこちらをご覧ください。
連携コードサンプル
⚠️ 設定には、基礎的なHTML/CSS/JavaScriptやMAツールの知識が必要です。個別のご質問にはサポートでお答えしかねます。
<script>
(function () {
var lastEventData = null;
var firedProgressKeys = {};
var kairos3TrackerName = '貴社のKairos3アカウント名'; // 記録するアカウント名 var beaconCondition = {
// 全体の何%を超えたら記録するか（不要であれば[]だけにする）
progressPercentThresholds: [25, 50, 75, 100],
// 何ステップ目に到達したら記録するか（不要であれば[]だけにする）
progressStepThresholds: [1, 5, 10, 20, 30, 40]
}; function isDuplicateEvent(data) {
return lastEventData && JSON.stringify(lastEventData) === JSON.stringify(data);
} function getProgressInfo(data) {
var totalSteps = Number(data.contentTotalSteps || 0);
var currentStep = Number(data.contentCurrentStep || 0);
if (!totalSteps || !currentStep) return null;
return {
totalSteps: totalSteps,
currentStep: currentStep,
progressPercent: Math.floor((currentStep / totalSteps) * 100)
};
} function getProgressBeaconPath(data) {
var progressInfo = getProgressInfo(data);
var contentId = data.contentId ? String(data.contentId) : 'unknown';
var i, threshold, key;
if (!progressInfo) return null; for (i = 0; i < beaconCondition.progressPercentThresholds.length; i++) {
threshold = beaconCondition.progressPercentThresholds[i];
if (progressInfo.progressPercent >= threshold) {
key = contentId + ':percent:' + threshold;
if (!firedProgressKeys[key]) {
firedProgressKeys[key] = true;
return '/demo_progress_percent/' + encodeURIComponent(contentId) + '/' + encodeURIComponent(String(threshold));
}
}
}
for (i = 0; i < beaconCondition.progressStepThresholds.length; i++) {
threshold = beaconCondition.progressStepThresholds[i];
if (progressInfo.currentStep === threshold) {
key = contentId + ':step:' + threshold;
if (!firedProgressKeys[key]) {
firedProgressKeys[key] = true;
return '/demo_progress_step/' + encodeURIComponent(contentId) + '/' + encodeURIComponent(String(threshold));
}
}
}
return null;
} function getVirtualPath(data) {
var contentId = data.contentId ? encodeURIComponent(String(data.contentId)) : '';
var progressInfo = getProgressInfo(data);
var contentCurrentStep = progressInfo ? encodeURIComponent(String(progressInfo.currentStep)) : '';
switch (data.event) {
case 'plainer_content_view_start':
return '/demo_start/' + contentId + '/' + contentCurrentStep;
case 'plainer_guide_view_complete':
return '/demo_complete/' + contentId + '/' + contentCurrentStep;
case 'plainer_guide_view_start':
return getProgressBeaconPath(data);
default:
return null;
}
} function loadKairos3Beacon(virtualPath) {
var originalUrl = location.href;
var virtualUrl = location.origin + virtualPath;
history.replaceState(null, '', virtualUrl);
window.Kairos3Tracker = kairos3TrackerName;
var script = document.createElement('script');
script.type = 'text/javascript';
script.charset = 'utf-8';
script.src = '//c.k3r.jp';
script.async = true;
function restoreUrl() {
history.replaceState(null, '', originalUrl);
}
script.onload = restoreUrl;
script.onerror = restoreUrl;
document.head.appendChild(script);
} window.addEventListener('message', function (event) {
var data = event.data;
if (!data || typeof data !== 'object' || !data.event) return;
if (isDuplicateEvent(data)) return;
lastEventData = data;
var virtualPath = getVirtualPath(data);
if (!virtualPath) return;
loadKairos3Beacon(virtualPath);
});
})();
</script>
関連