整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
：想了解input和label請參看我寫的文【207】點我進入【207】
一、button。
<button>是按鈕標簽，<input type="button" />也是按鈕標簽，它們之間的區(qū)別就是button更加強大，它除了可以包含文本之外，還可以包含格式化的文本和圖像，這就是它的強大所在，下面展示它的圖片按鈕功能，當(dāng)然我畫的按鈕很丑，別介意。
圖1
圖2
這里隨便講講button標簽的四個常用屬性。
圖3
圖4
圖5
二、select。
select是列表和下拉菜單，select不能一個人戰(zhàn)斗，它需要option的配合。
圖6
圖7
disable是禁用的意思。
圖8
圖9
optgroup可以對option進行分組。
圖10
圖11
selected初始被選中的項，開始時默認選中菠蘿。
圖12
圖13
鈕點擊追蹤可能是網(wǎng)站運營中最常見的需求之一。現(xiàn)在，通過GA4 和 Google 跟蹤代碼管理器(GTM)的配合，我們可以輕易實現(xiàn)追蹤，甚至可以導(dǎo)入到google ads，輔助廣告優(yōu)化。
具體實現(xiàn)方法有很多，本文主要介紹使用GTM的方法。
首先，我們需要創(chuàng)建一個觸發(fā)器，或更具體地說，創(chuàng)建一個通用點擊觸發(fā)器。這將允許 GTM 監(jiān)聽與點擊相關(guān)的事件。
在 Google 跟蹤代碼管理器中，我們可以選擇 2 個點擊觸發(fā)選項：
? All Elements
? Just links
Just links是一種常見的方式，因為許多按鈕本質(zhì)上是用戶點擊的裝飾鏈接。但是，如果您的按鈕恰好不是鏈接，您將無法獲得更多信息來跟蹤。
這就是為什么我們喜歡使用All Elements作為觸發(fā)器類型。此觸發(fā)器類型能夠偵聽任何內(nèi)容（例如圖像、文件、按鈕、空白區(qū)域等）和鏈接上發(fā)生的點擊。它只是更通用、更通用。
創(chuàng)建一個新觸發(fā)器并選擇All Elements。
現(xiàn)在，GTM 可以識別何時發(fā)生點擊，無論是鏈接點擊還是任何元素點擊。
然而，我們可能需要更多的信息，而不僅僅是知道存在點擊交互。
要獲取有關(guān)點擊的信息，請轉(zhuǎn)到 Google 跟蹤代碼管理器并啟用與點擊相關(guān)的所有內(nèi)置變量。這些變量將為我們提供所需的大部分點擊詳細信息，例如Click Text，它會顯示按鈕上的文本。
在 GTM 工作區(qū)中，選擇Variables，然后選擇Configure。
啟用所有單擊變量。
該信息將用于創(chuàng)建觸發(fā)我們的標簽的條件。
返回我們的產(chǎn)品頁面，讓我們單擊Add to Cart按鈕。（在這里，添加購物車僅僅是示例，你可以把這個方法應(yīng)用在任何按鈕）
前往 Google 跟蹤代碼管理器的調(diào)試界面。識別Summary下的Click事件并選擇它。查看之前啟用的變量向我們展示了什么信息。
這里我們需要找到足夠獨特的數(shù)據(jù)作為觸發(fā)條件。
在“調(diào)試”界面中，選擇左側(cè)面板中的Click事件，然后單擊Variables選項卡。
重點關(guān)注我們已啟用的變量（Click Classes, Click ID, Click Target, Click Text, and Click URL），盡力識別按鈕特有的數(shù)據(jù)。
通常，許多按鈕都是構(gòu)建為鏈接的，這意味著您的 Click URL 變量值很有可能顯示鏈接。您可以將其用于您的觸發(fā)條件。
但是，很多時候并非所有維度的數(shù)據(jù)都齊全。在我們的示例中，Click URL沒有值，這時我們可以使用另外兩條信息：
? Click Classes，值為：single_add_to_cart_button button alt
? Click Text，值為： Add to cart
需要注意的是，Click Classes和Click Text很有可能不是唯一值，該方法只適用于追蹤網(wǎng)站所有同類按鈕。
如果我們僅僅只需要追蹤與 Ninja 產(chǎn)品的添加到購物車按鈕，怎樣才能做到這一點呢？
首先，我們需要確保該按鈕是唯一的，并且在整個網(wǎng)站中不會重復(fù)。
為此，我們將使用 Chrome 開發(fā)人員工具。如果您不熟悉，只需按照以下步驟操作即可。
右鍵單擊您的按鈕并選擇檢查。
這將使您能夠訪問瀏覽器的開發(fā)人員工具來查看按鈕的 HTML 和 CSS 源代碼。
單擊鍵盤上的CTRL + F來過濾 HTML 文檔。
復(fù)制并粘貼該類并將其粘貼到過濾器中。我們將復(fù)制粘貼single_add_to_cart_button 按鈕 alt。
過濾器將顯示您的網(wǎng)站上存在多少個此類。
如果過濾器結(jié)果是1 of 1 ，這意味著該按鈕的類僅有唯一一項。使用與此按鈕相關(guān)的 GTM 點擊類只會跟蹤此按鈕，而不會跟蹤另一個按鈕。
如果結(jié)果超過 1 個，而您只想追蹤特定按鍵，不是同類的所有按鍵，則需要進一步過濾。
解決方案是在觸發(fā)器中添加頁面 URL ，以僅跟蹤位于 Flying Ninja 海報所在位置的“添加到購物車”按鈕。
讓我們回到All Elements觸發(fā)器。
默認情況下，我們的觸發(fā)器會幫助我們檢測所有用戶點擊。我們需要從All Clicks切換為Some Clicks。
接下來是觸發(fā)條件的設(shè)置，在我們的例子中是：Click Classes → contains → single_add_to_cart_button
重命名您的觸發(fā)器并保存。
首先，我們創(chuàng)建一個新的 GA4 事件代碼。 Tag Type選擇Google Analytics: GA4 Event，再根據(jù)GA4的衡量ID對應(yīng)選擇Configuration Tag。如果沒有預(yù)設(shè)的Tag，則選擇None - Manually Set ID，再手動填入衡量ID即可。
然后我們需要命名我們的事件。建議button_click。遵從Google 的命名規(guī)則的最佳實踐是小寫字母加下劃線。
此外，最好不要發(fā)明名稱，而應(yīng)該首先查看 Google 跟蹤的內(nèi)容。增強測量中會跟蹤點擊次數(shù)，但沒有任何特定于按鈕點擊的內(nèi)容。他們將事件命名為Click，我們也可以使用它。
此時，我們可以像這樣將事件發(fā)送到 GA4。
但是，我們希望向 GA4 發(fā)送有關(guān)此次點擊的更多詳細信息，因此我們將使用事件參數(shù)。
按鈕的文本和頁面位置對我們很有價值，因此我們將添加 2 個自定義參數(shù)。
我們的設(shè)置如下所示。
? 注意：我們討論的命名事件的方法與命名事件參數(shù)的方法相同。建議使用推薦事件或增強測量列表中任何適合您需求的事件。如果您選擇為事件參數(shù)使用自定義名稱，并且想要在 GA4 報告（自定義維度）中使用，則參數(shù)的數(shù)量將被限制為 50 個。
Google 的推薦事件和增強型測量沒有與按鈕文本相關(guān)的參數(shù)。我們能找到的最接近的是link_text。link_text參數(shù)用于文件下載 。
你也可以自定義Parameter Name。例如，button_text，甚至click_text。
由于目標是顯示按鈕文本的值，因此我們可以從之前啟用的Click Text變量中獲取值。
選擇Click Text。
如果我們還想知道按鈕所在的頁面。只需重復(fù)上述過程并在Value下選擇Page頁面 URL即可。
添加我們之前創(chuàng)建的所有觸發(fā)器。
保存您的標簽。
啟用Preview模式并單擊Add to cart按鈕。
您可以看到我們的標簽已觸發(fā)。
在 GA4 的 DebugView 中，您將看到即將發(fā)生的事件。
在參數(shù)旁邊，您可以看到我們的link_text和page_location事件參數(shù)及其值。
至此，事件創(chuàng)建已經(jīng)完成。最多不超過48小時，我們就可以在GA4的事件中找到它，也可以用它創(chuàng)建轉(zhuǎn)化和受眾。
?大家好，我是為廣大程序員兄弟操碎了心的小編，每天推薦一個小工具/源碼，裝滿你的收藏夾，每天分享一個小技巧，讓你輕松節(jié)省開發(fā)效率，實現(xiàn)不加班不熬夜不掉頭發(fā)，是我的目標！
??今天小編推薦一款Web上的按鈕庫Buttons，Buttons是一個高度可定制的、免費并且開源的按鈕CSS樣式庫。
??本期就分享到這里，我是小編南風(fēng)吹，專注分享好玩有趣、新奇、實用的開源項目及開發(fā)者工具、學(xué)習(xí)資源！希望能與大家共同學(xué)習(xí)交流。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
