1,创建两个页面
2,在 app.module.ts 引入组件,注册组件
3,在 tabs.ts 页面引入组件,配置组件
4,在 tabs.html 配置底部按钮以及图标
1,去掉二级页面的 tabs 菜单,找到 app.module.ts 修改下面代码
2,修改返回按钮,找到 app.module.ts 修改下面代码
钮点击追踪可能是网站运营中最常见的需求之一。现在,通过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小时内与您取得联系。