建立行動呼籲 (CTA)

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

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

在行動裝置上，您可在CTA 選項中選擇啟用響應式佈局，或在小螢幕上隱藏 CTA。發佈 CTA 後，請瞭解如何為您的 CTA建立A/B 測試並 分析其表現。 

設計 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 的佈局，請將游標懸停在模組 上，然後 點擊並拖曳至新位置。
  • 若要複製模組，請將游標懸停在模組上，然後點擊複製/克隆圖示。
  • 若要刪除模組，請將游標懸停在模組上，然後點擊刪除圖示。 
     

. 

• • 若要編輯模組，請點擊該模組。
    • 在左側面板中，您可以編輯模組的內容與設計。
    • 若要在訪客提交表單後關閉彈出式 CTA，請在自訂表單模組時，開啟「提交後關閉」開關 。 
       

7. 在左側面板中，點擊「內容」標籤頁 以管理您的模組。 
   • 若要編輯模組，請點擊該模組的名稱 。在左側面板中，您可以編輯模組的內容與設計。在富文本模組中 ，您可以使用AI 助手來建立或精修您的 CTA 內容。 
   • 若要刪除模組，請將滑鼠懸停在模組上，然後點擊刪除圖示。 
8. 在左側面板中，點擊「設計」標籤頁以自訂並預覽您的 CTA。
   • 若要在特定頁面預覽您的 CTA，請點擊右上角的「預覽」。接著，點擊「在特定頁面預覽」下拉式選單，並選擇要預覽 CTA 的HubSpot 頁面。 

• • 若要自訂 CTA 的外觀，請選擇以下其中一個選項，然後在左側面板中設定您的變更。 
    • 位置：對於 固定橫幅型CTA，您可以選擇頂部或底部位置。對於滑入式CTA，您可以將CTA定位在頁面的左上角、左下角、右上角或右下角。建議每頁僅使用一個滑入式CTA。使用多個滑入式CTA可能會導致衝突，並導致CTA無法顯示。
    • 尺寸設定：設定CTA的高度，您可以開啟此選項，讓系統根據CTA內容自動調整高度。若未選取此選項，視您的設計而定，CTA上有時會出現捲動列。 
    • 版面配置：設定您的 CTA 版面配置。您可以為 CTA 內容新增內距。您也可以開啟選項以啟用響應式版面配置。啟用響應式版面配置後，CTA 的欄位將在小螢幕上垂直堆疊。
    • 樣式：設定 CTA 的樣式，例如主要字型、邊框及 CTA 的陰影效果。您可以在 CTA 中使用自訂字型，進一步了解如何在 HubSpot 內容中使用自訂字型。 
    • 背景：設定 CTA 的背景，您可以選擇設定背景顏色或上傳背景圖片。
    • 關閉選項：針對彈出視窗型 CTA，您可以開啟此選項，讓訪客在點擊彈出視窗外的任何位置時，即可關閉 CTA。若此選項關閉，訪客只能透過關閉圖示來關閉 CTA。 

設計 HTML 行動呼籲

若要建立自訂的嵌入式 HTML 行動呼籲並套用自訂主題或 CSS：

1. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「行動呼籲」。
2. 在右上角，點擊「建立」。
3. 在頂部，點擊「嵌入與按鈕」標籤頁。
4. 在左側邊欄選單中，導航至「進階」。接著，選擇「嵌入式 HTML」。
5. 在左側面板中，點擊「連結至」下拉式選單，並選擇您希望行動呼籲（CTA）跳轉的目標：
   • 電子郵件地址：建立 mailto 連結。若要在新頁中開啟此連結，請勾選「 在新分頁中開啟連結」核取方塊。 
   • 檔案下載：將 您的 CTA連結 至檔案管理員中的檔案。選擇現有檔案或上傳新檔案，若希望點擊按鈕的訪客能在新瀏覽器視窗中檢視圖片，請勾選「在新分頁中開啟連結」核取方塊 。 
   • 會議連結：將您的 CTA 連結至 HubSpot 會議連結。點擊「選擇會議連結」下拉式選單，然後選取一個會議連結。若要在新頁面中開啟此連結，請勾選「 在新分頁中開啟連結」核取方塊。 
   • 您的其中一個頁面：將您的 CTA 連結至您的 HubSpot 頁面或部落格文章。點擊「頁面」下拉式選單，然後選取一個 頁面或文章。CTA 按鈕的連結將與該頁面的 ID 綁定，且頁面 URL 的任何變更都會自動更新 CTA 按鈕的連結。若要在新頁面中開啟此連結，請勾選「 在新分頁中開啟連結」核取方塊。 
   • 網址：將您的 CTA 連結至 HubSpot 外部的頁面。在「連結網址」欄位中，輸入您要引導訪客前往的網站網址。若要在新頁面中開啟此連結，請勾選「 在新分頁中開啟連結」核取方塊。 
   • 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 樣式規則，請將游標懸停在該規則上，然後點擊編輯圖示。 
