建立行動呼籲 (CTA)

使用行動呼籲 (CTA) 工具來建立按鈕 CTA、橫幅或彈出式視窗，以新增至您的 HubSpot 頁面並吸引新的訪客。您也可以新增 CTA 到外部頁面。

在外部頁面上新增 CTA 之前，您必須先安裝HubSpot 追蹤代碼，或在您的WordPress網站安裝HubSpot WordPress 外掛程式。新增 CTA 之後，透過將訪客引導至特定頁面、會議連結或外部 URL 來驅動流量。

在行動裝置上，您可以在CTA 選項中選擇啟用回應式版面或在小螢幕上隱藏 CTA。發佈 CTA 之後，學習如何為 CTA建立A/B 測試，並分析 CTA 的表現。

設計 CTA

在 CTA 編輯器中，自訂您的 CTA 設計以吸引訪客。在建立 CTA 時，您也可以使用智慧型內容，根據瀏覽者類別顯示不同版本的 CTA。進一步瞭解如何在 CTA 中使用智慧型內容。

1. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「行動呼籲」。
2. 在右上方，按一下建立。
3. 在頂端，選擇彈出視窗索引標籤或嵌入與按鈕索引標籤。
   • 彈出式 CTA 將包括以下類型：
     
     • 橫幅：固定在頁面頂部或底部的永久性橫幅。訪客捲動您的頁面時，橫幅會保持不變。
     • 彈出式方塊： 在設定的時間表中出現的彈出式方塊。
     • 滑入式：從網站一角滑入的橫幅。當瀏覽者捲動您的網頁時，橫幅會保持不變。
   • 嵌入式和按鈕 CTA 將包括以下類型：
     • 嵌入式：您可在網站或 HubSpot 電子郵件中使用的橫幅、號召行動或按鈕，以將潛在客戶引導至特定頁面。
     • 嵌入式圖片：您可以在 HubSpot 頁面或電子郵件上使用的圖片。
4. 根據您要建立的 CTA 類型選擇範本。
   • 每個 CTA 模板都會有可自訂的模組，例如圖片和文字欄位。
   • 例如，您可以選擇「點選聊天 」範本來啟動 WhatsApp 連結、選擇「會 議快顯」範本來顯示會議預約頁面，或選擇「活動」範本讓訪客註冊您的會議或工作坊、
5. 在左側面板中，從新增 索引標籤，新增模組並編輯 CTA 的版面：

• • 若要在 CTA 中加入更多內容，請點選並直接拖曳新模組到編輯器的右側面板。
    • 您只能在 CTA 中加入一個表單 (新編輯器) 或會議模組。單一 CTA 不能同時包含表單和會議模組。
    • 某些模組只能新增一次，例如倒數計時器或影片模組。
    • 您也可以在 CTA 中加入視訊，了解更多在 CTA 中加入視訊時的要求。
  • 若要修改 CTA 的佈局，請將滑鼠停在模組上 ，然後按一下並將其拖曳到新位置。
  • 若要複製模組，請將滑鼠停在模組上，然後按一下duplicateclone 圖示。
  • 若要刪除模組，請將滑鼠停在模組上，然後按一下delete刪除圖示。
    

.

• • 要編輯模組，請按一下模組。
    • 在左側面板中，您可以編輯模組的內容和設計。
    • 要在訪客提交表單後關閉彈出 CTA，在自訂表單模組時，您可以切換開啟提交後關閉 開關。
      

7. 在左側面板中，按一下內容 索引標籤來管理您的模組。
   • 若要編輯模組，請按一下模組名稱 。在左側面板中，您可以編輯模組的內容和設計。在豐富文字 模組中，您可以使用AI 助手 來建立或精細您的 CTA 內容。
   • 若要刪除模組，請將滑鼠移至模組上方，然後按一下delete 刪除圖示。
8. 在左側面板中，按一下「設計」標籤以自訂和預覽您的 CTA。
   • 若要在特定頁面上預覽您的 CTA，請在右上方按一下預覽。然後按一下在特定頁面上預覽下拉式功能表，並選擇要預覽 CTA 的HubSpot 頁面。

