是否可以使GTM标记一些动态创建的元素
我是React开发人员,我几乎不知道GTM的工作原理,因为这不是我的领域。
我了解的是,
- 在Google标签管理器GTM脚本上有
触发
s - 会通过定义的CSS选择器(在我的情况下)找到触发器的HTML元素,并在将其加载在其中时(put GTM属性)将其标记 问题
- 当事件满足触发条件发生的事件时,触发器将执行定义的JavaScript(在我的情况下),
是当GTM脚本在标记时可能不存在HTML元素,因为它们可以通过用户交互创建。我想使用GTM的生命周期方法(如果存在)来标记此类元素。有什么方法可以做到这一点或至少解决方法吗?
I'm a React developer and I barely knows how GTM works as it's not my field.
What I understand is
- There are
trigger
s on google tag manager - GTM script will find HTML elements of the triggers by defined css selectors(in my case) and tag them(put GTM attributes) when it's loaded in the page
- When an event meeting the condition of a trigger occurs, the trigger will execute defined javascript(in my case)
The problem is that HTML elements possibly don't exist when GTM script is tagging because they can be created by a user interaction. And I want to tag such elements by using GTM's lifecycle method(if exists). Is there any way to do this or at least a workaround?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我可以提出的最佳练习就是:
当您在React中渲染要跟踪的元素时。
让React推送DataLayer关于元素的信息,
这样您就可以在Google标签管理器中设置
触发
,并且类型为自定义事件
The best practice I can come up with is something like :
When you render the element you want to track in the React.
Let React push the datalayer about the information of the element like
So you can set up the
Trigger
in you Google Tag Manager and the type isCustom Event
通常应该从开箱即用。 GTM不会直接标记元素。而是将GTM连接到文档根。如果单击一个元素,则事件气泡到文档根,并且GTM检查事件目标的属性(实际元素与之相互作用)是否满足触发器中定义的条件。
因此,除非React对文档的超级疯狂,否则您应该安全。允许跟踪动态添加的元素几乎是该设计的重点。
对于可见性触发器,您需要特别需要单击“观察DOM更改”的复选框来启用此行为。警告说这可能会影响页面速度。
Usually that should work out of the box. GTM does not tag elements directly. Instead, GTM is attached to the document root. If an element is clicked, the event bubbles up to the document root, and there GTM checks if the properties of the event target (the actually element interacted with) meet the conditions defined in the trigger.
So unless React is doing something super crazy with the document, you should be safe. Allowing to track dynamically added elements is pretty much the point of this design.
For visibility triggers, you specifically need to enable this behavior by clicking the checkbox on "observe DOM changes". There is a warning that this might impact page speed.