👣 使用流程

---

1. 設定錨點

• Campaign Star 的錨點是以「Section 區段」為單位
• 為方便區分不同 Section，或提升 Anchor link 的 url 可讀性，使用者可以編輯目標錨點 Section 的元件名稱
  1. 編輯入口
     • 直接點擊元件面板的 edit icon
     • 先在畫布定位到 Section 元件，再右鍵點擊元件框左上角黑色 label 的「…」選單
  2. 命名規則
     1. Section 名稱必須是不重複的唯一值
     2. 只能輸入半形的英文、數字、連字號 (-)、底線 (_)

2. 建立連結

【方式１】直接設定整個元件的連結👍較推薦

1. 在元件面板的 [設定] tab 底下，找到 [操作] 段落

2. [連結類型] 設為「跳轉至本頁指定區段」

3. [目標區段] 設為希望的錨點 Section

4. [頂部距離] 設定希望跳轉後，定位點距離畫面頂部有多遠 (optional)

   
   

【方式２】只設定元件裡面部分文字的連結⚠️有使用風險

1. 在 編輯入口 複製目標 Section 的元件名稱
2. 在元件面板的 [設定] tab 底下，找到 [內容] 段落的 rich text editor 文字編輯器
3. 選取目標文字範圍後，插入超連結
4. 在 [連結 URL] 輸入以井字號開頭的「$# \text(section-name)$」
   • 系統會自動以當前活動頁網址為基底，後製出完整的 Anchor link
   • 例如：當前活動頁網址為 https://awoo.shop/pages?campaignCode=christmas2024、錨點 Section 名稱為「feature-products」時，手動輸入「#feature-products」後，系統後製完的 Anchor link 網址會是 https://awoo.shop/pages?campaignCode=christmas2024#feature-products

3. 檢查效果

點擊「預覽」或「發布」後，實際在網店活動頁確認效果

⚠️ 注意事項

---

❗️

1. 不管是採哪種方式設定的 Anchor link：

   在目標錨點的 Section 被刪除後，原本的 Anchor link 都會失效，需人工調整

2. 針對採【方式２】設定、手動輸入 #section-name 的 Anchor link：

   • 在目標錨點的 Section 被重新命名後，原本的 anchor link 會失效，需人工調整井字號後方內容

   • 被點擊時，會被視作不同次頁面瀏覽，觸發新的 viewPage 事件，使 **Campaign Star 成效報表 ** 的活動頁頁面瀏覽數 +1

   • 部分網站（例如 SHOPLINE）在 HTML 自帶的 <base> 標籤值，會蓋過當前活動頁網址，使系統後製出來的完整 Anchor link 錯誤

     例如：當前活動頁網址為 https://awoo.shop/pages?campaignCode=christmas2024<base> 標籤值為 https://awoo.shop/、錨點 Section 名稱為「feature-products」時，手動輸入「#feature-products」後製完的 Anchor link 網址會是 https://awoo.shop/#feature-products，不是正確的活動頁

   • ✅️ 解法：在手動插入超連結時，不要只輸入 #section-name，改輸入包含錨點的完整活動頁網址，例如https://awoo.shop/pages?campaignCode=christmas2024#feature-products