整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          網頁前端開發中常用的html控件(二)button和

          網頁前端開發中常用的html控件(二)button和select「208」

          :想了解input和label請參看我寫的文【207】點我進入【207】

          一、button。

          <button>是按鈕標簽,<input type="button" />也是按鈕標簽,它們之間的區別就是button更加強大,它除了可以包含文本之外,還可以包含格式化的文本和圖像,這就是它的強大所在,下面展示它的圖片按鈕功能,當然我畫的按鈕很丑,別介意。

          圖1

          圖2

          這里隨便講講button標簽的四個常用屬性。

          1. disabled禁用按鈕
          2. name指定按鈕名稱
          3. type按鈕類型,屬性值有button,reset,submit三個
          4. value按鈕的初始值

          圖3

          圖4

          圖5

          二、select。

          select是列表和下拉菜單,select不能一個人戰斗,它需要option的配合。

          圖6

          圖7

          disable是禁用的意思。

          圖8

          圖9

          optgroup可以對option進行分組。

          圖10

          圖11

          selected初始被選中的項,開始時默認選中菠蘿。

          圖12

          圖13

          鈕點擊追蹤可能是網站運營中最常見的需求之一。現在,通過GA4 和 Google 跟蹤代碼管理器(GTM)的配合,我們可以輕易實現追蹤,甚至可以導入到google ads,輔助廣告優化。

          具體實現方法有很多,本文主要介紹使用GTM的方法。

          1、獲取盡可能多的關于按鈕的信息

          首先,我們需要創建一個觸發器,或更具體地說,創建一個通用點擊觸發器。這將允許 GTM 監聽與點擊相關的事件。

          在 Google 跟蹤代碼管理器中,我們可以選擇 2 個點擊觸發選項:

          ? All Elements

          ? Just links

          Just links是一種常見的方式,因為許多按鈕本質上是用戶點擊的裝飾鏈接。但是,如果您的按鈕恰好不是鏈接,您將無法獲得更多信息來跟蹤。

          這就是為什么我們喜歡使用All Elements作為觸發器類型。此觸發器類型能夠偵聽任何內容(例如圖像、文件、按鈕、空白區域等)和鏈接上發生的點擊。它只是更通用、更通用。

          創建一個新觸發器并選擇All Elements

          現在,GTM 可以識別何時發生點擊,無論是鏈接點擊還是任何元素點擊。

          然而,我們可能需要更多的信息,而不僅僅是知道存在點擊交互。

          要獲取有關點擊的信息,請轉到 Google 跟蹤代碼管理器并啟用與點擊相關的所有內置變量。這些變量將為我們提供所需的大部分點擊詳細信息,例如Click Text,它會顯示按鈕上的文本。

          在 GTM 工作區中,選擇Variables,然后選擇Configure。

          啟用所有單擊變量。

          該信息將用于創建觸發我們的標簽的條件。

          返回我們的產品頁面,讓我們單擊Add to Cart按鈕。(在這里,添加購物車僅僅是示例,你可以把這個方法應用在任何按鈕)

          前往 Google 跟蹤代碼管理器的調試界面。識別Summary下的Click事件并選擇它。查看之前啟用的變量向我們展示了什么信息。

          這里我們需要找到足夠獨特的數據作為觸發條件。

          2、找到獨特且可靠的數據

          在“調試”界面中,選擇左側面板中的Click事件,然后單擊Variables選項卡。

          重點關注我們已啟用的變量(Click Classes, Click ID, Click Target, Click Text, and Click URL),盡力識別按鈕特有的數據。

          通常,許多按鈕都是構建為鏈接的,這意味著您的 Click URL 變量值很有可能顯示鏈接。您可以將其用于您的觸發條件。

          但是,很多時候并非所有維度的數據都齊全。在我們的示例中,Click URL沒有值,這時我們可以使用另外兩條信息:

          ? Click Classes,值為:single_add_to_cart_button button alt

          ? Click Text,值為: Add to cart

          需要注意的是,Click ClassesClick Text很有可能不是唯一值,該方法只適用于追蹤網站所有同類按鈕。

          如果我們僅僅只需要追蹤與 Ninja 產品的添加到購物車按鈕,怎樣才能做到這一點呢?

          首先,我們需要確保該按鈕是唯一的,并且在整個網站中不會重復。

          為此,我們將使用 Chrome 開發人員工具。如果您不熟悉,只需按照以下步驟操作即可。

          右鍵單擊您的按鈕并選擇檢查。

          這將使您能夠訪問瀏覽器的開發人員工具來查看按鈕的 HTML 和 CSS 源代碼。

          單擊鍵盤上的CTRL + F來過濾 HTML 文檔。

          復制并粘貼該類并將其粘貼到過濾器中。我們將復制粘貼single_add_to_cart_button 按鈕 alt

          過濾器將顯示您的網站上存在多少個此類。

          如果過濾器結果是1 of 1 ,這意味著該按鈕的類僅有唯一一項。使用與此按鈕相關的 GTM 點擊類只會跟蹤此按鈕,而不會跟蹤另一個按鈕。

          如果結果超過 1 個,而您只想追蹤特定按鍵,不是同類的所有按鍵,則需要進一步過濾。

          解決方案是在觸發器中添加頁面 URL ,以僅跟蹤位于 Flying Ninja 海報所在位置的“添加到購物車”按鈕。

          3、設置觸發器

          讓我們回到All Elements觸發器。

          默認情況下,我們的觸發器會幫助我們檢測所有用戶點擊。我們需要從All Clicks切換為Some Clicks

          接下來是觸發條件的設置,在我們的例子中是:Click Classes → contains → single_add_to_cart_button

          重命名您的觸發器并保存。

          4、創建標簽

          首先,我們創建一個新的 GA4 事件代碼。 Tag Type選擇Google Analytics: GA4 Event,再根據GA4的衡量ID對應選擇Configuration Tag。如果沒有預設的Tag,則選擇None - Manually Set ID,再手動填入衡量ID即可。

          然后我們需要命名我們的事件。建議button_click。遵從Google 的命名規則的最佳實踐是小寫字母加下劃線。

          此外,最好不要發明名稱,而應該首先查看 Google 跟蹤的內容。增強測量中會跟蹤點擊次數,但沒有任何特定于按鈕點擊的內容。他們將事件命名為Click,我們也可以使用它。

          此時,我們可以像這樣將事件發送到 GA4。

          但是,我們希望向 GA4 發送有關此次點擊的更多詳細信息,因此我們將使用事件參數。

          按鈕的文本和頁面位置對我們很有價值,因此我們將添加 2 個自定義參數。

          我們的設置如下所示。

          ? 注意:我們討論的命名事件的方法與命名事件參數的方法相同。建議使用推薦事件或增強測量列表中任何適合您需求的事件。如果您選擇為事件參數使用自定義名稱,并且想要在 GA4 報告(自定義維度)中使用,則參數的數量將被限制為 50 個。

          Google 的推薦事件和增強型測量沒有與按鈕文本相關的參數。我們能找到的最接近的是link_text。link_text參數用于文件下載 。

          你也可以自定義Parameter Name。例如,button_text,甚至click_text。

          由于目標是顯示按鈕文本的值,因此我們可以從之前啟用的Click Text變量中獲取值。

          選擇Click Text

          如果我們還想知道按鈕所在的頁面。只需重復上述過程并在Value下選擇Page頁面 URL即可。

          添加我們之前創建的所有觸發器。

          保存您的標簽。

          啟用Preview模式并單擊Add to cart按鈕。

          您可以看到我們的標簽已觸發。

          在 GA4 的 DebugView 中,您將看到即將發生的事件。

          在參數旁邊,您可以看到我們的link_textpage_location事件參數及其值。

          至此,事件創建已經完成。最多不超過48小時,我們就可以在GA4的事件中找到它,也可以用它創建轉化和受眾。

          ?大家好,我是為廣大程序員兄弟操碎了心的小編,每天推薦一個小工具/源碼,裝滿你的收藏夾,每天分享一個小技巧,讓你輕松節省開發效率,實現不加班不熬夜不掉頭發,是我的目標!

          ??今天小編推薦一款Web上的按鈕庫ButtonsButtons是一個高度可定制的、免費并且開源的按鈕CSS樣式庫。

          效果預覽


          結尾

          ??本期就分享到這里,我是小編南風吹,專注分享好玩有趣、新奇、實用的開源項目及開發者工具、學習資源!希望能與大家共同學習交流。


          主站蜘蛛池模板: 国产精品毛片VA一区二区三区| 高清无码一区二区在线观看吞精| 日本一区二区在线播放| 精品久久久久久无码中文字幕一区| 无码精品人妻一区二区三区影院| 91福利一区二区| 国产精品亚洲一区二区三区在线| 在线观看精品一区| 亚州AV综合色区无码一区 | 午夜AV内射一区二区三区红桃视| 狠狠色成人一区二区三区| 一区二区不卡视频在线观看| 国产欧美一区二区精品仙草咪| 日韩精品一区二区三区中文| 日本在线不卡一区| 国产成人久久精品一区二区三区| 久久精品中文字幕一区| 亚洲成a人一区二区三区| 一区二区视频在线免费观看| 日韩一区二区三区视频| 性色AV 一区二区三区| 无码人妻一区二区三区精品视频 | 制服丝袜一区二区三区| 国产精品亚洲产品一区二区三区| 亚洲男人的天堂一区二区| 亚洲视频在线一区二区| 中文字幕一区二区三区在线播放| 中文日韩字幕一区在线观看| 成人区人妻精品一区二区不卡网站| 超清无码一区二区三区| 美女啪啪一区二区三区| 色狠狠一区二区三区香蕉| 天堂va在线高清一区| 中文字幕无线码一区二区| 成人H动漫精品一区二区| 国产在线观看精品一区二区三区91 | 国产精品日本一区二区不卡视频| 久久精品视频一区| 激情亚洲一区国产精品| 国产日韩精品一区二区在线观看播放 | 日韩伦理一区二区|