HubSpotのトラッキングコードをトラッキングタグに設定する

本記事では、PLAINERで作成したデモコンテンツに計測タグをインストールする「トラッキングタグ機能」について記載しています。

トラッキング機能の基本的な概要は以下の記事をご覧ください。

配信したデモの閲覧を計測する（トラッキングタグ機能）

HubSpotの基本的な連携

HubSpot公式ヘルプに従い、トラッキングコードを取得し、PLAINERのトラッキングタグ欄に貼り付けます。

これだけでも、PLAINERデモのページビュー数の計測が可能となります。

HubSpotの応用的な連携

HubSpotの匿名ページビューとして記録されるだけでは、その後のアクションに活かしづらいため、コンタクトと紐付けて記録されることが望ましいかと思います。

サンプルスクリプトでは、実務で使いやすいような以下の要素が含まれています。

デモの開始と完了タイミングそれぞれでアクティビティが記録されます。
デモURLの後ろに ?hs_email={顧客のメールアドレス} とパラメータをつけて配布すれば、デモを閲覧された際に、そのメールアドレスを持つコンタクトのアクティビティとして紐付きます。
デモURLに流入経路を表すutm_source等のパラメータが付与されている場合、そのパラメータもアクティビティのページビューに引き継がれます
埋め込みしているデモと二重計測になってしまわないように、計測したいコンテンツIDを指定できます。

※「XXXXXX」部分はアカウントIDになります。トラッキングコード内に含まれています。

※「YYYYYY」部分はPLAINERのコンテンツIDになります。webサイト設置しているデモなどと二重計測にならないよう、コンテンツIDの指定を推奨いたします。コンテンツIDは、PLAINERのデモ公開URLの最後の/（スラッシュ）から?（クエスチョンマーク）までのハイフンあり英数字になります。

HubSpot連携サンプル

(function() {

// ==========================================

// 【設定エリア】計測対象とするコンテンツIDを指定してください

// ※ 複数ある場合は、カンマ「,」で区切って列挙が可能です

// ==========================================

var TARGET_CONTENT_IDS = [

'YYYYYY'

];

// ==========================================

window._hsq = window._hsq || [];

// 自動計測が可能な状態の場合、初期タイトル「デモ閲覧ページ」をセット

document.title = '\u30c7\u30e2\u95b2\u89a7\u30da\u30fc\u30b8';

var userEmail = null;

var utm = '';

// 親画面URLからメールアドレスとそれ以外のパラメータをUTMとして取得

try {

var ref = document.referrer;

if (ref) {

var u = new URL(ref);

userEmail = u.searchParams.get('hs_email');

u.searchParams.delete('hs_email');

utm = u.search;

}

} catch(e) {}

var lastMsg = null;

// イベント受信＆指定コンテンツIDのみHubSpotへ送信

window.addEventListener('message', function(e) {

if (!e.data || !e.data.event) return;

var strData = JSON.stringify(e.data);

if (lastMsg === strData) return;

lastMsg = strData;

var ev = e.data.event;

var id = e.data.contentId || 'unknown';

// 指定されたコンテンツIDのリストに含まれていない場合は処理をスキップ

if (TARGET_CONTENT_IDS.indexOf(id) === -1) return;

if (ev === 'plainer_content_operate_start' || ev === 'plainer_guide_view_complete') {

var isStart = (ev === 'plainer_content_operate_start');

var path = isStart ? '/demo_start' : '/demo_complete';

// HubSpotがパケットを飛ばす直前にタイトルを日本語で上書き（デモ開始/デモ終了）

document.title = isStart ? '\u30c7\u30e2\u958b\u59cb' : '\u30c7\u30e2\u7d42\u4e86';

// UTMパラメータを付与

var extra = utm ? utm.replace('?', '&') : '';

// コンタクトに紐づけ

if (userEmail) window._hsq.push(['identify', { email: userEmail }]);

window._hsq.push(['setPath', path + '?id=' + id + extra]);

window._hsq.push(['trackPageView']);

console.log('[HS] Sent:', ev, userEmail);

}

});

})();

</script>

設定の確認・テスト

テスト用のコンタクトを1つ作成し、デモURLに ?hs_email={顧客のメールアドレス} をつけてデモを閲覧することで、当該コンタクトのアクティビティにデモ開始/終了アクティビティが紐づくか確認をします。