How to send a value to GTM and GA from CF7 dropdown

Recently I had an interesting tracking problem to solve for a client.

Catching the dynamic price which was within a string of a dropdown value inside the Contact Form 7.

This is how I did it. If you have a more elegant solution please let me know in the comments.

If you need some extra help with setting individual tags and how CF7 form submission catching with GTM works, please check this Analytics mania article.

Step 1 – Create CF7 listener triggered on all pages where forms are placed

In your Google Tag Manager account create a Custom HTML tag that fires on pages that contain CF7 form.

The code below captures the string of the selected dropdown menu item and grabs the numeric value from the string if it exists.

You should tweak the code in order to fit your needs:

1. Change the name of the drowpdown menu element
2. Change the regex so you can capture the value correctly, in my case the value is shown as number followed by a space and then the currency Eur.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  var response = event.detail.inputs;
  var obj = response.find(function (x) {
  return x.name.toLowerCase() === 'name'; // Enter the name of your dropdown element here
});
var value = 0;
if (obj) {
  var r = /\d+\s?Eur/; // Change the regex according to your needs
  var arr = obj.value.match(r);
  value = arr ? parseInt(arr[0]) : 0;
}
 window.dataLayer.push({
 "event" : "cf7submission",
 "formId" : event.detail.contactFormId,
 "value" : value
 })
}); 
</script>

Step 2 – Create a custom tag firing trigger

Create a Custom Event – cf7submission trigger.

Step 3 – Create a data layer variable that catches the value

Create variable: DLV – Dropdown price value

Step 4 – Create tag – GA event, triggered by cf7submission and send value to GA

Finally, create a new tag in Google Tag Manager which is triggered by cf7submission, and send value alongside all other necessary data to GTM.

That’s it, this is how you set up variable value capturing of CF7 dropdown menu and send the data to Google Analytics with GTM.

This data can now be used as a goal in Google Analytics and imported into Google Ads to be used as a conversion.

You can also setup Google Ads tracking pixel alongside sending to GA or on its own.

This solution makes it possible to setup up the Target ROAS bidding option.

Hope you find it useful, if you need further help feel free to comment below or contact me.