10. 若要複製 CSS 規則，請將游標懸停在該規則上，然後點擊複製圖示。 
11. 若要管理 CSS 規則的優先順序，請點擊並拖曳 各條規則，以按優先順序排列。
12. 若要移除 CSS 規則，請將游標懸停在該規則上，然後點擊刪除圖示。 
13. 若要將與舊版 CTA 相同的 HTML 和類別套用至此 CTA，請勾選「使用舊版標記」核取方塊。若您的頁面中已有為舊版 CTA 設定樣式的 CSS 樣式表，勾選此核取方塊將使 HTML CTA 採用相同的樣式。 
14. 若要完成 CTA 設計的設定，請點擊「儲存並套用」。
     

自訂您的固定橫幅、彈出視窗或滑入式 CTA 的顯示位置與時機

1. 若要在訪客瀏覽特定網站網址時顯示行動呼籲（CTA），請在「網站網址」區段中：
   • 點擊第一個下拉式選單，並選擇「網站網址」。
   • 點擊第二個下拉式選單，並選擇一個 目標設定規則。
   • 在文字欄位中輸入您的規則條件。
2. 若要讓訪客瀏覽網址中包含特定查詢參數的網頁時顯示 CTA：
   • 點擊第一個下拉式選單，並選擇「查詢參數」。
   • 在第一個文字欄位中，輸入查詢參數名稱。
   • 點擊第二個下拉式選單，並選擇一個目標設定規則。
   • 在第二個文字欄位中，輸入查詢參數的值。
3. 若要新增另一條規則，請點擊「新增規則」。
4. 若要排除特定頁面的行動呼籲，請點擊「新增排除規則」。例如，您可能希望針對隱私權政策頁面新增排除規則。

1. 在「將顯示給誰」區段中 ，設定您的行動呼籲（CTA）受眾。您可以從以下選項中選擇：
   • 所有訪客： CTA 將顯示給所有訪客。 
   • 篩選後的訪客： CTA 僅會顯示給指定的訪客
2. 在「顯示頻率」區段中 ，設定您的 CTA顯示頻率 。點擊「再次顯示」下拉式選單，並從以下選項中選擇：
   • 經過設定時間後：CTA 將在指定時間過後再次顯示。 
   • 重複顯示： 當訪客瀏覽至選定的網頁並執行觸發動作時，CTA 將會每次顯示，即使他們先前已與其互動過。
   • 不再顯示：永遠不會再次向同一位訪客顯示該 CTA。 
     
     

自訂您的 CTA 選項

在「選項 」分頁中 ，自訂各種 CTA 設定，例如是否在小尺寸裝置上顯示 CTA、相關活動，以及 CTA 的排程。 

1. 在頂部，點擊「選項」標籤 。
2. 對於固定橫幅、彈出視窗或滑入式 CTA，您可以在小螢幕尺寸下隱藏該 CTA。在「小螢幕尺寸」區段中，選取「在小螢幕尺寸下關閉」核取方塊。
3. 若您擁有Marketing HubProfessional 或 Enterprise訂閱方案，可將 CTA 與活動關聯：
   • 若要將您的 CTA 與現有活動關聯，請點擊「活動」下拉式選單並選擇一個活動。
   • 若要將您的 CTA 與新活動關聯，請點擊「活動」下拉式選單，然後點擊「建立活動」。接著，繼續設定您的活動。 
   • 如果您從未建立過活動，請點擊「建立活動」。接著，繼續設定您的活動。 
4. 設定您希望如何追蹤 CTA 的點擊。請從以下選項中選擇： 
   • 透過重定向追蹤點擊：先將訪客導向初始網址（該網址會將點擊與 CTA 建立關聯），再將其重定向至最終頁面，藉此追蹤點擊至您的 CTA。此選項預設為選取狀態。
   • 透過瀏覽器追蹤點擊：透過訪客的瀏覽器以非同步方式追蹤點擊。此選項允許您使用錨點標籤，因為沒有重定向，CTA 會直接將訪客導向設定的網址。 
5. 對於固定橫幅、彈出視窗或滑入式 CTA，您可以排程設定 CTA 的顯示時間：
   
   • 若要排程CTA開始顯示的時間，請開啟「排程稍後顯示」開關。接著，選擇開始日期與時間。 
   • 若要設定 CTA 停止顯示的時間，請開啟「設定下線日期與時間」開關 。接著，選擇結束日期與 時間。 
     
     

發佈您的CTA 

完成 CTA 的設定後，請發布您的 CTA 以使其上線。 

1. 在右上角，點擊「檢視並發佈」。
2. 在右側面板中檢視您的 CTA，然後點擊「立即發佈」。該 CTA 將自動發佈至目標頁面。