知識庫

建立點擊的元素事件

作者:HubSpot Support | Nov 21, 2022 12:34:09 PM

當匿名訪客或HubSpot聯絡人點擊網站上的特定元素時,點擊的元素事件會追蹤。 例如,追蹤何時點擊免費演示CTA或PDF下載連結。 單擊的元素事件只能在已安裝HubSpot追蹤代碼的頁面上建立和追蹤

請注意:

  • 本文中的說明適用於新的自訂行為事件工具,它取代了先前的行為事件工具。 任何在傳統工具中建立的事件都將繼續工作,您仍然可以在傳統工具中管理和分析這些事件
  • 無法將舊事件遷移到新的事件工具。 相反,建議在新工具中重新創建傳統活動,因為新的自訂活動可為活動內容提供更多彈性。 例如,使用傳統活動時,你需要建立多個活動來追蹤單一的活動,但現在單一的自訂行為活動可以追蹤多個活動。

點擊的元素事件可以通過兩種方式建立:

建立活動後,請瞭解如何在分析和報告工具中分析活動。 您也可以建立訪問的網址活動 和自訂活動

使用Chrome擴展程序建立已按鈕的元素活動

安裝活動Chrome擴展程序

  • 在左側邊欄選單中,瀏覽至追蹤和分析>  追蹤代碼
  • 按一下安裝活動Chrome擴展程序
  • 按一下下載
  • 系統會將你重定向到Google Chrome網路商店中的HubSpot Analytics (分析)擴展程序。 按一下右上角的[新增至Chrome]。

  • 在「」對話方塊中,按一下新增擴展程序
  • 擴展程序安裝完畢後,它會顯示在您的Chrome瀏覽器工具列中的橙色飛圖示飛輪。

使用活動Chrome擴展程序建立活動

  • 導航至已安裝HubSpot追蹤代碼的網頁。
  • 在Chrome瀏覽器工具列中,按一下動 輪動輪圖示
  • 在「」對話方塊中,選擇按一下的元素。 

  • 按一下「下一步」。然後,您可以在網頁上選擇要追蹤的元素。
  • 按一下頁面上的元素以建立已按一下的元素事件。 在以下示例中,點擊的元素事件將追蹤關鍵方面連結的點擊。

  • 在對話方塊中,元素的CSS選擇器將自動生成。 輸入活動 的名稱 ,然後按一下建立活動

請注意根據網站HTML和CSS標記的複雜性, Chrome活動擴展程序可能無法偵測元素的獨特CSS選擇器。 在這種情況下,您應該手動創建活動,或向元素添加獨特的ID標籤

  • 成功建立活動 後,系統會顯示確認訊息。 按一下HubSpot中的檢視活動,即可在活動控制面板中檢視新點擊的元素活動。

然後, HubSpot會開始跟蹤元素。 了解如何在HubSpot中分析事件

使用ID、類別或jQuery選擇器手動創建活動

  • 按一下自訂行為 活動
  • 按一下右上角的「建立活動
  • 在右側面板中,輸入活動的名稱然後選擇按一下的元素。 

  • 按一下下一步
  • 選擇如何識別頁面上被單擊的元素。 進一步了解如何在網站頁面上查找識別碼
    • HTML ID :輸入要追蹤的元素的ID。 例如,如果您的點擊元素已設定< button id = "log-in" > ,您將輸入入。
    • HTML類別:輸入要追蹤的元素的別。 例如,如果您的點擊元素設置為< button class = "bigCTA" > ,您將輸入bigCTA
    • jQuery選擇器:輸入要追蹤的元素的jQuery選擇器
       
  • 按一下下一步
  • 預設情況下,點擊的元素將會在所有頁面上跟蹤,並安裝HubSpot追蹤代碼。 若要僅追蹤元素在特定網頁上的點擊,請選擇特定網頁,然後輸入網頁網址。
  • 按一下儲存

創建活動後, HubSpot將開始追蹤元素。 了解如何在HubSpot中分析事件

了解和取回元素選擇器

您可以透過其HTML ID、HTML類別或使用jQuery選擇器來識別元素。

身份證明文件

要查找和使用元素的ID :

  • 使用滑鼠右鍵按一下您要瞄準的元素的網頁,然後選擇 檢視網頁來源 檢查
  • 點擊元素。您應該可以在代碼行中看到ID屬性(例如, id = "unique-element-name" )。
  • 複製ID值並將其貼上(例如,此處是unique-element-name ) HTML ID 欄位中,而不使用引用標記。 例如,對於包含id = "get-started-marketing-hub"的元素,您可以在欄位輸入get-started-marketing-hub。
 

Class

點擊的元素事件可以透過其類屬性來識別元素。 

請注意:

  • 當網頁上的多個元素共享同一類別時,只有網頁上的第一個元素才會計入事件完成次數。 因此,只有在網頁上沒有其他元素共享類時,才應使用類作為識別碼。 如果元素沒有獨特的類別,建議改用ID。
  • 如果您無法更新元素的源代碼以新增獨特的類別或ID ,建議使用Chrome擴展程序來設定活動,因為HubSpot會指定更具特定性的識別碼。

 

要尋找元素的類別,並將其用於活動:

  • 使用滑鼠右鍵按一下您要瞄準的元素的網頁,然後選擇檢視網頁來源檢查
  • 按一下元素。您應該可以在代碼行中看到class屬性(例如class = "unique-element-name" )。
  • 複製類別值並貼到HTML類別欄位中,不含引號。  例如,對於包含到 字段中的元素。
    • 當元素有多個類時,您可以使用其任何類作為目標。 例如,如果元素包含class = "cta--primary cta -- medium homepage-sales" ,您可以在HTML Class 欄位中輸入cta --primary、cta -- medium或homepage-sales。 但是,請確保沒有其他元素共用該類別。
    • 加入多個類時,請使用以下格式: class1.class2.class3

jQuery選擇器

您也可以使用完整的jQuery選擇器來定位元素。 如果您要瞄準的元素沒有ID或類別,或者您需要更具體,這很有用。

例如,您想使用jQuery選擇器為以下元素建立點擊的元素事件:

< a id = "get-started-marketing-hub" class = "cta--primary" href = "https://www.hubspot.com/products/marketing/get-started" aria-label = "開始使用Marketing Hub" >開始</a >

您可以透過在jQuery選擇器欄位中輸入以下內容,而不是使用元素的ID或類,使用jQuery選擇器來瞄準元素的人財產屬性:

[href = 'https://www.hubspot.com/products/marketing/get-started']

進一步了解 支援的選擇器