使用嵌入代碼嵌入內容

使用內容嵌入功能，您可以在HubSpot中建立內容區段，然後將其嵌入到您的網站中。 若要將內容嵌入外部網站頁面，你可以使用WordPress Gutenberg編輯器的內容嵌入外掛程式，或直接在HubSpot中複製嵌入程式碼。

在下方深入瞭解如何複製內容嵌入程式碼，以及維持頁面累積版面配置偏移(CLS)分數的最佳做法。

請注意：嵌入式內容不是透過iframe載入，而是透過JavaScript注入。 搜尋引擎可以執行JavaScript並拾取嵌入式內容，從而避免iframe可能出現的任何SEO挑戰。

複製嵌入代碼

若要複製內容嵌入區段的嵌入程式碼：

• 在你的 HubSpot 帳戶中，瀏覽「內容」>「內嵌」。
• 將遊標懸停在嵌入物上，然後按一下「更多」，然後選取「取得嵌入程式碼
  
  
• 在對話框中，單擊複製以複製嵌入代碼。

然後，您可以根據需要將嵌入代碼貼到外部內容中。 貼上嵌入程式碼時，請記住以下幾點：

• 內容嵌入從其嵌入的頁面接收其樣式，而不是從HubSpot接收。 若要調整內容嵌入的外觀，您需要更新頁面的CSS。 如果你使用WordPress ，請瞭解如何新增自訂CSS。
• 內容嵌入代碼不包含您的HubSpot追蹤代碼。 您需要在外部頁面上單獨安裝追蹤程式碼，才能利用HubSpot功能，例如流量分析和 私人同意橫幅。
• 若要透過嵌入程式碼嵌入內容， HubSpot會透過預設的hs-sites網域頁尾插hs-sites入內容嵌入。 這有助於保留特定網域的頁腳。 但是， hs-sites頁腳中包含的任何hs-sites內容都將與內容嵌入一起插入到外部頁面上。 例如，如果您在hs-sites網域頁尾中有版權免hs-sites責聲明，則版權會顯示在內嵌內容的外部頁面上。 瞭解如何修改特定網域頁腳中的內容。
  
  

了解嵌入內容的最佳做法

根據您使用嵌入程式碼的方式，內容可能會影響頁面的累計版面配置偏移(CLS)分數，該分數衡量頁面內容在載入時在訪客檢視區中的移動程度。 有兩個因素會影響您的CLS分數：

• 嵌入的位置，包括它是在折疊的上方還是下方，以及腳本嵌入的位置。
• 嵌入的高度，與內容嵌入中包含的模組直接相關。 包含的模組越多，頁面佈局可能會隨著內容載入而變動得越多。

如果您在嵌入內容後發現CLS分數受到負面影響，請查看以下最佳做法部分，瞭解可能的解決方案。

嵌入在折疊下方

在可能的情況下，內容應嵌入在頁面的折疊下方。 這是因為CLS分數適用於折疊以上的內容，因為這通常是訪客在初始頁面加載時看到的內容。 在折疊下方嵌入內容將減少由內容嵌入引起的任何初始佈局變化，從而改善用戶體驗並減輕負面的CLS分數。

更改嵌入腳本位置

預設情況下，內容嵌入代碼在其中包含嵌入腳本（下方第2行）。

在外部頁面上嵌入內容時，建議將嵌入腳本移動到頁面的 ，而不是嵌入創建腳本的旁邊。

設定最小高度

內容嵌入容器的高度會影響載入時容器周圍的內容移動程度。 容器的高度取決於所包含的模組和內容—嵌入內容越多，頁面移動就越多。 

因此，如果您要在折疊上方嵌入內容，建議您在嵌入容器容器中包含內嵌的最min-heightCSS規則，以設定嵌入的最小高度。

如果您要將內容嵌入外部內容管理系統，則可以在外部頁面編輯器中使用佈局選項來更新嵌入高度。 否則，您可以手動將此樣式新增到內嵌內容的頂層

請注意：如果您按頁面自訂內嵌內容，則可能需要更新每個頁面的最小高度規則，以便內容正確顯示。

若要尋找最小高度，您可以檢查內容嵌入的頁面。 對於HubSpot頁面，您可以使用頁面預覽功能在發佈頁面之前找到最小高度。 深入瞭解如何在WordPress中預覽內容。 

檢視內嵌內容的頁面時：

• 使用鼠標右鍵單擊內容嵌入，然後選擇檢查。
• 在Inspector面板中，將遊標懸停在內嵌內容的頂層 上。
• 要查看計算的高度，某些瀏覽器將在懸停時顯示容器的高度，或者您可以單擊開發人員工具抽屜中的計算選項卡並查找高度屬性。