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」 或特定活動頁面的網址。
2. 如何指示 AI 使用 GTM 套件 (Prompt 範例)
當您已經在 GTM 安裝好 SDK 後，您需要在請 AI 生成代碼時明確告知它「環境中已具備該套件」，這樣 AI 才會生成對應的標籤。
指令範例 (以 Lucide 為例)
使用者指令：
「請幫我寫一個產品介紹區塊。注意：我的網頁環境已經透過 GTM 安裝了 Lucide 圖示庫，因此在需要圖示的地方，請直接使用 <i data-lucide="圖示名稱"></i> 格式。請勿在代碼中包含任何 script 標籤，並遵守其他的 Feversocial 開發規範。」
AI 接收後的行為
AI 會知道不需要生成 Emoji。
AI 會生成如
<i data-lucide="shopping-cart"></i>的標籤。由於 GTM 已經在全域載入了 SDK，當這段代碼貼入編輯器並發佈後，圖示就會正常顯示。
3. 注意事項
編輯器預覽限制：在編輯器後台編輯時，由於 GTM 腳本通常不會在後台執行，您可能只會看到空白的
<i>標籤。請務必到「預覽頁面」或「正式發佈網址」查看最終效果。SDK 衝突：避免載入過多重複功能的 SDK（如同時載入 FontAwesome 與 Lucide），以免影響網頁載入速度。
SVG 警示：即便透過 SDK 產生圖示，請確保 SDK 最後渲染出來的是
<i>或<span>承載的字體圖示，而非直接插入大量原始<svg>標籤，以避免被過濾器截斷。