タグを埋め込む

手順

immedioのタグは、主に下記のような工程で設置します。

1. 自分のウェブサイトに適したimmedioのタグを作る
2. タグを正しいタイミングで発火させる

それぞれを切り分けて考えていただくと、タグ設置がスムーズに進みます。

自分のウェブサイトに適したimmedioのタグを作る

ウェブサイトごとにimmedioのタグの書き方が異なります。ここでは、どのようにして適切なimmedioのタグを作るかを説明します。

通常は、管理画面の「企業設定」>「マッピング・ルーター」の中の「ルーター一覧」画面からタグを取得します。 フォーム画面用のタグと、サンクス画面用のタグがコピーできます。

フォーム画面用のタグは、以下のような形です。

<script>
immedioConfig = {
    apiKey: 'xxxxxxxxxxxxxxxxxxxx',
    pageType: 'form',
}
</script>
<script src="https://sdk.immedio.io/sdk.js"></script>

サンクス画面用のタグは、以下のような形です。

<script>
immedioConfig = {
    pageType: 'thanks',
}
</script>
<script src="https://sdk.immedio.io/sdk.js"></script>

基本的には、こちらのタグをご利用いただければ大丈夫です。 ただし、ウェブサイトの構成によっては、特殊なタグを作る必要があるので、以下のセクションを参照してください。

iframeタグ内のsrc属性でドメインが指定されている時（Marketing Cloud Account Engagement（旧 Pardot）等）

フォーム側のタグにcookieDomainという変数を追加した上で、iframe内にタグを設置します。cookieDomainには、メインドメインの前に"."をつけたものを指定します（末尾にスラッシュを含めない）。

<script>
immedioConfig = {
    apiKey: 'xxxxxxxxxxxxxxxxxxxx',
    pageType: 'form',
    cookieDomain: '.immedio.io'
}
</script>
<script src="https://sdk.immedio.io/sdk.js"></script>

SPA形式のウェブサイトの場合

SPA形式の場合、フォームとサンクスで1つのタグを使い、タグの中でimmedioが発火するURLを宣言します。

SPA形式のタグは、ルーター一覧のページから取得できます。

1. ルーター一覧ページにアクセス
2. 前回作成したフローチャートの行で、SPA画面用タグのボタンをクリック
3. フォームとサンクスそれぞれのURLを指定（複数指定することも可能です）
4. 「コピーする」ボタンをクリック
5. コピーしたタグをどこかに保存しておく

例:

<script>
  immedioConfig = {
    apiKey: 'ziKJPuXWSNKRQ7NmMbltA',
    spaFormPageUrl: new RegExp("^https://example\.com/form(\\?.*)?$"), // フォームのURL
    spaThanksPageUrl: new RegExp("^https://example\.com/thanks(\\?.*)?$") // サンクスのURL
  };
</script>
<script src="https://sdk.immedio.io/sdk.js"></script>

注意点

２段階フォームの場合でも、全てのフォームのURLを設定する必要があります。例えば、最初のフォームがhttps://example.com/form1、次のフォームがhttps://example.com/form2の場合、以下のような形となります。

<script>
  immedioConfig = {
    apiKey: 'ziKJPuXWSNKRQ7NmMbltA',
    spaFormPageUrl: new RegExp("^https://example\.com/form1(\\?.*)?$|^https://example\.com/form2(\\?.*)?$"), // フォームのURL
    spaThanksPageUrl: new RegExp("^https://example\.com/thanks(\\?.*)?$") // サンクスのURL
  };
</script>
<script src="https://sdk.immedio.io/sdk.js"></script>

確認

タグは作成できましたか？　正しく作成できていれば、以下のようなタグが作成されているはずです。

フォーム画面用のタグ

<script>
immedioConfig = {
    apiKey: 'xxxxxxxxxxxxxxxxxxxx',
    pageType: 'form',
    cookieDomain: '.immedio.io', // 必要な場合のみ
}
</script>
<script src="https://sdk.immedio.io/sdk.js"></script>

サンクス画面用のタグ

<script>
immedioConfig = {
    pageType: 'thanks',
}
</script>
<script src="https://sdk.immedio.io/sdk.js"></script>

SPA用のタグ ※SPA形式のウェブサイトの場合

<script>
  immedioConfig = {
    apiKey: 'ziKJPuXWSNKRQ7NmMbltA',
    spaFormPageUrl: new RegExp("^https://example\.com/form(\\?.*)?$"), // フォームのURL
    spaThanksPageUrl: new RegExp("^https://example\.com/thanks(\\?.*)?$") // サンクスのURL
  };
</script>
<script src="https://sdk.immedio.io/sdk.js"></script>

• タグが正しく作成できている
• タグを保存した