使用 Google 跟踪代码管理器在 HubSpot 表单上使用动态 ID 跟踪复选框

Question

我已经在 GTM 上设置了表单跟踪，但我现在在跟踪特定表单提交时遇到了问题，其中还选中了选择订阅复选框。我会设置一个触发器以在复选框为真并且单击表单提交按钮时触发，这最初在我在预览模式下测试它时起作用。我发现复选框的 ID 属性是动态的，这就是我的自定义 javascript 变量不再起作用的原因。这是我目前所拥有的（在 ID 的最后四位数字更改之前有效）：

function() {
var checkbox = document.getElementById("LEGAL_CONSENT.subscription_type_6337149-8b3f66b8-292e-411d-a20e-f08f28554e60_7739");
return checkbox.checked || false;
}

是否有一种简单的解决方法，例如通过以不变部分开头的 ID 选择元素？

编辑：

我已将其替换为以下内容，但仍未触发：

function() {
var checkbox = document.querySelector('[id^="LEGAL_CONSENT.subscription_type_6337149-8b3f66b8-292e-411d-a20e-f08f28554e60_"]');
return checkbox.checked || false;
}

订阅复选框的 HTML：

<input id="LEGAL_CONSENT.subscription_type_6337149-8b3f66b8-292e-411d-a20e-f08f28554e60_9479" class="hs-input" type="checkbox" name="LEGAL_CONSENT.subscription_type_6337149" value="true" data-reactid=".hbspt-forms-1.2.1:0.$LEGAL_CONSENT=1subscription_type_6337149.$LEGAL_CONSENT=1subscription_type_6337149.$LEGAL_CONSENT=1subscription_type_6337149.0.0.0.0">

Answer 1

当您使用不应动态更改的元素的类名时，下面的函数应该可以工作。

 function() {
var checkbox = document.getElementsByClassName(“hs-input”);    
 return checkbox.checked || false;
}