> ## Documentation Index
> Fetch the complete documentation index at: https://docs.timothe.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Google Tag Manager 経由で導入する

> Google Tag Manager のカスタム HTML タグを使って Turnint AI のインライン埋め込みを導入する方法

Google Tag Manager（GTM）のカスタム HTML タグを使うと、サイトのテンプレートやソースコードを直接編集できない場合でも Turnint AI を導入できます。

このページでは、GTM 経由でページ内に埋め込みをインライン表示する手順を説明します。ボタンクリックで開くポップアップやフルスクリーン表示を HTML に直接追加できる場合は、[React への組み込み](/ja/get-started/onboarding/react) や [Nuxt への組み込み](/ja/get-started/onboarding/nuxt) の基本パターンも参照してください。

## 全体の流れ

1. GTM で loader 用のカスタム HTML タグを作成する
2. 埋め込み先を用意する
3. GTM プレビューでタグの発火と表示を確認する

<Info>
  ダッシュボードのエージェント共有ダイアログで **埋め込み > GTM 経由でインライン埋め込み** を選ぶと、対象エージェントの `data-turnint-id` とワークスペースの `data-turnint-namespace` が入ったコードをコピーできます。
</Info>

## Step 1: loader 用タグを作成する

GTM で **タグ > 新規 > カスタム HTML** を選択し、以下の loader script を貼り付けます。

```html theme={null}
<script
  async
  src="https://cdn.turnint.ai/js/latest/turnint.ai.embed.js"
  data-turnint-namespace="ws_xxxxxxxxxxxxxxxx"
  data-turnint-locale="ja"
></script>
```

`data-turnint-namespace` にはワークスペース ID、`data-turnint-locale` には埋め込みの UI 言語を指定します。`ja` / `en` / `auto` を指定できます。

トリガーは、Turnint AI を表示するページだけに絞るか、複数ページで使う場合は全ページに設定します。同じページで loader script が複数回読み込まれないよう、loader 用タグは 1 つだけ発火させてください。

## Step 2: パターン A: ページ HTML に埋め込み先を置ける場合

ページの HTML を編集できる場合は、埋め込みを表示したい位置に以下の `div` を追加します。

```html theme={null}
<div
  data-turnint-id="pub_xxxxxxxxxxxxxxxx"
  data-turnint-type="inline"
  style="width:100%;"
></div>
```

この場合、GTM 側では Step 1 の loader 用タグだけで導入できます。

## Step 3: パターン B: GTM だけで埋め込み先も追加する場合

ページ HTML を編集できない場合は、別の **カスタム HTML** タグを作成し、以下のスクリプトを貼り付けます。

```html theme={null}
<script>
  (function() {
    const container = document.querySelector("!!TARGET_SELECTOR!!");
    if (!container || container.querySelector("[data-turnint-id]")) return;
    const embedding = document.createElement("div");
    embedding.setAttribute("data-turnint-id", "pub_xxxxxxxxxxxxxxxx");
    embedding.setAttribute("data-turnint-type", "inline");
    embedding.style.width = "100%";
    container.appendChild(embedding);
  })();
</script>
```

`!!TARGET_SELECTOR!!` は、埋め込み先にしたい要素を指定する CSS セレクタに置き換えてください。例えば `#turnint-ai-container` や `.product-faq` のように指定します。

<Note>
  GTM だけで埋め込み先を追加する場合、対象の親要素には十分な高さを確保してください。
</Note>

## トリガーと発火順

loader 用タグと埋め込み先追加用タグは、同じページで発火させます。埋め込み先追加用タグは、対象要素が DOM に存在してから実行される必要があるため、通常は **DOM Ready** 以降のトリガーを使います。

GTM の **タグの順序付け** を使える場合は、loader 用タグを先に発火させる構成にしてください。loader script は既存の `data-turnint-id` 要素を自動検知するため、多少前後しても動作しますが、タグ構成を明確にしておくと検証しやすくなります。

## 検証手順

1. GTM の **プレビュー** を開く
2. 対象ページで loader 用タグが 1 回だけ発火していることを確認する
3. Step 2B の方式では、埋め込み先追加用タグも発火していることを確認する
4. ブラウザの Elements パネルで `[data-turnint-id]` の要素が追加されていることを確認する
5. 埋め込みがページ内に表示され、会話を開始できることを確認する

表示されない場合は、まず `!!TARGET_SELECTOR!!` に指定した要素がページ上に存在するかを確認してください。SPA や遅延描画のページでは、対象要素が後から追加されることがあります。その場合は、発火タイミングを **Window Loaded** に変えるか、より安定した親要素を selector に指定してください。

## 注意点

* **CSP** — サイトの Content Security Policy で外部 script が制限されている場合、`https://cdn.turnint.ai` の読み込みを許可してください
* **タグの公開範囲** — 全ページに配信する場合でも、埋め込み先追加用タグは対象ページだけで発火するよう条件を絞ってください

## 関連ドキュメント

* [クイックスタート](/ja/get-started/quickstart) — 共有方法と埋め込み方式の全体像
* [React への組み込み](/ja/get-started/onboarding/react) — React サイトに直接組み込む方法
* [Nuxt への組み込み](/ja/get-started/onboarding/nuxt) — Nuxt サイトに直接組み込む方法
* [トラッキングパラメータの自動保持](/ja/integrations/tracking-params) — UTM などの引き継ぎ