In this video, I'm going to show you how you can connect a Contact Form 7 to Google Tag
Manager so you can successfully track a form submission and forward this on to your facebook
Pixel, Google Analytics, or Google Ads.
All and more, coming up.
Hey there and welcome back to another video of measureschool.com teaching you the data-driven
way of digital marketing.
My name is Julian.
And on this channel, we do marketing tech tips, tutorials, and tips and tricks just
like this one.
So if you haven't yet, consider subscribing.
Today, I want to talk about how you can connect a Contact Form 7 to Google Tag Manager.
And then we can track our form submissions, and also the different form fields that go
into that and forward this all on to our Facebook Pixel to Google Analytics or to Google Ads.
Now, we got lots to cover so let's dive in.
So here we have a contact form 7 on our demo shop here.
And this is a standard contact form 7 that I've installed onto this WordPress blog.
So if you do the same, it would look maybe something like this.
Or completely different depending on how you set up your form.
And this is a standard form.
So you can fill it out here with some test data and send it off.
I have a field here, what are you interested in, this will become important later.
Let's send this off.
And we get our little message down here that this message was received and sent on.
Now, this is where a lot of form tracking methods trip up because it actually doesn't
redirect the user on to a thank you page.
But just gives us this message down here, especially for contact form 7.
There's actually something that the plugin does by itself.
And this is in mid DOM events.
What our DOM events?
These are events that are emitted in the JavaScript runtime environment.
So there are events emitted such as the WP CF 7 invalid if the AJAX form completion has
not been completed successfully.
And some other events.
What we're interested in is the submitted event that actually fires when the form submission
has completed successfully.
And in order to listen to such events, we need a little bit of JavaScript.
They describe this down here.
Now, we can try this all out by just copying these lines of code, going over to our Contact
Form seven, opening up the developer tools, which you can do on the more tools.
And here are the developer tools.
And then when we go to the console, it will give us access to the JavaScript runtime environment.
And here, we can enter our code.
And when the event is submitted, we'll be able to fire something called alert fire.
You will see in a second, but this is all about, I will enter another line of code,
the console log
to
see what event details are transferred over into JavaScript that's presented here.
And this is now listening for the event.
So let's go ahead and send off another contact form submit
and send this off.
And here we now see the alert.
So this is already working.
This is a JavaScript alert fire, OK.
And now, it should also have push something into the console here.
And here, we see a custom event was fired.
And we have all kinds of event details.
I want to show you that we actually have data about the contact form itself in this detail
object here.
And we have data about the contact form ID, so the ID that our Contact Form holds.
And then also about the input fields and how they were filled out.
So we have information about the name, we have information about the subject.
And also information about this last point here, what the user has filled out, what are
you interested in product.
And that can be found here as well.
This is really useful because we can pull this all into Google Tag Manager
later on if we choose it.
So just with this little JavaScript here, we can do already a lot.
And in order to make this work with Google Tag Manager, we just need to install this
little JavaScript inside of a listener functionality.
I have already prepared this here, here's a contact form 7 event listener.
And I will have this code that I've written here, linked up down below.
And here,
we can see that this is the same code more or less, we are listening to the form Submit.
And then we actually pushing something into the data layer.
And this is how we communicate with Google Tag Manager.
So from JavaScript to Google Tag Manager, we push data into the data layer in order
for us to be able to get the form ID, but also the field inputs into the data layer,
and then fill our tags later on.
Now, this part just listens to the contact form and pushes data into the data layer if
the right event happens.
So we can deploy this on all pages, no problem.
Or you could also narrow this down to only the pages where you have a contact form installed.
So let's try this out.
Let's go into our preview and debug mode.
And let's go over to our Contact Form reload that.
Let's close the developer tools here.
And we get all familiar Google Tag Manager debug console.
And we have our event listener deployed.
Now let's go ahead and fill out a test again,
send this off.
And you might have seen in the debug console that we now have a form submit right here
in our Google Tag Manager debug console.
When we click on that, we can actually look at the data layer and see what information
has been transferred.
And we have the event, form submit, we have our form ID, and we have our different fields
that were submitted as well.
So this is really useful if you want to pull out and put this into a tag.
Now, how do you build a tag deployment out of this?
Since this pushes data into the data layer, we first of all would need to build a trigger
of that every time a form submit happens in the data layer.
So let's go ahead in Google Tag Manager and go into our triggers,
and then build a custom trigger for our form submit.
We'll choose our custom event, as the event is custom to our data layer.
And we'll put in our form Submit.
And that's already it, we can now click on Save, and have built a trigger based on the
successful form Submit.
Now let's build some variables.
Because we want to pull out some data here, for example, the form ID or the fields menu
597 with the product name here with the interest of the user, what are you interested in.
So we can use that in our tag deployment as well.
Let's go over to Google Tag Manager and build new variables.
And these are data layer variables.
So a data layer variable for our form ID, and we simply need to use data layer variable
here and right, the right key in here, in this case, it would be form ID,
all right.
And let's also build a data layer variable for our interest here.
And in this case, it's a bit tricky because we need to actually get into this fields array,
and then choose the right number here, in order to pull out the right value in our case
would be 012345 starts at zero.
So the last number of this array is the number five.
And then we want to get to the value of this data layer of this object.
So we'll get to product.
Let's try this out.
First of all, we want to get fields, and then a dot, the number five and the value.
Let's save this and refresh, just so we can see how everything is filled.
Let's try this out.
And this time, I'm going to use service here.
Let's send this off.
We get our form submit in the data layer.
And in the variables we should now see our dlv form interest is service.
So this was correctly changed.
And then our form ID is the form ID of our form that was submitted.
Now that we have the data that we want to transfer over to our tags available.
Let's build some tags.
First of all, let's start out building a Google Analytics tag.
In this case, it would be useful to use a Google Analytics event tag
for form Submit.
And we'll choose Universal Analytics.
And as a track type we'll choose event.
And here we're gonna type in our category in our case would be always the same.
And let's transfer over the actual contact form ID.
I'm going to fill this out with our variable as well.
And then as the label, let's put in the interest.
So we have that available as well.
So that should be filled out dynamically based on what the user has entered.
Now, you might be asking, why isn't he sending over the other details, for example, the name
or the email that's actually considered personal identifiable information.
And it's prohibited by the terms of service of Google Analytics to be sent over.
So don't make the mistake of sending any kind of personal identifiable information over.
With our interests, that is fine.
So we would be able to know how many people have first of all submitted the form but then
also be able to segment or to filter down on the specific interests that the user have.
The other day can be left the same.
If you have a settings variable, you can utilize that here.
If you don't have a settings variable, you can enter your tracking ID, let's see, here's
the tracking ID, put it in here.
And then as a trigger will choose our contact custom form submit trigger.
Let's save this and refresh.
And let's try this out again.
This time I choose consultation.
Let's send this off.
We see
our form submit happened, our Google Analytics event form submit happened.
And in our Google Analytics, real-time reporting, we should see a new event.
Yes, they're just an new event that happened a form submit of the form ID 771.
And if you click on that you see the interest was consultation.
So everything is working from this part.
And we could go ahead and deploy this to allow users, I want to show you how you can also
connect the same data to a Facebook event.
So here I have a Facebook event form submission.
If I click on it, you can enter something like this, this will check a form submit an
event called form submit, and then we can enter the interest.
And again here we can utilize our variable with the two curly brackets and choose dlv
form nterest in the drop down menu.
And this will then be transferred over to Facebook that's attached to right trigger
and save this.
And the same is true for a Google Ads conversion tag that you might want to fire upon this
form Submit.
And here I have a conversion ID from my account the conversion label from my account.
And I simply want to fire this on our custom form submit.
Let's save this and try out these new events.
So let's fill this out again.
And I'm going to service, send this off.
We have a form submit here we see our Facebook event five or Google Ads event fired and our
Google Analytics event fired.
You can also see that in our tag assistant, we have our Google Ads conversion tracking
that fired and our Google Analytics event hit.
Then we have our facebook pixel as well.
A form submit was transferred with a custom parameter interest of service.
And so you could for example, retarget or build an audience of users who have chosen
service in your form and send that off.
Don't forget at the end, this is not yet live.
It's just happening in your browser.
You still need to submit this as a version so it goes live to all your users.
All right, so there you have it.
This is how you can connect your contact from seven to Google Tag Manager and then forward
this on to the tags that you choose.
If you found this interesting, then please give us a thumbs up and if you have any more
questions, leave them in the comments down below.
And if you haven't yet, consider subscribing right over there.
And I'll see you in the next one.
My name is Julian.
Till next time.