• • 若要自訂 CTA 的外觀，請選擇下列其中一個選項。然後在左側面板中設定您的變更。
    • 位置： 對於黏貼式橫幅 CTA，您可以選擇頂部或底部位置。對於滑入式 CTA，您可以將 CTA 置於頁面的左上方、左下方、右上方或右下方。
    • 尺寸：設定 CTA 的高度，您可以切換選項，根據 CTA 的內容自動設定高度。
    • 佈局： 設定 CTA 的佈局。您可以為 CTA 內容加入襯墊。您也可以切換選項以啟用回應式版面。有了反應式版面，您 CTA 的欄位在小螢幕上會垂直堆疊。
    • 樣式： 設定 CTA 的樣式，例如 CTA 的主要字型、邊框和下拉陰影。您可以在 CTA 中使用自訂字體，瞭解更多關於在 HubSpot 內容中使用自訂字體的資訊。
    • 背景：為 CTA 設定背景，您可以選擇設定背景顏色或上傳背景圖片。
    • 關閉選項：對於彈出框 CTA，您可以切換開啟選項，允許訪客在點擊彈出框以外的任何地方時關閉 CTA。關閉此選項時，訪客只能使用關閉圖示關閉 CTA。

設計 HTML CTA

建立自訂的嵌入式 HTML CTA，並套用您的自訂主題或 CSS：

1. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「行動呼籲」。
2. 在右上方，按一下建立。
3. 在頂部，按一下Embeds and Buttons 索引標籤。
4. 在左側功能表中，導覽至「進階」。然後選擇嵌入式 HTML。
5. 在左側面板中，按一下連結至下拉式功能表，然後選擇 CTA 重定向至的選項：
   • 電子郵件地址： 建立 mailto 連結。若要在新頁面中開啟此連結，請選取 在新索引標籤中開啟連結核取方塊。
   • 檔案下載： 將您的 CTA 連結至檔案管理器中的檔案。選擇現有檔案或上傳新檔案，然後選擇在新標籤中開啟連結 核取方塊，如果您希望按一下按鈕 CTA 的訪客在新的瀏覽器視窗中檢視圖片。
   • 會議連結：將您的 CTA 連結至 HubSpot 會議連結。按一下Choose a meeting link（選擇會議連結）下拉選項，然後選擇會議 連結。若要在新頁面中開啟此連結，請選取「 在新標籤頁開啟連結」核取方塊。
   • 您的其中一個頁面：將您的 CTA 連結到您的其中一個 HubSpot 頁面或部落格文章。按一下「頁面」下拉選單，然後選擇頁面或文章。按鈕 CTA 的連結將與頁面 ID 綁定，頁面 URL 的任何變更都會自動更新按鈕 CTA 的連結。若要在新頁面中開啟此連結，請選取 在新索引標籤中開啟連結核取方塊。
   • URL：將您的 CTA 連結到 HubSpot 以外的外部頁面。在連結 URL 欄位中，輸入您要引導訪客前往的網站 URL。若要在新頁面中開啟此連結，請選擇「 在新標籤頁中開啟連結」核取方塊。
   • CTA：使用自訂 CTA 觸發黏貼橫幅、彈出框或滑入式 CTA。
6. 在「按鈕內容」欄位中，輸入您的CTA 文字。
   

7. 若要進一步自訂 CTA 的設計，請按一下進階
8. 在進階頁 面中，您可以新增自訂 CSS 類別或規則：
   • 自訂 CSS 類別： 為您的 CTA 輸入自訂類別。使用自訂類別可在您網站上的多個 CTA 中套用設計樣式，例如字型系列。任何自訂 CSS 類別都應該包含在您 HubSpot 頁面使用的 CSS 樣式表中。
   • 自訂 CSS 規則： 新增自訂規則，以套用 CTA 的特定內嵌樣式。
     • 若要新增 CSS 規則，請按一下 新增一個或+ 新增，然後在 設定您的選擇器和樣式。
       • 選擇器： 輸入 CSS 選擇器。此值是可選的，並將與 CTA 的選擇器結合。例如，如果輸入的選擇符是:hover ，則合併後的選擇符會變成${ctaSelector}:hover
       • 樣式： 輸入自訂 CSS樣式 規則，以套用至已設定的選擇器。您可以輸入樣式而不輸入選擇器。例如，color: yellow; 。
         
         

