首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何跟踪GTM事件一次,即使在页面重新加载之后

跟踪GTM(Google Tag Manager)事件的一种方法是使用cookie或localStorage来存储事件状态。通过在页面加载时检查cookie或localStorage中的事件状态,我们可以在页面重新加载后继续跟踪事件。

以下是一种实现方法的示例:

  1. 在GTM中创建一个自定义JavaScript变量,用于存储事件状态。命名为"eventTracked",类型选择JavaScript,代码如下:
代码语言:txt
复制
function() {
  // 检查cookie或localStorage中的事件状态
  return (document.cookie.indexOf('eventTracked=true') > -1 || localStorage.getItem('eventTracked') === 'true');
}
  1. 在需要跟踪事件的元素上添加一个点击事件触发器,例如按钮或链接等。
  2. 在该点击事件触发器的配置中,选择自定义事件,并设置一个事件名称,例如"gtmEvent"。
  3. 在GTM中创建一个自定义JavaScript变量,用于设置事件状态。命名为"setEventTracked",类型选择JavaScript,代码如下:
代码语言:txt
复制
function() {
  // 设置cookie或localStorage中的事件状态为已跟踪
  document.cookie = 'eventTracked=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
  localStorage.setItem('eventTracked', 'true');
  return true;
}
  1. 在GTM中创建一个自定义事件触发器,用于在页面加载后检查事件状态。命名为"checkEventTracked",选择自定义事件触发器,事件名称选择"gtm.event",触发条件设置为"{{eventTracked}}"等于"false"。
  2. 在该自定义事件触发器的配置中,添加一个JavaScript标签,代码如下:
代码语言:txt
复制
function() {
  // 页面重新加载后仍然跟踪事件
  dataLayer.push({'event': 'gtmEvent'});
}

现在,当用户点击触发器上的元素时,事件将被跟踪并存储事件状态。即使在页面重新加载后,通过检查事件状态,可以再次触发事件跟踪。

请注意,以上示例仅为一种实现方法,具体的实现方式可能因环境和需求而有所不同。在实际应用中,建议根据具体情况进行调整和优化。

