PLAINERナレッジセンター
ログイン

ポップアップガイドでの「外部サイト埋め込み」

ポップアップガイドでの「外部サイト埋め込み」とは

💡 ポップアップガイドでは任意のタイミングで外部のページ(フォームなど)をポップアップすることができます。リード獲得などに活用が可能です。

埋め込む「メディア」の準備

  • タイプ「Web」のメディア (フォーム等) のみ埋め込むことが可能です
  • 左メニュー「メディア」より、タイプ「Web」で追加してください

ポップアップガイドにおける「外部サイト埋め込み」の利用方法

  1. 左側メニューから各ページの「ポップアップガイド追加」ボタンを押下
  2. 右側のメニューで「本文」→「外部サイト埋め込み」を選択してください。必要に応じてヘッダーテキストを入力してください

利用するページの準備

⚠️ ポップアップガイドでの「外部サイト埋め込み」として、リード獲得用にMAの入力フォームを使う場合は事前に準備が必要です
⚠️設定には、基礎的なHTML/CSS/JaveScriptやMAツールの知識が必要です。個別のご質問にはサポートでお答えしかねます

仕様概要

  • PLAINERでは、外部の埋め込んだフォームからmessageを受け取り、ユーザーID(実名)を記録したり、フォーム入力後にコンテンツの続きを見られる仕組みを提供しています
  • messageのインターフェースは下記のサンプルコードの通りとなっております。valueに入れた任意の値が、PLAINERのアクセスデータ上にユーザーIDとして連携されます
  • 合わせて上記のコードを設定することで、フォームを入力後、「次のガイド」に進み、入力者はコンテンツの続きが見られるようになります。
  • 設定には、基礎的なHTML/CSS/JaveScriptやMAツールの知識が必要です。個別のご質問にはサポートでお答えしかねますが、下記のMAツールでのサンプルコードをご参考に開発者と連携して実装してください

Account Engagement (旧Pardot)の場合のサンプル

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

Account Engagement (旧Pardot) の場合は、フォームの完了アクション設定で「お礼コード」のタブをクリックし、下記サンプルコードのいずれかを参考に、フォーム内容や設定に応じて、開発者と連携して内容を確認し、貼り付けてください。

<!-- メールアドレス連携の場合 -->
<script>
    const email = {{Recipient.Email}}; 
    const message = {
      source: "plainer-media-form",
      key: "pl_uid",
      value: email, 
    };
    parent.postMessage(message, "*");
</script>

<!-- Account Engagementのid連携の場合 -->
<script>
    const id = {{Recipient.id}} ; 
    const message = {
      source: "plainer-media-form",
      key: "pl_uid",
      value: id, 
    };
    parent.postMessage(message, "*");
</script>

Marketoの場合のサンプル①：サンクスページがMarketoで作成したランディングページの場合

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

フォーム送信後のリダイレクト先「ありがとうございました！」ページをMarketoで作成したランディングページに設定します。
そのランディングページに下記の設定を行ってください。

「ありがとうございました！」詳細ページの設定

リダイレクト先のランディングページのHTMLを編集し、下記サンプルコードを参考に、フォーム内容や設定に応じて、開発者と連携して内容を確認し、貼り付けてください。
(送信完了後、モーダルは自動的に閉じて、次のガイドに進むため、スクリプト以外は空白のページで問題ありません)

<!-- メールアドレス連携の場合 -->
<script>
    const email = {{lead.Email Address}};
    const message = {
      source: "plainer-media-form",
      key: "pl_uid",
      value: email, 
    };
    parent.postMessage(message, "*");
</script>

Marketoの場合②：サンクスページがMarketo"以外"で作成したランディングページの場合

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

⚠️ WordPressで作成したページなど、Marketoがホストしているランディングページ以外の場合は上記のコードを利用することができません。

対処法
  • Marketoのフォームを埋め込んでいるWebページのHTMLにおいて、Marketoフォーム埋め込みコードを編集します
  • フォーム送信完了時に、入力されていたメールアドレスをPlainerへ受け渡すスクリプトを挿入します

【参考】従来のMarketoフォーム埋め込みコード

下記はお使いの環境に合わせてください。通常通りMarketoからフォーム埋め込みコードをコピーすれば問題ありません。

XXX-XXX-XXX：munchkinアカウントID

XXXX：フォームID

xxxx.marketo.com：お使いのアカウントに対応するMarketoサーバーURL

<script src="//app-xxxx.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_XXXX"></form>
<script>MktoForms2.loadForm("//app-xxxx.marketo.com", "XXX-XXX-XXX", XXXX);</script>

下記サンプルコードを参考に、フォーム内容や設定に応じて、開発者と連携して内容を確認し、埋め込みコードを変更してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="//app-xxxx.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_XXXX"></form>
<script>MktoForms2.loadForm("//app-ab22.marketo.com", "XXX-XXX-XXX", XXXX);
if (typeof MktoForms2 !== 'undefined') {
    MktoForms2.whenReady(function (form) {
        const jQueryform = form.getFormElem()
        form.onSuccess(values => {
           const email = jQuery('#Email').val();
           const sendEmail = { source: "plainer-media-form", key: "pl_uid", value: email };
           parent.postMessage(sendEmail, "*");
           return true
        })
    })
}
</script>

※jQueryを利用している例です

HubSpotのランディングページ機能で制作されたページの場合

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

ランディングページの「設定」→「追加のコードスニペット」→「HeadのHTML」に、下記サンプルコードを参考に、フォーム内容や設定に応じて、開発者と連携して内容を確認し、貼り付けてください。

<script>
  function postPlainer() {
    const email = document.querySelectorAll("input[type='email']")[0].value;
    const message = {
      source: "plainer-media-form",
      key: "pl_uid",
      value: email,
    };
    parent.postMessage(message, "*");
  }
  window.addEventListener('message', function(event) {
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
      postPlainer();
    }
  });
</script>

HubSpotのフォームの埋め込みコードを活用し、HubSpot以外で制作したページにに埋め込んでいる場合

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

HubSpotのデフォルトの埋め込みコードを、下記サンプルコードを参考に、フォーム内容や設定に応じて、開発者と連携して内容を確認し、貼り付けてください。
region、portalId、formIdはご自身のものに変更してください。

<script>
hbspt.forms.create({
  region: "na1",
  portalId: "xxxxxxxx",
  formId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  onFormSubmit: function($form){const email = $form.find('input[name="email"]').val(); const message = {source: "plainer-media-form",key: "pl_uid",value: email,}; window.parent.parent.postMessage(message, "*"); return false;}
});
</script>

「外部サイト埋め込み」の注意点

埋め込みの制約

  • 「外部サイト埋め込み」として利用できるのは、単独でも開ける「Webページ」として存在するものに限ります。フォームの埋め込みコード等は利用できません。
  • 「外部サイト埋め込み」は、フォーム入力がされれば自動的にモーダルを閉じて次のガイドに動作をするスクリプトを埋め込んで利用します。
    • 入力を受け付けるWebページでなければ、自動的には閉じられませんので、MAで作成したフォーム以外のコンテンツ(Calendly、YouCanBookMeなどの日程調整ツール)を出す場合は、必ずボタンを追加するようにしてください
  • Webページによってはサイトの設定上Plainerへの埋め込みができない仕様のものがあります。詳しくはこちらをご覧ください

関連記事