GTM第三者SDKインストールとAI指示ガイド

本記事では、Google Tag Manager（GTM）を通じてエディター機能を拡張する方法と、インストール済みのリソースを正しく使用するようAIに指示する方法を説明します。

1. GTMでのSDKインストールの実装（Lucideを例に）

ウェブページでLucideアイコンを使用したい場合は、以下の手順に従ってください。

前提条件

ウェブページはCNAME連携を完了している必要があります。カスタムドメインが連携されていないページではGTMをトリガーできません。

GTM設定手順

GTMコンテナに新しいタグを追加してください。
タグの種類は「カスタムHTML」を選択してください。
以下のコードを貼り付けてください：

<!-- Lucide SDKを読み込む --> <script src="[https://unpkg.com/lucide@latest](https://unpkg.com/lucide@latest)"></script>  <!-- Lucideアイコンを初期化 --> <script>   function initFSIcons() {     if (typeof lucide !== 'undefined') {       lucide.createIcons();     }   }   // ページ読み込み時と動的コンテンツのレンダリング後に実行されるようにする   window.addEventListener('load', initFSIcons);   // ページ内で非同期にコンテンツが読み込まれる場合は、一定時間後に再度トリガーすることを推奨   setTimeout(initFSIcons, 1000); </script>

トリガー条件は「All Pages」または特定のキャンペーンページのURLに設定してください。

2. AIにGTMパッケージの使用を指示する方法（プロンプト例）

GTMにSDKをインストール済みの場合、AIにコードを生成してもらう際に「環境にすでにそのパッケージが備わっている」ことを明確に伝える必要があります。そうすることでAIは対応するタグを生成します。

指示文の例（Lucideを例に）

ユーザーの指示文：

「商品紹介ブロックを作成してください。注意：私のウェブページ環境には、GTM経由ですでにLucideアイコンライブラリがインストールされています。そのため、アイコンが必要な箇所では、直接  の形式を使用してください。コードにscriptタグを一切含めないでください。またその他のFeversocial開発規範にも従ってください。」

AI受け取り後の挙動

AIは絵文字を生成する必要がないと認識します。
AIはのようなタグを生成します。
GTMがすでにグローバルにSDKを読み込んでいるため、このコードをエディターに貼り付けて公開すれば、アイコンは正常に表示されます。

3. 注意事項

エディタープレビューの制限：エディター管理画面で編集している際、GTMスクリプトは通常管理画面上では実行されないため、空欄のタグのみが表示される場合があります。必ず「プレビューページ」または「公開済みURL」で最終的な表示を確認してください。
SDKの競合：同じ機能を持つSDKを重複して読み込む（FontAwesomeとLucideを同時に読み込むなど）と、ページの読み込み速度に影響するため避けてください。
SVGに関する注意：SDKを通じてアイコンを生成する場合でも、SDKが最終的にレンダリングするのがやで表示されるフォントアイコンであることを確認してください。生の<svg>タグを大量に直接挿入すると、フィルタによって除去される可能性があります。

拡張エディター－GTM第三者SDKインストールとAI指示ガイド