メインコンテンツにスキップ

HubSpotへの連携方法のご案内

HubSpotへの連携

概要

HubSpotのCookieを持っているコンタクトのアクティビティに、ページビューとしてデモの閲覧開始・終了を記録可能です。

（以下の連携コードサンプル内のdocument.title = "任意の名前を設定";の内容や、埋め込んだページのURLが記録されます）

手順

  1. Webサイト等に、デモやシナリオをiframeで埋め込み

    1. デモの埋め込みコードは、「︙」メニューから自動生成可能です

    2. シナリオの埋め込みコードは、以下をサンプルとしてご利用ください。

      1. <iframe frameborder="none" style="width:100%; height:100vh;"src="https://product.plainer.co.jp/s/plainer-demo/a1ba01c0-70c4-4916-b7b0-0cccfea64be2"></iframe>

  2. デモの埋め込みコードとは別に、下記のJavaScriptを挿入

    1. “任意の名前を記載” の箇所は適宜ご修正ください

  3. HubSpotとの連携状況をご確認

補足

  • 埋め込んだデモやシナリオを編集すると、Webサイト上のデモやシナリオも編集されます。

  • 埋め込んだページのURL末尾に、<?pl_uid=email@plainer.co.jp>というパラメータを追加することで、PLAINERのアクセスデータ上でも実名のトラッキングが可能です。

    • メールアドレス部分は、送付先のメールアドレスやドメイン、SFAのID等に別途書き換えをお願いいたします。

    • くわしくはこちらをご覧ください

連携コードサンプル（HubSpotのみへの連携の場合）

⚠️設定には、基礎的なHTML/CSS/JaveScriptやMAツールの知識が必要です。個別のご質問にはサポートでお答えしかねます

<script>
var lastReceivedMessage = null;
window.addEventListener(message, function (event) {
  if (lastReceivedMessage && JSON.stringify(lastReceivedMessage) === JSON.stringify(event.data)) {return;}
  lastReceivedMessage = event.data;
  var _hsq = window._hsq || [];
  switch (event.data.event) {
    case plainer_content_operate_start:
      document.title = "任意の名前を記載";
      _hsq.push([setPath, /demo_start?id= + event.data.contentId]);
      _hsq.push([trackPageView]);
      break;
    case plainer_guide_view_complete:
      document.title = "任意の名前を記載";
      _hsq.push([setPath, /demo_complete?id= + event.data.contentId]);
      _hsq.push([trackPageView]);
      break;
    default:
      break;
  }
});
</script>

連携コードサンプル（GoogleAnalytics4へも連携したい場合）

⚠️設定には、基礎的なHTML/CSS/JaveScriptやMAツールの知識が必要です。個別のご質問にはサポートでお答えしかねます

<script>
var lastReceivedMessage = null;
window.addEventListener(message, function (event) {
  if (lastReceivedMessage && JSON.stringify(lastReceivedMessage) === JSON.stringify(event.data)) {return;}
  lastReceivedMessage = event.data;
  switch (event.data.event) {
    case plainer_content_operate_start:
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: demo_start,
        demo_id: event.data.contentId,
        demo_duration: event.data.contentTotalSteps
      });
　　  var _hsq = window._hsq || [];
  　　document.title = "任意の名前を記載";
  　　_hsq.push([setPath, /demo_start?id=+ event.data.contentId]);
   　 _hsq.push([trackPageView]);
      break;
   case plainer_guide_view_complete:
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: demo_complete,
        demo_id: event.data.contentId,
        demo_duration: event.data.contentTotalSteps
      });
　    var _hsq = window._hsq || [];
　　  document.title = "任意の名前を記載";
 　　  _hsq.push([setPath, /demo_complete?id=+ event.data.contentId]);
 　　 _hsq.push([trackPageView]);
      break;
    case plainer_guide_view_start:
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: demo_progress,	
        demo_id: event.data.contentId,
        demo_duration: event.data.contentTotalSteps,
        demo_current_step: event.data.contentCurrentStep
      });
      break;
    default:
      break;
  }
});
</script>

※2026年7月修正： サンプルコードにつきまして、contentTotalStepsをcontentTotalStepと記載していたため修正いたしました。

補足

GoogleAnalytics4への連携は、GoogleAnalytics4やGTM側での設定が必要となります。

概要や手順はこちらをご確認ください。

HubSpotのアクティビティの活用方法

アクティビティのページビューをセグメント（リスト）への追加条件にしたり、ワークフローのトリガーにすることが可能です。

ただし、HubSpotでページビューを条件・トリガーとして使用可能なプランを契約している必要がございます。（マーケティングクラウドのプロプラン以上等）

関連記事
こちらの回答で解決しましたか？