メインコンテンツへスキップ
Google Tag Manager（GTM）のカスタム HTML タグを使うと、サイトのテンプレートやソースコードを直接編集できない場合でも Turnint AI を導入できます。 このページでは、GTM 経由でページ内に埋め込みをインライン表示する手順を説明します。ボタンクリックで開くポップアップやフルスクリーン表示を HTML に直接追加できる場合は、React への組み込み や Nuxt への組み込み の基本パターンも参照してください。

​
全体の流れ

  1. GTM で loader 用のカスタム HTML タグを作成する
  2. 埋め込み先を用意する
  3. GTM プレビューでタグの発火と表示を確認する
ダッシュボードのエージェント共有ダイアログで 埋め込み > GTM 経由でインライン埋め込み を選ぶと、対象エージェントの data-turnint-id とワークスペースの data-turnint-namespace が入ったコードをコピーできます。

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

GTM で タグ > 新規 > カスタム HTML を選択し、以下の loader script を貼り付けます。 
<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 を追加します。 
<div
  data-turnint-id="pub_xxxxxxxxxxxxxxxx"
  data-turnint-type="inline"
  style="width:100%;"
></div>
この場合、GTM 側では Step 1 の loader 用タグだけで導入できます。

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

ページ HTML を編集できない場合は、別の カスタム HTML タグを作成し、以下のスクリプトを貼り付けます。 
<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 のように指定します。
GTM だけで埋め込み先を追加する場合、対象の親要素には十分な高さを確保してください。

​
トリガーと発火順

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 の読み込みを許可してください
  • タグの公開範囲 — 全ページに配信する場合でも、埋め込み先追加用タグは対象ページだけで発火するよう条件を絞ってください

​
関連ドキュメント