[英]Checkboxes as array in Google tag manager data layer, with Contact form 7
Hi I've tried searching for a solution but couldn't find one here.嗨,我已经尝试寻找解决方案,但在这里找不到。
I'm using the following code snippet to add Contact Form 7 submissions as an event in Google Tag Manager data layer.我正在使用以下代码片段将 Contact Form 7 提交添加为 Google 跟踪代码管理器数据层中的事件。
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.dataLayer.push({
"event" : "CF7submit",
"CF7formId" : event.detail.contactFormId,
"CF7fields" : event.detail.inputs
})
});
It's working good with form submissions being pushed to the data layer.将表单提交推送到数据层时效果很好。 However I've noticed that multiple checkboxes are being pushed as individual name / value pairs.但是我注意到多个复选框被推送为单独的名称/值对。
Is is possible to output these multiple checkbox values as an array?是否可以将 output 这些多个复选框值作为一个数组?
For example:例如:
{name: "Checkboxes-Name[]", value: "Option 1", "Option 2", "Option 3"}
Any help greatly appreciated.非常感谢任何帮助。
Thanks.谢谢。
I have this working now.我现在有这个工作。 I've had to use a naming convention when setting up Contact Form 7 input fields.在设置 Contact Form 7 输入字段时,我必须使用命名约定。 Its the only way I could think of to make it work.这是我能想到的让它工作的唯一方法。 If anyone has some better suggestions feel free to chip in.如果有人有更好的建议,请随时加入。
This is the Data Layer in Google Tag Manager.这是 Google 跟踪代码管理器中的数据层。
dataLayer.push({
event: "CF7submit",
CF7formId: 35396,
CF7fields: {
CF7checkbox: "Option 1, Option 2, Option 3",
CF7radio: "Option 2",
CF7textfield: "Text field message",
CF7dropdown: "Option 3",
CF7textarea: "Text area message",
CF7accept: "1"
},
gtm.uniqueEventId: 76
})
Multiple checkboxes are now saved as an array.多个复选框现在保存为一个数组。
CF7checkbox: "Option 1, Option 2, Option 3",
This is the script I'm using in Google Tag Manager.这是我在 Google 跟踪代码管理器中使用的脚本。
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
var inputs = event.detail.inputs;
var vals = [];
for ( var i = 0; i < inputs.length; i++ ) {
if ( 'CF7-Checkbox[]' == inputs[i].name ) {
vals.push( inputs[i].value );
var CF7checkbox = vals.length ? vals.join(', ') : undefined;
}
else if ( 'CF7-Radio' == inputs[i].name ) {
var CF7radio = inputs[i].value;
}
else if ( 'CF7-Textfield' == inputs[i].name ) {
var CF7textfield = inputs[i].value;
}
else if ( 'CF7-Dropdown' == inputs[i].name ) {
var CF7dropdown = inputs[i].value;
}
else if ( 'CF7-Textarea' == inputs[i].name ) {
var CF7textarea = inputs[i].value;
}
else if ( 'CF7-Acceptance' == inputs[i].name ) {
var CF7accept = inputs[i].value;
}
}
window.dataLayer.push({
'event' : 'CF7submit',
'CF7formId' : event.detail.contactFormId,
'CF7fields': {
'CF7checkbox': CF7checkbox,
'CF7radio': CF7radio,
'CF7textfield': CF7textfield,
'CF7dropdown': CF7dropdown,
'CF7textarea': CF7textarea,
'CF7accept': CF7accept
}
});
}, false );
</script>
I've created a template in Contact Form 7 for all the relevant variables in the script.我在 Contact Form 7 中为脚本中的所有相关变量创建了一个模板。
<label id=“cf7_question" class=“cf7_question">
CF7 survey question.
</label>
[checkbox
CF7-Checkbox
id:cf7_checkbox
class:cf7_checkbox
use_label_element
"Option 1"
"Option 2"
"Option 3"
]
[radio
CF7-Radio
id:cf7_radio
class:cf7_radio
use_label_element
default:1
"Option 1"
"Option 2"
"Option 3"
]
[text
CF7-Textfield
id:cf7_text_field
class:cf7__text_field
placeholder "Placeholder for text field"
]
[select
CF7-Dropdown
id:cf7_dropdown
class:cf7_dropdown
"Option 1"
"Option 2"
"Option 3"
]
[textarea
CF7-Textarea
id:cf7_textarea
class:cf7_textarea
]
[acceptance
CF7-Acceptance
default:on
id:cf7_sub_checkbox
class:cf7_sub_checkbox
optional]
Label for acceptance checkbox
[/acceptance]
[submit "Submit"]
I've set up many of the input fields available in Contact Form 7, from checkboxes to text area.我在 Contact Form 7 中设置了许多可用的输入字段,从复选框到文本区域。 If this can help someone in a similar need to myself, feel free to use it.如果这可以帮助与我有类似需求的人,请随意使用它。 Or if anyone has some better suggestions to write this then I would be keen to know.或者,如果有人有更好的建议来写这篇文章,那么我很想知道。
Thanks again.再次感谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.