9. 若要編輯現有的 CSS 規則，請將滑鼠懸停在該規則上，然後按一下edit 編輯圖示。
10. 若要複製 CSS 規則，請將滑鼠懸停在規則上，然後按一下duplicate 複製圖示。
11. 若要管理 CSS 規則的優先順序，請按一下並拖曳每條 規則，以排列優先順序。
12. 若要移除 CSS 規則，請將滑鼠懸停在該規則上，然後按一下delete 刪除圖示。
13. 若要在 CTA 上套用與傳統 CTA 相同的 HTML 和類別，請選取使用傳統標記核取方塊。如果您在頁面上有 CSS 樣式表為傳統 CTA 設定樣式，選擇此核取方塊將允許 HTML CTA 採用相同的樣式。
14. 要完成 CTA 設計的設定，請按一下「儲存與套用」。
    

自訂黏貼橫幅、彈出框或滑入式 CTA 的顯示位置和時間

1. 要在訪客瀏覽特定網站 URL 時，在網站 URL 區段顯示 CTA：
   • 按一下第一個下拉式功能表 ，然後選擇網站 URL。
   • 按一下第二個下拉式功能表 ，然後選擇目標定位規則。
   • 在文字欄位中輸入您的規則條件。
2. 要在訪客進入 URL 包含特定查詢參數的網站頁面時顯示 CTA：
   • 按一下第一個下拉式功能表 ，然後選擇查詢參數。
   • 在第一個文字欄位中輸入 查詢參數名稱。
   • 按一下第二個下拉式功能表，然後選擇目標定位規則。
   • 在第二個文字欄位中，輸入查詢參數值。
3. 若要新增其他規則，請按一下新增規則。
4. 若要從某些頁面排除行動呼叫，請按一下 新增排除規則。例如，您可能想要為隱私權政策頁面新增排除規則。

1. 在Who will it be shown to (顯示給誰 ) 區段中，設定 CTA 的受眾。您可以從下列項目中選擇：
   • 所有訪客： CTA 會顯示給所有訪客。
   • 篩選訪客： CTA 只會顯示給指定的訪客
2. 在顯示 頻率部分，設定 CTA 的顯示頻率。按一下再次顯示下拉式功能表，並從下列項目中選擇：
   • 設定時間段：CTA 會在指定時間後再次顯示。
   • 重複顯示： 當訪客瀏覽到選取的網頁並執行觸發動作時，CTA 會在每次出現，即使他們之前已經與 CTA 互動過。
   • 不再顯示：永遠不再向同一訪客顯示 CTA。
     
     

自訂 CTA 選項

在「選項 」標籤上，自訂不同的 CTA 選項，例如是否在小尺寸上顯示 CTA、任何相關的廣告系列，以及 CTA 的排程。

1. 在頂端，按一下選項 索引標籤。
2. 對於黏性橫幅、彈出框或滑入式 CTA，您可以在小尺寸螢幕上隱藏 CTA。在「小螢幕尺寸」部分，選取「在小螢幕尺寸上關閉」核取方塊。
3. 如果您有Marketing HubProfessional 或 Enterprise訂閱，您可以將 CTA 與活動相關聯：
   • 若要將您的 CTA 與現有的廣告系列關聯，請按一下廣告系列下拉式功能表，然後選擇一個廣告系列。
   • 若要將您的 CTA 與新的廣告系列關聯，請按一下廣告系列下拉式功能表，然後按一下建立廣告系列。然後繼續設定您的廣告系列。
   • 如果您從未建立過廣告系列，請按一下建立廣告系列。然後繼續設定您的廣告系列。
4. 設定追蹤 CTA 點擊的方式。從下列選項中選取：
   • 透過重定向追蹤點擊： 透過將瀏覽者導向初始 URL 來追蹤 CTA 的點擊，初始 URL 會將點擊與 CTA 相關聯，然後再將瀏覽者重定向至最終網頁。預設選取此選項。
   • 透過瀏覽器追蹤點擊：透過訪客的瀏覽器以非同步方式追蹤點擊。此選項允許您使用錨標籤，因為沒有重定向，CTA 會將訪客引導至設定的 URL。
5. 對於黏貼橫幅、彈出框或滑入式 CTA，您可以排定 CTA 的顯示時間：
   
   • 若要排定 CTA 開始顯示的時間，請切換Schedule for later開關。然後選擇開始日期和時間。
   • 若要排定 CTA 停止顯示的時間，請切換「設定不發佈日期和時間 」開關。然後選擇結束日期 和時間。
     
     

發佈您的 CTA

完成 CTA 設定後，請發佈您的 CTA 使其生效。

1. 在右上方，按一下檢閱並發佈。
2. 在右側面板中，檢閱您的 CTA，然後按一下立即發佈。CTA 將自動發佈到目標頁面。