腾讯云相关产品推荐:腾讯云云服务器(https://cloud.tencent.com/product/cvm)、腾讯云CDN加速(https://cloud.tencent.com/product/cdn)、腾讯云对象存储(https://cloud.tencent.com/product/cos)。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

谷歌跟踪代码管理器(GTM) 入门指南 第4部分——社交媒体

关于如何通过GTM管理社交媒体的监测代码。 这是谷歌跟踪代码管理器(GTM)系列简介的第四部分——社交媒体代码。如果想从头学起,可以去看看该系列的第一部分,第二部分和第三部分。第五部分也会很快上线。...这包括在访客对你的Twitter主页的访问,点赞Facebook主页或是在把你的文章分享到LinkedIn。这些都属于与你网站内容互动的指标,在我们的博客页面上,我们也同样跟踪了所有的这些指标。...我使用了“Action = Page”表示在Twitter页面上的点击,并且”Action Target”将记录用户在点击链接时所在的页面。 ?...我们设置“Action = Share”,并再次记录具体页面路径以确定哪个博客文章被共享了。 标签 设置好的标签图示 ? 那么你该如何查看你社交分析的统计数据呢?...那么现在你就可以去看看我们第五部分GTM的简介了,是关于表单提交跟踪相关的内容。

2.5K60

谷歌跟踪代码管理器(GTM) 入门指南 第3部分 - 创建链接追踪代码

关于如何通过GTM创建链接监测代码。...在Part1我们介绍了如何替换标准的Google Analytics跟踪代码,并在Part2,我们创建了第一个关于跟踪文档(PDF文件,DOCX等)点击的标签,Part4的内容涵盖社交媒体标签,Part5...如果点击任意页面上的任意链接,只要“mailto”存在链接,都会被触发(trigger)。 ? 我们创建的标签将mailto链接点击作为事件存储在GA。...那么,如果你在Google Tag Manager建立了一个外部链接,如果他们在你网站上点击了链接之后,你就可以知道他们去向何处。...在你发布容器之前,进入GTM预览模式,并确认当你点击mailto链接和外部链接标签时,会被触发。你也可以在 GA测试视图确认你所看到的来自实时事件视图的事件。

2.1K50
  • GOOGLE 跟踪代码管理器(GTM)101 PART 1 – 基础篇

    在本文中,你会了解到,如何将Google Analytics的功能转移到Google跟踪代码管理器。看完系列一,你可以在网站上配置GTM代码,实现网页浏览量的追踪。...关键是,你不再需要开发通过修改网站来配置事件跟踪,因为之前实现事件追踪通常需要花时间修改代码、测试以及发布新代码。...3.创建页面浏览代码触发所有页面 接下来,你需要创建能够触发每个页面浏览量的基础页面浏览代码(tag在GTM中文版本翻译成“代码”)。创建与下面相同的监测代码。...你要确保复制正确,并且Fire On选项是“所有页面”。 ? 现在,你需要使用最低GTM配置来替换标准GA跟踪代码。 4.发布容器并部署GTM 代码 屏幕右上角是发布容器的按钮。...因此,现在我们已经完成最初设定的目标了——在GA中监测网站所有页面的浏览量。在第2部分中,我们会创建一些能够增强GA报告的代码(tag在GTM中文版本翻译成“代码”)。

    4.3K50

    谷歌监测代码管理器(GTM)基础教程 第2部分 - 创建代码

    这听起来很简单,使用V2的GTM界面,它实际上也是这样的。 但在配置触发器之前,我们需要启用一些GTM的变量。 GTM的变量 在GTM容器的变量页面上,确保点击和表单下的所有选项都已勾选。...这将使这些变量可供你在触发器和标记中进行选择。 ? 创建触发器 STEP 1 第一步 给你的触发器起一个描述性的标题(当你有很多触发器时,这是非常重要的),并选择事件为“ 点击”。...GTM可以发送多种类型的代码,请选择你现有的GA类型。对于跟踪ID,请使用你在第1部分中定义的变量。对于创建GA代码,步骤1基本是相同的。 ?...当你进入预览模式后,在另一个浏览器代码页上打开你的网站,就会在网页下方显示GTM预览面板。 当你进入预览模式之后,在新的标签页里打开要进行测试的网站,在页面下方就会展示出GTM预览界面。...我们将跟踪网站的外部链接,建立特殊代码来监测到达你的社交媒体页面的点击,记录点击邮件链接和跟踪表单提交。

    2.6K71

    GOOGLE 跟踪代码管理器101 PART 6 – 真实的跳出率

    关于如何利用GTM追踪页面的真实的跳出率。 虽然我在写有关GTM的第5篇文章时就说过,那篇文章是GTM的最后一篇文章了。但是我现在又写了第6篇。...不过,这篇是Google Tag Manager 101系列文章的最后一篇(当然,我会保留在之后将这个系列继续扩展的权利~),本文会介绍如何使用GTM中的计时器,同时如何使用该功能来计算页面真正的跳出率...所以我的客户决定在页面上设置一个触发器,当访客在浏览当前页面时,如果访客在页面上浏览了X秒之后,就发送一个事件,这样我们就能了解到该访客浏览当前文章的时间长度。...触发器 首先在GTM中创建一个触发器,条件是1分钟后触发一次。在这里设置为60000毫秒。你还可以设置计时器触发的页面范围。在本案例中,计时器会在url以“/blog”开头的页面中。...在图中红色字标出的数据就是参照图中如上计算方式得出的结果。 ? 在本案例中,选取1分钟的时间段为衡量用户与页面文章的互动标准。为了可以简明的说明问题,我们在一分钟之后就发送了一个事件。

    1.4K40

    google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决

    Google 跟踪代码管理器是一个跟踪代码管理系统 (TMS),可以帮助您快速轻松地更新网站或移动应用上的跟踪代码及相关代码段(统称为“代码”)。...将一小段跟踪代码管理器代码添加到项目后,您可以通过网页界面安全轻松地部署 Google Analytics(分析)和衡量代码配置。...在通过clickClasses给相同class的多个元素块绑定click事件埋点的时候,发现无法实现,通过gtm管理器调试发现,点击的时候,显示的是里层被点击的元素,而我们想要绑定整个外层的大块元素,所以这时候我们只能自己写...1、新建触发器,绑定页面加载事件,到某个页面 ?...2、绑定事件代码,这里发现,正常addEventListener默认是冒泡事件,给父元素绑定click事件,点击子元素的某个元素会冒泡的顶级元素,但是这里并不能冒泡上去,所以暂时兼容办法,采取DOM0级事件绑定

    1.2K10

    Google代码管理工具101 部分5-表单

    本系列以Google Tag Manager(GTM)为例,介绍如何实现集约化的Tag Management,从而实现更优化的监测代码配置。 这是这个系列的第五篇文章。...关于如何利用GTM追踪各种线上的表单。...在Part1我们介绍了如何替换标准的Google Analytics跟踪代码,并在Part2,我们创建了第一个关于跟踪文档(PDF文件,DOCX等)点击的标签,Part4的内容涵盖社交媒体标签,Part5...本文提供了一种更为简单的方法来跟踪提交后并不会跳转到新页面的表单提交动作。之前,在GoogleAnalytics中很容易对表单提交动作进行追踪。...您可以根据上述事件创建目标 - 但如果您要创建目标渠道(例如,在提交表单前有一系列步骤),则必须创建虚拟页面。

    2.4K50

    用GTM就能3分钟内把网站变成灰色,这事还要什么网站开发

    每逢重大灾难事件,国内很多网站将设计变成灰色,以示哀悼之情。整个网站变灰色是怎么实现的?如果网站已经安装了GTM代码管理器,你自己3分钟内就能把网站变成灰色。...GTM代码管理器就像“中间人”,用于连接网站和其他第三方代码。所以只安装GTM没有任何作用,需要在GTM中配置第三方代码后才能发挥作用。...在 Google 官方的GTM代码管理器帮助中心有更多介绍,例如:设置和安装跟踪代码管理器。将网站变成灰色,方式很多,但归根到底都是通过添加CSS灰色滤镜来改变网站元素的显示。...简单三个步骤即可将整个网站变成灰色:在GTM中新建一个 Custom HTML 的Tag,Triggering 选择 All Pages,意思是对网站上的所有页面有效复制粘贴下面的代码到 HTML 输入框内...通过网站管理把网站变成灰色万一没有安装 GTM,或者无论如何配置也搞不定,可以直接在网站管理后台安装上面的代码,效果相同。

    51350

    优化网站性能的13个实用更新

    我们最近进行了一次重大的网站性能改进流程,为我们的客户提供从首次点击开始的积极体验。我们的网站转化率相对较低,我们的团队在网站管理职责的划分方面遇到了困难。...Web 应用防火墙 (WAF) 和机器人防护 在 2024 年 4 月实施 WAF 和机器人防护后,与安全漏洞相关的事件指挥会议 (ICM) 的频率减少了一半以上。 3....我们发现超过 75% 的现有 GTM 标签无关紧要。通过简化 GTM 配置并删除 300 个冗余标签,我们优化了资源利用率,减少了服务器负载,并加快了页面加载时间。 4....我们现在以 WEBP 格式提供所有视觉效果,以减小文件大小而不影响质量,提高页面加载时间并提升 SEO 性能。...加载时间:我们专注于优化图像和实施延迟加载,显着改善了加载时间。例如,LCP 在七个月内提高了 32%。

    13810

    InstantClick,让你的网站快到起飞,PJAX技术

    ’s events]()来替代) 依赖上面两个函数的第三方脚本(比如js代码)需要调整(参阅[事件和脚本的重新加载]()) 在加载页面的时候,浏览器不会在显示原本加载进度条了,instantclick...在同一站点上的3G请求的延迟时间通常需要大约200ms。 如何选择? 如果您的网站可以处理额外的负载,选择 在鼠标悬停时预加载方式。 如果你的网站不能,选择在鼠标点击的瞬间预加载方式。...InstantClick会触发4个事件以便于挂钩到页面的整个生命周期: change:当前的页面一旦改变会触发该事件,即使浏览器不支持instantclick,页面初始加载的时候也会触发该事件,这个事件可以用来替换...如果你不想修改页面内容,则不用返回任何内容或返回false。 进阶阶段 跟踪页面内容的变化 当前跟踪页面内容的变化的方式目前有点笨拙。它可能稍后在InstantClick 4.0中更改。...即使页面已经立即加载,也会显示进度条,在将来这将更改。你可以在github讨论。 当访问者缩放页面或旋转其设备时,该栏的大小和位置会自动调整,因此即使您的网站未针对移动设备进行优化,也会正常工作。

    3.7K20

    如何在 Google 跟踪代码管理器 (GTM) 中安装 Matomo 跟踪?

    选择“所有页面”以在所有页面上触发 Matomo 跟踪标签。 单击“保存”。 单击“预览”按钮预览您的更改。 检查 Matomo 标签是否按预期触发。...单击左侧菜单中的“跟踪代码”(在“可衡量”或“网站”菜单下)。 单击左侧菜单中的“跟踪代码”。 单击“JavaScript 跟踪”部分。 选择您要跟踪的网站。 复制跟踪代码。...将此 JavaScript 跟踪代码粘贴到标签配置 HTML 字段中。 向下滚动并单击“触发”。 选择“所有页面”以在所有页面上触发“Matomo 跟踪标签”。 单击“保存”。...要了解有关将 Matomo 与 GTM 结合使用的更多信息,我们推荐这篇第 3 方文章:Google 跟踪代码管理器和 Matomo。 您知道 Matomo 也有自己的标签管理器吗?...了解有关Matomo 标签管理器的更多信息,或了解如何从 GTM 迁移到 MTM。

    43430

    如何让GA符合GDPR合规要求?5个步骤快速入门

    其目的是在欧盟范围内巩固隐私法规。 如果您还不熟悉GDPR的细节,以及为什么您应该在5月份截止日期前采取行动做好准备,请阅读我的博文了解如何通过遵从GDPR要求来避免处罚和建立信任。 ?...即使您没有实体企业在欧盟设立,也要遵从GDPR;因为如果您向欧盟公民提供商品或服务,您将会受到影响。 个人数据的定义被扩展并阐明,包括IP地址,cookie标识符以及GPS位置。...如果您不使用Google Tag Manager(GTM),您的标记管理系统可能会将此设置作为选项公开,或者您可能需要直接编辑代码。...我们所见过最常见的方法是在页面上设置一个叠加模块,请求用户许可,一旦被授予许可,则页面重新加载或重新加载Google Analytics脚本(或者其他的营销技术脚本)继续执行。...作为GDPR的一部分,有一些要求证明已经给予了同意(审计跟踪)。作为肯定同意的明确行为的一部分,我们建议您在Google Analytics中将此作为事件跟踪/日志记录。

    1.8K20

    利用“Google Tag Manager V2”实现滚动追踪

    滚动追踪报告会记录你的网站页面中发生的主要行为。 在本文中,我将逐步演示如何使用谷歌标签管家第二版(Google Tag ManagerV2)来“滚动追踪”你的目标网页。...在“Choose Event(选择事件)”中,单击“Custom Event(自定义事件)”。然后继续。 我们将为这个触发器创建一个触发规则。...事件名称:滚动距离(Scroll Distance) 事件:组成、滚动距离(Scroll Distance) 保存触发器 请记住,此刻我们并没有完成在Custom HTML Tag中的设置。...谷歌事件分析追踪 在使用相应触发器创建了你的Customer HTML Tag后,现在需要创建谷歌分析事件滚动追踪任务。...点击Real Time > Events就能查看这些类型的活动,或者在谷歌分析报告中的Behavior > Events,也能获取报告(报告生成时间大概48小时之后生成)。

    1.9K70

    用宝塔面板安装Matomo内部部署

    如果您的服务器使用其他端口,则可以在主机名之后输入该端口,例如localhost:3307) Security note: for added security, we recommend that...如果您想给予其他用户访问Matomo,或监控多个网站,或重新命名Matomo或安装第三方插件,您需要使用管理页面。单击顶部菜单中的“管理”,然后单击“用户”以管理用户和权限。...如果Matomo JavaScript跟踪标签正确安装在您的网站上,您将收到真实的分析数据。如果您没有收到任何数据,请确保您已将Matomo Javascript代码复制并粘贴到您的网站页面。...Matomo还可以集成到 Android和iOS应用程序 ,在 GTM(谷歌标签管理器) , Ionic移动的应用程序等等。...当cron设置好并且超时值增加时,Matomo仪表板将很快加载,因为报告将由cron触发的core:archive命令进行预处理。

    2.8K40

    JavaScript Matomo 跟踪客户端

    JavaScript 跟踪”部分 选择您要跟踪的网站 将 JavaScript 跟踪代码复制并粘贴到您的页面中,紧接在开始标记之后(或在该部分内) 跟踪代码如下所示: 事件 默认情况下,当 JavaScript 跟踪代码在每个页面视图上加载和执行时,Matomo 会跟踪页面视图。 然而,在现代 Web 应用程序中,用户交互不一定涉及加载新页面。...>]); 在跟踪目标文档中查找有关 Matomo 目标跟踪的更多信息。 准确测量每个页面花费的时间 默认情况下,当用户在访问期间仅访问一次页面视图时,Matomo 会假设访问者在网站上停留了 0 秒。...默认情况下,它仅适用于在同一页面加载期间设置的自定义变量。...例如,如果您跟踪页面视图,则还将跟踪同一页面加载中的每个后续事件、外链、下载等的自定义维度值。调用此方法实际上不会触发跟踪请求,而是将值与后续跟踪请求一起发送。

    99231

    关于React18更新的几个新功能,你需要了解下

    批处理是 React将多个状态更新分组到单个重新渲染中以获得更好的性能。 例如,如果你在同一个点击事件中有两个状态更新,React 总是将它们分批处理到一个重新渲染中。...f ) ; // 还没有重新渲染 // React 只会在最后重新渲染一次(这是批处理!)...这是因为 React 过去只在浏览器事件(如点击)期间批量更新,但这里我们在事件已经被处理(在 fetch 回调中)之后更新状态: function App() { const [count, setCount...在较慢的设备上,延迟会更大,但 UI 会保持响应。 另一个重要的区别是 a 内的大屏幕更新setTimeout仍然会锁定页面,只是在超时之后。...最后,因为setTimeout只是延迟更新,显示加载指示器需要编写异步代码,这通常很脆弱。 通过转换,React 可以为您跟踪挂起状态,根据转换的当前状态更新它,并让您能够在用户等待时显示加载反馈。

    5.9K50

    vue面试题总结(二)

    $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM 23.v-on可以监听多个方法吗? 可以。...为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。...请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。...1.localStorage 存储到本地再回去 2.重新获取接口获取数据 36.如何优化SPA应用的首屏加载速度慢的问题?...,在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 40.第一次加载会触发哪几个钩子?

    1.6K40

    关于React18更新的几个新功能,你需要了解下

    批处理是 React将多个状态更新分组到单个重新渲染中以获得更好的性能。 例如,如果你在同一个点击事件中有两个状态更新,React 总是将它们分批处理到一个重新渲染中。...f ) ; // 还没有重新渲染 // React 只会在最后重新渲染一次(这是批处理!)...这是因为 React 过去只在浏览器事件(如点击)期间批量更新,但这里我们在事件已经被处理(在 fetch 回调中)之后更新状态: function App() { const [count, setCount...在较慢的设备上,延迟会更大,但 UI 会保持响应。 另一个重要的区别是 a 内的大屏幕更新setTimeout仍然会锁定页面,只是在超时之后。...最后,因为setTimeout只是延迟更新,显示加载指示器需要编写异步代码,这通常很脆弱。 通过转换,React 可以为您跟踪挂起状态,根据转换的当前状态更新它,并让您能够在用户等待时显示加载反馈。

    5.5K30
    领券