Tracking Divi Forms with Google Tag Manager via FORM ID - Divi Wordpress theme FORM conversion s
Published on: December 6 2022 by FeedbackWrench
Tracking Divi Forms with Google Tag Manager via FORM ID - Divi Wordpress theme FORM conversion s
Table of Contents
Tracking Divi Forms with Google Tag Manager via FORM ID - Divi Wordpress theme FORM conversion s
| startTime | durationTime | text |
| 00:00:00 | 00:00:05 | hey folks if you have a wordpress |
| 00:00:03 | 00:00:08 | website built with divi the divi |
| 00:00:05 | 00:00:09 | wordpress theme from elegant themes and |
| 00:00:08 | 00:00:12 | you're trying to do |
| 00:00:09 | 00:00:14 | conversion tracking by using google tag |
| 00:00:12 | 00:00:16 | manager you with me i'm going to show |
| 00:00:14 | 00:00:19 | you how to do that there are some really |
| 00:00:16 | 00:00:21 | difficult things if you're using divi |
| 00:00:19 | 00:00:23 | with google tag manager now real quick |
| 00:00:21 | 00:00:26 | i'm going to show you specifically how |
| 00:00:23 | 00:00:29 | to track a contact form |
| 00:00:26 | 00:00:30 | how to track a contact form by the form |
| 00:00:29 | 00:00:33 | submission |
| 00:00:30 | 00:00:34 | rather than doing a thank you page now |
| 00:00:33 | 00:00:36 | just so you know in order to do |
| 00:00:34 | 00:00:39 | excellent google ads facebook |
| 00:00:36 | 00:00:41 | conversions google conversions analytik |
| 00:00:39 | 00:00:42 | conversions |
| 00:00:41 | 00:00:45 | when somebody were to come to your |
| 00:00:42 | 00:00:47 | website and let's say fill out a form |
| 00:00:45 | 00:00:50 | right so here i've got a basic wordpress |
| 00:00:47 | 00:00:50 | website and i go to contact |
| 00:00:50 | 00:00:52 | and |
| 00:00:50 | 00:00:54 | what i would want to do is if i was |
| 00:00:52 | 00:00:56 | running a google ad or a facebook ad or |
| 00:00:54 | 00:00:59 | a linkedin ad i would want |
| 00:00:56 | 00:01:01 | filling out this form |
| 00:00:59 | 00:01:02 | to trigger a conversion now |
| 00:01:01 | 00:01:05 | traditionally what a lot of people will |
| 00:01:02 | 00:01:07 | do is they will use a redirect to a |
| 00:01:05 | 00:01:10 | thank you page but i've found multiple |
| 00:01:07 | 00:01:12 | reasons why that doesn't work well and |
| 00:01:10 | 00:01:15 | it tends to get really clunky i don't |
| 00:01:12 | 00:01:16 | like that what i do is i always use and |
| 00:01:15 | 00:01:18 | here at feed background so we do web |
| 00:01:16 | 00:01:20 | design we can help you with this we do |
| 00:01:18 | 00:01:23 | digital marketing we create funnels |
| 00:01:20 | 00:01:24 | google ads remarketing and everything um |
| 00:01:23 | 00:01:27 | what i've found is that tracking with a |
| 00:01:24 | 00:01:29 | thank you page really doesn't um give |
| 00:01:27 | 00:01:31 | you the precision that's needed so what |
| 00:01:29 | 00:01:34 | i always do with our websites on webflow |
| 00:01:31 | 00:01:37 | on other themes is i use the form id or |
| 00:01:34 | 00:01:38 | when that form submission is made then |
| 00:01:37 | 00:01:40 | boom we have a |
| 00:01:38 | 00:01:42 | a what's called a trigger now if you're |
| 00:01:40 | 00:01:44 | not familiar with google tag manager |
| 00:01:42 | 00:01:46 | i'll cover just some basics but |
| 00:01:44 | 00:01:48 | basically what google tag manager is is |
| 00:01:46 | 00:01:50 | you put one javascript code in the head |
| 00:01:48 | 00:01:52 | and in the body of your website um so |
| 00:01:50 | 00:01:54 | what i do is you set up google tag |
| 00:01:52 | 00:01:56 | manager so here's i've actually set up a |
| 00:01:54 | 00:01:59 | google tag manager already and if i were |
| 00:01:56 | 00:02:00 | to go to um i don't want to do that and |
| 00:01:59 | 00:02:03 | when you're in here if we were to go to |
| 00:02:00 | 00:02:05 | admin what you'll see is that there is a |
| 00:02:03 | 00:02:07 | container setup |
| 00:02:05 | 00:02:09 | install google tag manager and there's a |
| 00:02:07 | 00:02:11 | head and a footer and if i were to come |
| 00:02:09 | 00:02:12 | into my and i'm gonna move really quick |
| 00:02:11 | 00:02:14 | so for those of you that already get |
| 00:02:12 | 00:02:17 | this i'm sorry but when you come into |
| 00:02:14 | 00:02:21 | your your divi wordpress um themed |
| 00:02:17 | 00:02:22 | website divi by elegant themes that that |
| 00:02:21 | 00:02:25 | wordpress |
| 00:02:22 | 00:02:27 | has a little bit of a hiccup here so i |
| 00:02:25 | 00:02:30 | come into divi and i go to the theme |
| 00:02:27 | 00:02:32 | options here and what i can do is i'll |
| 00:02:30 | 00:02:34 | go over to integrations |
| 00:02:32 | 00:02:36 | and i will take |
| 00:02:34 | 00:02:40 | again the way i got here was i went in |
| 00:02:36 | 00:02:43 | and i went to the admin um ah |
| 00:02:40 | 00:02:44 | sorry guys uh oh i have two of them |
| 00:02:43 | 00:02:47 | that's probably why this is happening |
| 00:02:44 | 00:02:50 | that's funny um |
| 00:02:47 | 00:02:52 | so when i come to admin i'll grab the |
| 00:02:50 | 00:02:54 | container so install google tag manager |
| 00:02:52 | 00:02:56 | or when you set it up it'll actually pop |
| 00:02:54 | 00:02:58 | up you grab the head code and you're |
| 00:02:56 | 00:03:01 | going to install that into the head |
| 00:02:58 | 00:03:03 | and then you will grab the body code |
| 00:03:01 | 00:03:04 | the body tag and put it in the body and |
| 00:03:03 | 00:03:06 | once you've done that you're going to |
| 00:03:04 | 00:03:08 | come in and you're just going to hit |
| 00:03:06 | 00:03:10 | save changes all right so that's normal |
| 00:03:08 | 00:03:13 | now usually what would be happening here |
| 00:03:10 | 00:03:16 | in a google tag manager is that google |
| 00:03:13 | 00:03:19 | tags has kind of two situations here |
| 00:03:16 | 00:03:22 | okay there are if then statements |
| 00:03:19 | 00:03:23 | happening okay so basically there's |
| 00:03:22 | 00:03:26 | triggers |
| 00:03:23 | 00:03:29 | and tags the triggers are the if so if |
| 00:03:26 | 00:03:31 | you fill out my form |
| 00:03:29 | 00:03:34 | that's a trigger or if you click the |
| 00:03:31 | 00:03:36 | link that's a trigger then the tag |
| 00:03:34 | 00:03:39 | is where we would say |
| 00:03:36 | 00:03:40 | fire a google analytiks tag fire a |
| 00:03:39 | 00:03:43 | |
| 00:03:40 | 00:03:44 | conversion in google ads fire a facebook |
| 00:03:43 | 00:03:47 | conversion i'll show you how to do that |
| 00:03:44 | 00:03:49 | but that's the basics here well in order |
| 00:03:47 | 00:03:52 | to have a trigger what has to happen is |
| 00:03:49 | 00:03:54 | we have to have google tag manager |
| 00:03:52 | 00:03:56 | recognizing what's happening on your |
| 00:03:54 | 00:03:57 | website so usually so when you're in |
| 00:03:56 | 00:03:59 | google tag manager i'm going to move |
| 00:03:57 | 00:04:01 | quick now you would go to preview here |
| 00:03:59 | 00:04:02 | and what it'll do is it'll actually open |
| 00:04:01 | 00:04:04 | up this website |
| 00:04:02 | 00:04:07 | in two different |
| 00:04:04 | 00:04:09 | um tabs right so over here now i've got |
| 00:04:07 | 00:04:11 | this is tracking i'm previewing what's |
| 00:04:09 | 00:04:14 | going on in this whole website so i can |
| 00:04:11 | 00:04:15 | move around in fact if i click here over |
| 00:04:14 | 00:04:18 | here i can see that i click the link and |
| 00:04:15 | 00:04:19 | then the whole thing open okay so link |
| 00:04:18 | 00:04:20 | click |
| 00:04:19 | 00:04:23 | and then the new page is open here's the |
| 00:04:20 | 00:04:25 | second page from bottom to top these are |
| 00:04:23 | 00:04:26 | the actions that are occurring okay so |
| 00:04:25 | 00:04:28 | now |
| 00:04:26 | 00:04:30 | take a breath those of you that are new |
| 00:04:28 | 00:04:31 | for those of you that are already into |
| 00:04:30 | 00:04:33 | this um |
| 00:04:31 | 00:04:36 | fast forward a little bit so here's |
| 00:04:33 | 00:04:38 | what's going to happen usually on a |
| 00:04:36 | 00:04:40 | normal website that's not divi when you |
| 00:04:38 | 00:04:42 | do that |
| 00:04:40 | 00:04:45 | as you're clicking if you were to come |
| 00:04:42 | 00:04:47 | to a form and you filled it out |
| 00:04:45 | 00:04:49 | all of a sudden over here there would be |
| 00:04:47 | 00:04:51 | a form submit thing it would say form |
| 00:04:49 | 00:04:52 | submission |
| 00:04:51 | 00:04:54 | what you'll notike with divi is that |
| 00:04:52 | 00:04:57 | that does not occur |
| 00:04:54 | 00:04:59 | that doesn't happen and when that form |
| 00:04:57 | 00:05:02 | submits there would be some variables in |
| 00:04:59 | 00:05:04 | there a form id a form element id a form |
| 00:05:02 | 00:05:06 | class |
| 00:05:04 | 00:05:08 | that doesn't happen with divi well i |
| 00:05:06 | 00:05:10 | have a solution for you okay |
| 00:05:08 | 00:05:11 | and what will happen is the solution |
| 00:05:10 | 00:05:14 | will make it so that when you fill out |
| 00:05:11 | 00:05:17 | an actual divi now this is only a divi |
| 00:05:14 | 00:05:20 | form you could go in and use ninja forms |
| 00:05:17 | 00:05:22 | wp forms whatever it is but if you have |
| 00:05:20 | 00:05:25 | this type of form i'm going to show you |
| 00:05:22 | 00:05:27 | a workaround that will help you out so |
| 00:05:25 | 00:05:30 | now in the in this video in the |
| 00:05:27 | 00:05:32 | description is a little code okay and |
| 00:05:30 | 00:05:34 | this code |
| 00:05:32 | 00:05:36 | is a little javascript that we're going |
| 00:05:34 | 00:05:38 | to put in the body of our website okay |
| 00:05:36 | 00:05:40 | and you're gonna have to edit this just |
| 00:05:38 | 00:05:42 | a little bit it's not hard |
| 00:05:40 | 00:05:44 | so it's this simple script right here so |
| 00:05:42 | 00:05:46 | you have script and script okay |
| 00:05:44 | 00:05:48 | and what you'll see here |
| 00:05:46 | 00:05:50 | is that |
| 00:05:48 | 00:05:53 | it's a jquery it opens and all of a |
| 00:05:50 | 00:05:54 | sudden it starts looking for |
| 00:05:53 | 00:05:58 | this form and then we're going to give |
| 00:05:54 | 00:06:00 | it an attribute id a form id and that's |
| 00:05:58 | 00:06:03 | going to be we're going to |
| 00:06:00 | 00:06:05 | change this where it says your form here |
| 00:06:03 | 00:06:07 | this is where you're going to change so |
| 00:06:05 | 00:06:09 | all i'm going to do real quick is i in |
| 00:06:07 | 00:06:11 | fact i already typed it in |
| 00:06:09 | 00:06:14 | you can't have any spaces so make sure |
| 00:06:11 | 00:06:16 | there are no spaces in this name so just |
| 00:06:14 | 00:06:19 | change between the parentheses with no |
| 00:06:16 | 00:06:20 | spaces and this is going to be the form |
| 00:06:19 | 00:06:23 | id |
| 00:06:20 | 00:06:26 | when the elegant themes jquery fires |
| 00:06:23 | 00:06:27 | once you've changed that |
| 00:06:26 | 00:06:28 | without any spaces we're going to copy |
| 00:06:27 | 00:06:31 | this okay |
| 00:06:28 | 00:06:33 | and this is how you solve this you can't |
| 00:06:31 | 00:06:36 | see the form in google tag manager |
| 00:06:33 | 00:06:37 | with your elegant themes website so what |
| 00:06:36 | 00:06:39 | we're going to do here elegant themes |
| 00:06:37 | 00:06:41 | divi website we're going to hit |
| 00:06:39 | 00:06:42 | dashboard |
| 00:06:41 | 00:06:44 | and we're going to come back down to |
| 00:06:42 | 00:06:46 | that same place so divi and then theme |
| 00:06:44 | 00:06:48 | options and we're going to go over to |
| 00:06:46 | 00:06:52 | the integration tab again |
| 00:06:48 | 00:06:54 | and we are going to paste this |
| 00:06:52 | 00:06:56 | underneath where it says google and |
| 00:06:54 | 00:06:59 | google tag manager on a clean line we're |
| 00:06:56 | 00:07:00 | going to paste this in the body |
| 00:06:59 | 00:07:03 | inside the body and we're going to hit |
| 00:07:00 | 00:07:04 | save okay so once we save those changes |
| 00:07:03 | 00:07:07 | the next thing you have to do is you |
| 00:07:04 | 00:07:08 | have to dump your cache whatever you're |
| 00:07:07 | 00:07:10 | using to dump cache i kind of hate that |
| 00:07:08 | 00:07:13 | about wordpress caching is really |
| 00:07:10 | 00:07:16 | obnoxious it doesn't happen quickly once |
| 00:07:13 | 00:07:19 | that happens i'm going to show you |
| 00:07:16 | 00:07:22 | something so once you've done that |
| 00:07:19 | 00:07:24 | if you then come in and test it so |
| 00:07:22 | 00:07:25 | you'll have to dump the cache reload |
| 00:07:24 | 00:07:28 | your preview |
| 00:07:25 | 00:07:30 | and then what will happen is when you go |
| 00:07:28 | 00:07:35 | to your contact form and you fill out |
| 00:07:30 | 00:07:37 | the contact form as this is analyzing |
| 00:07:35 | 00:07:38 | it will recognize the form so this |
| 00:07:37 | 00:07:41 | solves |
| 00:07:38 | 00:07:43 | this major problem of not seeing the |
| 00:07:41 | 00:07:45 | form so now we have a form submit if i |
| 00:07:43 | 00:07:47 | look at the form submit now i've fired a |
| 00:07:45 | 00:07:48 | tag i've actually done some stuff around |
| 00:07:47 | 00:07:49 | this but when we look at the variables |
| 00:07:48 | 00:07:50 | here |
| 00:07:49 | 00:07:52 | we can come down and we can see that |
| 00:07:50 | 00:07:54 | when this click class happened |
| 00:07:52 | 00:07:56 | um down towards the bottom we're going |
| 00:07:54 | 00:07:58 | to have some um |
| 00:07:56 | 00:08:00 | some so you can see click text was the |
| 00:07:58 | 00:08:02 | send message you could do this by click |
| 00:08:00 | 00:08:04 | text if you got really stuck but down |
| 00:08:02 | 00:08:05 | here you're gonna see |
| 00:08:04 | 00:08:09 | form id |
| 00:08:05 | 00:08:12 | is the form id that i put in so bk now |
| 00:08:09 | 00:08:14 | i've done this video three times now |
| 00:08:12 | 00:08:15 | there's my form id so now once i have |
| 00:08:14 | 00:08:17 | that |
| 00:08:15 | 00:08:20 | what i can do is i can say when that |
| 00:08:17 | 00:08:21 | form id let's make a new recipe |
| 00:08:20 | 00:08:22 | in our google tag manager so what i'm |
| 00:08:21 | 00:08:25 | going to do is i'm going to come back |
| 00:08:22 | 00:08:27 | here and i'm going to create a trigger |
| 00:08:25 | 00:08:30 | that causes that to happen out all of |
| 00:08:27 | 00:08:31 | you advanced folks already know this but |
| 00:08:30 | 00:08:32 | basically what we're going to do is |
| 00:08:31 | 00:08:35 | we're going to go into we have to |
| 00:08:32 | 00:08:36 | increase our recipe or our ingredients |
| 00:08:35 | 00:08:38 | so we |
| 00:08:36 | 00:08:39 | right now you have to go to variables |
| 00:08:38 | 00:08:42 | and go to configure and we're going to |
| 00:08:39 | 00:08:44 | add in this form id as a recipe piece |
| 00:08:42 | 00:08:46 | and as you scroll down you hit this |
| 00:08:44 | 00:08:48 | configure again we have to add it and go |
| 00:08:46 | 00:08:51 | variables configure and then come in and |
| 00:08:48 | 00:08:53 | go down to i always turn on the clicks |
| 00:08:51 | 00:08:55 | and i turn on the form so all you do is |
| 00:08:53 | 00:08:59 | you just click all this stuff cancel |
| 00:08:55 | 00:09:00 | click click click click click x out |
| 00:08:59 | 00:09:03 | and now you've added them they are |
| 00:09:00 | 00:09:04 | potential ingredients within your google |
| 00:09:03 | 00:09:06 | tag manager now what we're going to do |
| 00:09:04 | 00:09:08 | is we're going to create a trigger okay |
| 00:09:06 | 00:09:12 | and so we're going to take a trigger |
| 00:09:08 | 00:09:14 | and i still have that form id i had i |
| 00:09:12 | 00:09:15 | copied it right i have that name and now |
| 00:09:14 | 00:09:17 | we're going to create a trigger we're |
| 00:09:15 | 00:09:20 | going to go new |
| 00:09:17 | 00:09:22 | trigger i already did one here um a new |
| 00:09:20 | 00:09:25 | form trigger so i'll show you what it |
| 00:09:22 | 00:09:27 | looks like from the beginning new |
| 00:09:25 | 00:09:28 | and i i'm going to paste this up here so |
| 00:09:27 | 00:09:31 | form |
| 00:09:28 | 00:09:33 | bksc that form id |
| 00:09:31 | 00:09:34 | equals this |
| 00:09:33 | 00:09:37 | and again this is going to be the |
| 00:09:34 | 00:09:40 | initiate initial initialization go to |
| 00:09:37 | 00:09:43 | form submission the initialization of a |
| 00:09:40 | 00:09:44 | recipe that we will make as a tag |
| 00:09:43 | 00:09:46 | so now we're saying when a form |
| 00:09:44 | 00:09:48 | submission happens all forms well we |
| 00:09:46 | 00:09:50 | don't want this to occur when all forms |
| 00:09:48 | 00:09:51 | happen we just want some forms and then |
| 00:09:50 | 00:09:52 | we're going to go here and we're going |
| 00:09:51 | 00:09:56 | to go |
| 00:09:52 | 00:09:58 | when the form id so some forms gives us |
| 00:09:56 | 00:10:00 | drop down when the form id |
| 00:09:58 | 00:10:02 | equals |
| 00:10:00 | 00:10:03 | that |
| 00:10:02 | 00:10:06 | form id |
| 00:10:03 | 00:10:06 | now we have a trigger okay |
| 00:10:06 | 00:10:09 | so |
| 00:10:06 | 00:10:10 | we have that trigger now i'm gonna quick |
| 00:10:09 | 00:10:12 | delete that because i've already made |
| 00:10:10 | 00:10:14 | this twice okay |
| 00:10:12 | 00:10:16 | now once we have that trigger we can do |
| 00:10:14 | 00:10:18 | some cool things so here are some of the |
| 00:10:16 | 00:10:21 | tags that we can make okay so you can |
| 00:10:18 | 00:10:23 | come in and you can say let's fire an |
| 00:10:21 | 00:10:25 | event in google analytiks |
| 00:10:23 | 00:10:27 | when that happens so that you can track |
| 00:10:25 | 00:10:29 | it okay you could also come in and |
| 00:10:27 | 00:10:31 | create a google ad conversion and maybe |
| 00:10:29 | 00:10:34 | that's what i'll do right now |
| 00:10:31 | 00:10:36 | let's just go into google ads |
| 00:10:34 | 00:10:38 | and as you set up a new account in fact |
| 00:10:36 | 00:10:40 | i'm setting up an account for this i'm |
| 00:10:38 | 00:10:43 | going to be the admin |
| 00:10:40 | 00:10:45 | and as this happens save and continue |
| 00:10:43 | 00:10:47 | there's two pieces to this i want to add |
| 00:10:45 | 00:10:50 | for you so this next video is going to |
| 00:10:47 | 00:10:51 | be how to use this trigger in a google |
| 00:10:50 | 00:10:53 | ad okay |
| 00:10:51 | 00:10:55 | hopefully this is helpful if you have a |
| 00:10:53 | 00:10:57 | divi themed wordpress website you're |
| 00:10:55 | 00:10:59 | trying to track |
| 00:10:57 | 00:11:00 | your form submissions using google tag |
| 00:10:59 | 00:11:03 | manager that's how you do it with a form |
| 00:11:00 | 00:11:04 | id how do you fix the form id tracking |
| 00:11:03 | 00:11:06 | system |
| 00:11:04 | 00:11:08 | on elegant themes good luck god bless |
| 00:11:06 | 00:11:12 | hopefully that was helpful because it |
| 00:11:08 | 00:11:12 | was a pain for me to figure out |
Recommended
- Alternatives to Corvee & Why You Might Avoid It. Corvee Review for Accountant & Bookkeeping Business
- The Corvee alternative that’s good enough
- 2022 Google Display Ad Tutorial - Responsive Google Display for Remarketing - Google Ads Tutorials
- Will You Fail? Starting a Bookkeeping Business & Accounting Firm
- How To Create Good Videos For Your Business
