1,創建兩個頁面
2,在 app.module.ts 引入組件,注冊組件
3,在 tabs.ts 頁面引入組件,配置組件
4,在 tabs.html 配置底部按鈕以及圖標
1,去掉二級頁面的 tabs 菜單,找到 app.module.ts 修改下面代碼
2,修改返回按鈕,找到 app.module.ts 修改下面代碼
鈕點擊追蹤可能是網站運營中最常見的需求之一?,F在,通過GA4 和 Google 跟蹤代碼管理器(GTM)的配合,我們可以輕易實現追蹤,甚至可以導入到google ads,輔助廣告優化。
具體實現方法有很多,本文主要介紹使用GTM的方法。
首先,我們需要創建一個觸發器,或更具體地說,創建一個通用點擊觸發器。這將允許 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事件并選擇它。查看之前啟用的變量向我們展示了什么信息。
這里我們需要找到足夠獨特的數據作為觸發條件。
在“調試”界面中,選擇左側面板中的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 Classes和Click Text很有可能不是唯一值,該方法只適用于追蹤網站所有同類按鈕。
如果我們僅僅只需要追蹤與 Ninja 產品的添加到購物車按鈕,怎樣才能做到這一點呢?
首先,我們需要確保該按鈕是唯一的,并且在整個網站中不會重復。
為此,我們將使用 Chrome 開發人員工具。如果您不熟悉,只需按照以下步驟操作即可。
右鍵單擊您的按鈕并選擇檢查。
這將使您能夠訪問瀏覽器的開發人員工具來查看按鈕的 HTML 和 CSS 源代碼。
單擊鍵盤上的CTRL + F來過濾 HTML 文檔。
復制并粘貼該類并將其粘貼到過濾器中。我們將復制粘貼single_add_to_cart_button 按鈕 alt。
過濾器將顯示您的網站上存在多少個此類。
如果過濾器結果是1 of 1 ,這意味著該按鈕的類僅有唯一一項。使用與此按鈕相關的 GTM 點擊類只會跟蹤此按鈕,而不會跟蹤另一個按鈕。
如果結果超過 1 個,而您只想追蹤特定按鍵,不是同類的所有按鍵,則需要進一步過濾。
解決方案是在觸發器中添加頁面 URL ,以僅跟蹤位于 Flying Ninja 海報所在位置的“添加到購物車”按鈕。
讓我們回到All Elements觸發器。
默認情況下,我們的觸發器會幫助我們檢測所有用戶點擊。我們需要從All Clicks切換為Some Clicks。
接下來是觸發條件的設置,在我們的例子中是:Click Classes → contains → single_add_to_cart_button
重命名您的觸發器并保存。
首先,我們創建一個新的 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_text和page_location事件參數及其值。
至此,事件創建已經完成。最多不超過48小時,我們就可以在GA4的事件中找到它,也可以用它創建轉化和受眾。
擊右上方紅色按鈕關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!
今天開始來簡單聊一下web前端開發所接觸的四種頁面渲染形式,所有的web開發人員都在搞這四種中的一種或者幾種。
好吧,先看一下四種頁面渲染形式是哪四種。
【本文的講解思路】先逐一聊一下四種渲染方式的開發思路和優缺點,最后,說一下在我們平時工作中如何做選擇。
后端模板渲染方式相對來說,歷史悠久,就是由后端使用模板引擎(比如:用的比較多的php的smarty)將數據渲染成HTML返回給前端。前端再用JS去操作DOM或者渲染其他動態的部分。
下面,通過一張圖來看整體開發思路。
整個過程,這里就不再細解釋了,回頭有空搞個視頻實例教學來代碼碼一次,那樣效果會更好。
這種頁面渲染方式,前端HTML代碼需要嵌入到后端代碼中(如PHP)。所以,通常是前端源代碼與后端源代碼混合在一個工程里,前端負責寫靜態頁面,布置UI,處理JS邏輯。后面負責將靜態頁面轉換成模板頁。
所以,不難看出,這種開發方式的缺點是:
1. 前后端混合在一起,不方便本地開發,本地模擬調試,更不方便自動化測試。
2. 前端被約束在后端開發的模式中,不能充分使用前端的構建生態,開發效率低下。
3. 項目更是難以管理和維護,也可能會有前后端職責不清的問題。
當然,這種渲染方式的最大好處是:前端能夠快速呈現服務器端渲染好的頁面,而不用等客戶端渲染,這能夠提供很好的用戶體驗與SEO友好。但是前后端分離開發之后,前端有了完美替換的開發方式(node中間層,SSR,后面會逐一說到)。
二. 客戶端渲染
三. node中間層
四. 服務端渲染(SSR)
五. 如何根據實際情況選擇使用哪種頁面渲染?
*請認真填寫需求信息,我們會在24小時內與您取得聯系。