当前位置：文江博客话题详情

自定义参数不发送Google标签管理器中单击的按钮的参数

发布于 2025-02-02 11:10:13 字数 394 浏览 5 评论 0原文

因此，我正在学习Google Tag Manager，并且我正在玩耍，以设置一种方法来检查我的“尝试尝试”按钮的哪些按钮通过将自定义参数传递给GTM来单击。但是，无论我单击什么按钮，它都会发送“英雄试验”的值，而不是单击实际按钮的值。

我的第一个测试按钮是

ID =“试用按钮”，带有ganame的自定义参数=“英雄试验”

，第二个测试按钮是

id =“ avile button”，带有ganame的自定义参数=“导航试验”，

我设置了触发可以使用的触发器单击所有元素，然后触发与试用按钮的“单击ID”，

该变量是“ dom元素”和选择方法“单击ID”，然后将ganame参数作为变量，

然后将设置ganame的标签发送给ganame参数参数作为事件参数

。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时间你老了 2025-02-09 11:10:13

GTM对您添加到标签的自定义属性没有特殊知识 - 通常必须专门编写代码以通过自定义JavaScript捕获此属性的值。

首先，您需要设置一个变量，以便可以从数据层中提取结果值。创建类型“数据层变量”的新用户定义变量。给它一个可以推到的变量名称（我在下面我自己的代码示例中使用'ganame'），并给变量本身一个名称。我在这里使用“ ganame”。

创建第二个变量，我们将用作触发器来触发我们的最终GA标签。在下面的脚本中，我们将向称为“ myevent”的数据层推动一个值，因此我们将其设置并调用触发'按钮点击事件。

添加一个DOM Ready Trigger（并根据需要限制），因为您不想执行此脚本，直到文档对象模型已加载（所有HTML代表的东西），因为元素可能不会在此之前加载。

使用我们之前设置的'按钮点击事件'添加自定义事件触发器。当您在下面的脚本中看到的“ GabuttonClick”值的值时，这应该触发。我们将此触发器称为“ GA”按钮点击。

您无法真正使用GTM中的内置事件处理程序，因为需要将自定义属性从元素中删除，因此我们将创建一个自定义的HTML标签，该标签在此DOM上发射就绪触发器。我们将在其中使用以下脚本 - 请参阅有关发生的事情的说明的评论。请注意，自定义脚本标签期望将HTML写入其中，因此图像中的＆lt; script＆gt;标签。

编辑的代码以删除箭头函数

//Find the button on the page and add an event listener for when someone clicks it
  document.querySelector('#Trial-Button').addEventListener("click", function(){
    //Get a reference to the button again within the click event handler and pull the custom attribute off
    var attr = document.querySelector('#Trial-Button').attributes['ganame'] || '=';
    //Since this returns 'ganame=myValue', we split and pull the second value
    var attrVal = attr.split('=')[1];
    //Push this into the data layer
    dataLayer.push({'myEvent': 'gaButtonClick', 'name': attrVal});    
});

最后，您可能想在某个地方发送此捕获的值。假设您将其发送给Google Analytics 4作为自定义活动。创建一个GA4事件标签。使用您要在报告中使用的任何事件名称进行设置，然后填充事件参数。我在下面指定了“名称”的名称，并引用了我们之前使用{{ganame}}}创建的GTM变量。使用我们之前创建的“ GA按钮点击”事件触发此标签。

要查看此处发生的事情：

用户访问页面并加载了DOM
ganame按钮捕获标签已执行，请通过ID查找您的按钮，然后将单击事件处理程序附加到它。
单击按钮时，它将两个值推向GTM DataLayer：myEvent值和名称值。两个变量都保存到GTM变量。
由于myEvent值匹配其关联的触发器值，因此触发GA4事件标签，该标签填充了名为“名称”的事件参数的值，该值名为“名称”，其值'ganame'的值。

完毕！

GTM has no special knowledge of custom attributes you add to tags - you'd generally have to write code specifically to capture the value of this attribute via custom JavaScript.

First you're going to need to set up a variable so you can pull the resulting value out of the data layer. Create a new user-defined variable of type "Data Layer Variable". Give it the variable name you'll push to (I use 'ganame' in my own code example below) and give the variable itself a name. I use 'GaName' here.

Create a second variable that we'll use as a trigger to fire off our final GA tag. In the script below, we'll be pushing a value to the data layer called 'myEvent', so we set it accordingly and call that trigger 'Button Click Event'.

Add a DOM ready trigger (and limit by page as needed) since you don't want to execute this script until the document object model has loaded (the thing all the HTML represents) as elements may not be loaded prior to that.

Add a custom event trigger using the 'Button Click Event' variable we set earlier. This should trigger when it has a value of 'gaButtonClick' as you'll see in the script below. We'll call this trigger 'GA Button Click'.

You can't really use the built-in event handlers in GTM because of that need to pull the custom attribute off the element, so we'll instead create a custom HTML tag that fires on this DOM Ready trigger. We'll use the following script in it - see comments for explanations of what's happening. Note that the custom script tag expects HTML to be written to it, thus the <script> tags in the image.

Edited code to remove arrow functions

//Find the button on the page and add an event listener for when someone clicks it
  document.querySelector('#Trial-Button').addEventListener("click", function(){
    //Get a reference to the button again within the click event handler and pull the custom attribute off
    var attr = document.querySelector('#Trial-Button').attributes['ganame'] || '=';
    //Since this returns 'ganame=myValue', we split and pull the second value
    var attrVal = attr.split('=')[1];
    //Push this into the data layer
    dataLayer.push({'myEvent': 'gaButtonClick', 'name': attrVal});    
});

Finally, you'll presumably want to send this captured value somewhere. Let's say you're sending it to Google Analytics 4 as a custom event. Create a GA4 Event tag. Set this up with whatever event name you want to use in your reporting, then populate the event parameters. I specify a name of 'name' below, and reference the GTM variable we created earlier with the use of {{GaName}}. Trigger this tag with our 'GA Button Click' event we created earlier.

To review what happens here:

The user visits the page and the DOM is loaded
The ganame Button Capture tag is executed, finds your button by ID and attaches a click event handler to it.
When the button is clicked, it pushes two values to the GTM datalayer: a myEvent value and a name value. Both variables are saved to GTM variables.
Since the myEvent value matches its associated trigger value, this fires the GA4 event tag which populates the value of the event parameter named 'name' with the value of the variable 'GaName'.

Done!

回复收藏 0 原文