整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
1，創(chuàng)建兩個(gè)頁(yè)面
2，在 app.module.ts 引入組件，注冊(cè)組件
3，在 tabs.ts 頁(yè)面引入組件，配置組件
4，在 tabs.html 配置底部按鈕以及圖標(biāo)
1，去掉二級(jí)頁(yè)面的 tabs 菜單，找到 app.module.ts 修改下面代碼
2，修改返回按鈕，找到 app.module.ts 修改下面代碼
鈕點(diǎn)擊追蹤可能是網(wǎng)站運(yùn)營(yíng)中最常見的需求之一?，F(xiàn)在，通過(guò)GA4 和 Google 跟蹤代碼管理器(GTM)的配合，我們可以輕易實(shí)現(xiàn)追蹤，甚至可以導(dǎo)入到google ads，輔助廣告優(yōu)化。
具體實(shí)現(xiàn)方法有很多，本文主要介紹使用GTM的方法。
首先，我們需要?jiǎng)?chuàng)建一個(gè)觸發(fā)器，或更具體地說(shuō)，創(chuàng)建一個(gè)通用點(diǎn)擊觸發(fā)器。這將允許 GTM 監(jiān)聽與點(diǎn)擊相關(guān)的事件。
在 Google 跟蹤代碼管理器中，我們可以選擇 2 個(gè)點(diǎn)擊觸發(fā)選項(xiàng)：
? All Elements
? Just links
Just links是一種常見的方式，因?yàn)樵S多按鈕本質(zhì)上是用戶點(diǎn)擊的裝飾鏈接。但是，如果您的按鈕恰好不是鏈接，您將無(wú)法獲得更多信息來(lái)跟蹤。
這就是為什么我們喜歡使用All Elements作為觸發(fā)器類型。此觸發(fā)器類型能夠偵聽任何內(nèi)容（例如圖像、文件、按鈕、空白區(qū)域等）和鏈接上發(fā)生的點(diǎn)擊。它只是更通用、更通用。
創(chuàng)建一個(gè)新觸發(fā)器并選擇All Elements。
現(xiàn)在，GTM 可以識(shí)別何時(shí)發(fā)生點(diǎn)擊，無(wú)論是鏈接點(diǎn)擊還是任何元素點(diǎn)擊。
然而，我們可能需要更多的信息，而不僅僅是知道存在點(diǎn)擊交互。
要獲取有關(guān)點(diǎn)擊的信息，請(qǐng)轉(zhuǎn)到 Google 跟蹤代碼管理器并啟用與點(diǎn)擊相關(guān)的所有內(nèi)置變量。這些變量將為我們提供所需的大部分點(diǎn)擊詳細(xì)信息，例如Click Text，它會(huì)顯示按鈕上的文本。
在 GTM 工作區(qū)中，選擇Variables，然后選擇Configure。
啟用所有單擊變量。
該信息將用于創(chuàng)建觸發(fā)我們的標(biāo)簽的條件。
返回我們的產(chǎn)品頁(yè)面，讓我們單擊Add to Cart按鈕。（在這里，添加購(gòu)物車僅僅是示例，你可以把這個(gè)方法應(yīng)用在任何按鈕）
前往 Google 跟蹤代碼管理器的調(diào)試界面。識(shí)別Summary下的Click事件并選擇它。查看之前啟用的變量向我們展示了什么信息。
這里我們需要找到足夠獨(dú)特的數(shù)據(jù)作為觸發(fā)條件。
在“調(diào)試”界面中，選擇左側(cè)面板中的Click事件，然后單擊Variables選項(xiàng)卡。
重點(diǎn)關(guān)注我們已啟用的變量（Click Classes, Click ID, Click Target, Click Text, and Click URL），盡力識(shí)別按鈕特有的數(shù)據(jù)。
通常，許多按鈕都是構(gòu)建為鏈接的，這意味著您的 Click URL 變量值很有可能顯示鏈接。您可以將其用于您的觸發(fā)條件。
但是，很多時(shí)候并非所有維度的數(shù)據(jù)都齊全。在我們的示例中，Click URL沒有值，這時(shí)我們可以使用另外兩條信息：
? Click Classes，值為：single_add_to_cart_button button alt
? Click Text，值為： Add to cart
需要注意的是，Click Classes和Click Text很有可能不是唯一值，該方法只適用于追蹤網(wǎng)站所有同類按鈕。
如果我們僅僅只需要追蹤與 Ninja 產(chǎn)品的添加到購(gòu)物車按鈕，怎樣才能做到這一點(diǎn)呢？
首先，我們需要確保該按鈕是唯一的，并且在整個(gè)網(wǎng)站中不會(huì)重復(fù)。
為此，我們將使用 Chrome 開發(fā)人員工具。如果您不熟悉，只需按照以下步驟操作即可。
右鍵單擊您的按鈕并選擇檢查。
這將使您能夠訪問瀏覽器的開發(fā)人員工具來(lái)查看按鈕的 HTML 和 CSS 源代碼。
單擊鍵盤上的CTRL + F來(lái)過(guò)濾 HTML 文檔。
復(fù)制并粘貼該類并將其粘貼到過(guò)濾器中。我們將復(fù)制粘貼single_add_to_cart_button 按鈕 alt。
過(guò)濾器將顯示您的網(wǎng)站上存在多少個(gè)此類。
如果過(guò)濾器結(jié)果是1 of 1 ，這意味著該按鈕的類僅有唯一一項(xiàng)。使用與此按鈕相關(guān)的 GTM 點(diǎn)擊類只會(huì)跟蹤此按鈕，而不會(huì)跟蹤另一個(gè)按鈕。
如果結(jié)果超過(guò) 1 個(gè)，而您只想追蹤特定按鍵，不是同類的所有按鍵，則需要進(jìn)一步過(guò)濾。
解決方案是在觸發(fā)器中添加頁(yè)面 URL ，以僅跟蹤位于 Flying Ninja 海報(bào)所在位置的“添加到購(gòu)物車”按鈕。
讓我們回到All Elements觸發(fā)器。
默認(rèn)情況下，我們的觸發(fā)器會(huì)幫助我們檢測(cè)所有用戶點(diǎn)擊。我們需要從All Clicks切換為Some Clicks。
接下來(lái)是觸發(fā)條件的設(shè)置，在我們的例子中是：Click Classes → contains → single_add_to_cart_button
重命名您的觸發(fā)器并保存。
首先，我們創(chuàng)建一個(gè)新的 GA4 事件代碼。 Tag Type選擇Google Analytics: GA4 Event，再根據(jù)GA4的衡量ID對(duì)應(yīng)選擇Configuration Tag。如果沒有預(yù)設(shè)的Tag，則選擇None - Manually Set ID，再手動(dòng)填入衡量ID即可。
然后我們需要命名我們的事件。建議button_click。遵從Google 的命名規(guī)則的最佳實(shí)踐是小寫字母加下劃線。
此外，最好不要發(fā)明名稱，而應(yīng)該首先查看 Google 跟蹤的內(nèi)容。增強(qiáng)測(cè)量中會(huì)跟蹤點(diǎn)擊次數(shù)，但沒有任何特定于按鈕點(diǎn)擊的內(nèi)容。他們將事件命名為Click，我們也可以使用它。
此時(shí)，我們可以像這樣將事件發(fā)送到 GA4。
但是，我們希望向 GA4 發(fā)送有關(guān)此次點(diǎn)擊的更多詳細(xì)信息，因此我們將使用事件參數(shù)。
按鈕的文本和頁(yè)面位置對(duì)我們很有價(jià)值，因此我們將添加 2 個(gè)自定義參數(shù)。
我們的設(shè)置如下所示。
? 注意：我們討論的命名事件的方法與命名事件參數(shù)的方法相同。建議使用推薦事件或增強(qiáng)測(cè)量列表中任何適合您需求的事件。如果您選擇為事件參數(shù)使用自定義名稱，并且想要在 GA4 報(bào)告（自定義維度）中使用，則參數(shù)的數(shù)量將被限制為 50 個(gè)。
Google 的推薦事件和增強(qiáng)型測(cè)量沒有與按鈕文本相關(guān)的參數(shù)。我們能找到的最接近的是link_text。link_text參數(shù)用于文件下載 。
你也可以自定義Parameter Name。例如，button_text，甚至click_text。
由于目標(biāo)是顯示按鈕文本的值，因此我們可以從之前啟用的Click Text變量中獲取值。
選擇Click Text。
如果我們還想知道按鈕所在的頁(yè)面。只需重復(fù)上述過(guò)程并在Value下選擇Page頁(yè)面 URL即可。
添加我們之前創(chuàng)建的所有觸發(fā)器。
保存您的標(biāo)簽。
啟用Preview模式并單擊Add to cart按鈕。
您可以看到我們的標(biāo)簽已觸發(fā)。
在 GA4 的 DebugView 中，您將看到即將發(fā)生的事件。
在參數(shù)旁邊，您可以看到我們的link_text和page_location事件參數(shù)及其值。
至此，事件創(chuàng)建已經(jīng)完成。最多不超過(guò)48小時(shí)，我們就可以在GA4的事件中找到它，也可以用它創(chuàng)建轉(zhuǎn)化和受眾。
擊右上方紅色按鈕關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識(shí)，搞懂一個(gè)問題！
今天開始來(lái)簡(jiǎn)單聊一下web前端開發(fā)所接觸的四種頁(yè)面渲染形式，所有的web開發(fā)人員都在搞這四種中的一種或者幾種。
好吧，先看一下四種頁(yè)面渲染形式是哪四種。
【本文的講解思路】先逐一聊一下四種渲染方式的開發(fā)思路和優(yōu)缺點(diǎn)，最后，說(shuō)一下在我們平時(shí)工作中如何做選擇。
后端模板渲染方式相對(duì)來(lái)說(shuō)，歷史悠久，就是由后端使用模板引擎（比如：用的比較多的php的smarty）將數(shù)據(jù)渲染成HTML返回給前端。前端再用JS去操作DOM或者渲染其他動(dòng)態(tài)的部分。
下面，通過(guò)一張圖來(lái)看整體開發(fā)思路。
整個(gè)過(guò)程，這里就不再細(xì)解釋了，回頭有空搞個(gè)視頻實(shí)例教學(xué)來(lái)代碼碼一次，那樣效果會(huì)更好。
這種頁(yè)面渲染方式，前端HTML代碼需要嵌入到后端代碼中（如PHP）。所以，通常是前端源代碼與后端源代碼混合在一個(gè)工程里，前端負(fù)責(zé)寫靜態(tài)頁(yè)面，布置UI，處理JS邏輯。后面負(fù)責(zé)將靜態(tài)頁(yè)面轉(zhuǎn)換成模板頁(yè)。
所以，不難看出，這種開發(fā)方式的缺點(diǎn)是：
1. 前后端混合在一起，不方便本地開發(fā)，本地模擬調(diào)試，更不方便自動(dòng)化測(cè)試。
2. 前端被約束在后端開發(fā)的模式中，不能充分使用前端的構(gòu)建生態(tài)，開發(fā)效率低下。
3. 項(xiàng)目更是難以管理和維護(hù)，也可能會(huì)有前后端職責(zé)不清的問題。
當(dāng)然，這種渲染方式的最大好處是：前端能夠快速呈現(xiàn)服務(wù)器端渲染好的頁(yè)面，而不用等客戶端渲染，這能夠提供很好的用戶體驗(yàn)與SEO友好。但是前后端分離開發(fā)之后，前端有了完美替換的開發(fā)方式（node中間層，SSR，后面會(huì)逐一說(shuō)到）。
二. 客戶端渲染
三. node中間層
四. 服務(wù)端渲染（SSR）
五. 如何根據(jù)實(shí)際情況選擇使用哪種頁(yè)面渲染？
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
