# タグを埋め込む

## 手順

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には、メインドメインの前に"."をつけたものを指定します（末尾にスラッシュを含めない）。

```html
<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. コピーしたタグをどこかに保存しておく

例:

```html
<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`の場合、以下のような形となります。

```html
<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>
```

## 確認

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

フォーム画面用のタグ

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

サンクス画面用のタグ

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

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

```html
<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>
```

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.immedio.io/guides/initial-setup/tag-creation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.