Send Google Analytics Client ID with Contact Form 7

This guide describes how to integrate the Google Analytics Client ID with the Contact Form 7 plugin for WordPress. No additional plugins are needed, though you will need to have Google Tag Manager available on the form page. While this post focuses on Contact Form 7 and the GA client ID, more generally this is a useful technique for integrating Google Analytics with a CRM and leveraging JavaScript to retrieve and send additional values alongside form submissions.

NEW! API CONNECTOR ADD-ON FOR GOOGLE SHEETS

Check out my new API Connector Add-on to import data from thousands of platforms (e.g. Shopify, Harvest, Mailchimp, ActiveCampaign, VWO, YouTube, etc.) directly into Google Sheets.

STEPS OVERVIEW

  1. add a hidden field to your form
  2. set that hidden field to be mailed to you upon form submission
  3. extract the GA client ID and store it into a Google Tag Manager variable
  4. populate the hidden field with the GA client ID
  5. set the tag to fire on your form page

STEP 1: ADD A HIDDEN FIELD TO CONTACT FORM 7

In your WordPress dashboard, edit an existing form or navigate to Contact > Add New to launch the Contact Form 7 new form template.

At the top, add a new hidden text field as follows. To make it easier to follow along, use the same code and naming conventions that you see in this post.

form-clientid-img1

STEP 2: UPDATE THE CONTACT FORM 7 MAIL SETTINGS

Still in the Contact Form 7 settings, click the Mail tab. Add the new textarea field to the Message Body section. This is so the contents of the hidden field automatically get emailed to you when the form is submitted.

form-clientid-img5

STEP 3: STORE THE GOOGLE ANALYTICS CLIENT ID IN A GOOGLE TAG MANAGER VARIABLE

Switching over to Google Tag Manager, navigate to Variables > User-Defined Variables > New and choose Custom JavaScript variable. Paste in the following code and Save it.  This code will extract the GA Client ID and store it in a variable so we can use it later.

form-clientid-img2

STEP 4: PUSH THE CLIENT ID INTO THE HIDDEN FORM FIELD

Navigate to Tags > New > Custom HTML Tag and paste in the following script. This will identify the hidden form field from step 1, and populate it with the client ID variable.

form-clientid-img3

STEP 5: ADD A TRIGGER FOR THE CONTACT PAGE

Create a trigger that fires on your contact form page, e.g. Page Path contains /contact. Window Loaded, as opposed to Page View, fires only after the entire page and all its  linked images, libraries, etc. have loaded, while the Page View trigger fires as soon as the GTM container loads. The script to grab the GA client ID needs a few moments to run, so in this case it’s important to use Window Loaded trigger type.

form-clientid-img4

STEP 6: CREATE A DELAYED TRIGGER

I received some feedback that sometimes even Window Loaded isn’t enough time for the client ID to be ready, so we’re also going to bootstrap a delayed trigger. To do this, navigate in GTM to Tags > New > Custom HTML and paste in the following:

Set the trigger for this tag to the Window Loaded trigger from step 5, so the whole thing looks like this:

form-clientid-img7

Now every time GTM’s Page View – Window Loaded event fires, it will also fire off a new event called delayedPageview 1500 milliseconds (1.5. seconds) later. Add this new event into a Custom Event trigger, like this:

form-clientid-img8

STEP 7: ADD BOTH TRIGGERS TO THE ‘ADD GA CLIENT ID TO FORM’ TAG

Return to the tag you created in step 4 and add both of the above triggers to it. This means the client ID will first be pushed into the field upon window load, and then again 1.5 seconds later. It’s redundant but more reliable this way.

form-clientid-img9

CONCLUSION

Following the above steps will allow you to push the GA client ID into your form. This means that you will see the user’s GA client ID in the email you receive after a successful form submission, like this:

form-clientid-img6

This technique can also be expanded to integrate Google Analytics with a CRM and send other JavaScript-accessible values (e.g. page title, device type, etc.) within your contact form.

GOOGLE TAG MANAGER CONSULTING

Get your own tag manager! Click for information on my Google Tag Manager consulting service.

Comments:16

  1. It is nice article and helping me. But can i have both GA & GTM code in same website. How to avoid the duplicate views. I not yet used GTM still now. If i use the above method, is messed up in Ga? Let me know thanks

    1. GTM is a container for other tags. So if you implement GA via GTM, you would need to remove your on-page GA code to avoid double-counting.

  2. Thank you, it works nicely…. mostly!, however, Sometimes i get the email from some clients not including the Client ID, sometimes I get it having the “Undefined” and sometimes the value is blank… not sure why that happened… i tested that in Chrome, Edge and Firefox while making the hidden field visible and found the field get populated with the client ID, however, if I tested it on Firefox Private model the field don’t get populated!

    1. Glad it’s working out for you! (mostly)
      Firefox Private mode blocks GA tracking. That means that there is no GA client ID for that user, and they won’t show up in the form field or in your GA reports. Other add-ons / extensions also block tracking, so in some cases the GA client ID also won’t be available. I’m not sure why you’d get an ‘undefined’ though, let me know if you have any more details on when that happens and I’ll try to dig in a bit.

      1. Thanks Ana for your reply, Didn’t expect that 🙂
        I have 4 Contact 7 forms and I’m using a plugin to send the form details to a google spreadsheet after submission and to Mailchimp (If the visitor ticked that newsletter checkbox), I made the id text field visible for you under the submit button to make it easier for you to debug. Unfortunately, i couldn’t get the client id of over 30% of the total submissions. I tested it and sometimes on Chrome on android phone i get “Undefined” on the text field same as many of my visitors submissions and also some my visitor get the text ID blank (not sure which browser those with blank textbox are using).

        I tried to use the same textbox ID name with all 4 forms and also tried to use different text ID for each form (ex. hidId1, hidId2 …) and added your snippet to the tag 4 times with the different IDs but i got the same result, “blanks and undefined”. and sometimes some of the forms get “undefined” and other forms work properly!
        https://bonmedico.de/review/en/brace/
        My ultimate goal for me to collect that client ID is as the following
        After submission, the page will redirect to a page with call to action button “create a review” that has a GA event set for it, My goal is to identify the ones who didn’t click on that create review button and maybe identify them in the MailChimp list or on the google sheet list so I can target them with a followup email after they receive there gift. Since Google doesn’t allow to send a personal info to GA so I thought your idea could be the solution which is to collect the client ID for each email and match it with the GA data to identify which ones who didn’t click on that button.
        https://bonmedico.de/review/en/brace/product-review/

        In case if there were no solutions to make your idea more reliable do you suggest anyway to achieve my goal in a better way, maybe by updating a mailchimp mergetag for each subscriber with the result of the GA goal completation result or something like that.

        below you can find the all 4 forms
        https://bonmedico.de/review/en/cushion/
        https://bonmedico.de/review/en/brace/
        https://bonmedico.de/review/de/spezialkissen/
        https://bonmedico.de/review/de/bandage/

      2. I checked your 4 forms and all populated correctly 100% of the time in my tests, so it’s a little hard for me to troubleshoot. My best guess is that on slow connections/devices, the client ID isn’t always ready by the time the form field logic runs.
        To address this, I’d test delaying when the form field gets populated. The instructions above populate the form using the trigger Page View – Window Loaded. I’d create a second, delayed trigger that pushes in the client ID a second time, in case it wasn’t ready on the first attempt. You can do this as follows:
        1) create a new custom HTML tag with the following script:
        <script>
        window.setTimeout(function() {
        window.dataLayer.push({
        event: ‘delayedPageview’
        });
        }, 1500);
        </script>
        2) fire this new tag using the same Page View – Window Loaded trigger from step 5
        3) create a new trigger with trigger type = custom event, event name = delayedPageview
        4) add this new trigger to your original “push the client ID” tag from step 4.

        It looks a bit convoluted, but essentially it’s just creating a delayed trigger 1.5 seconds after the first, and then populating the field via both the original trigger and the delayed one 1500 milliseconds (1.5 seconds) later.

        I’m not really sure about alternate methods, but please try the above and let me know how it goes.

  3. Thanks so much again for your reply and help, I have a feeling that delayed page view would solve that issue, I tried it on Android/Chrome and saw the textbox value turn after 1.5 seconds from from “undefined” to the client ID so I think that could solve the issue however i won’t be certain before maybe 1-3 days to collect some real visitors submissions. I will let you know if it completely solved the issue in case you wanna update the post with that delayed page load trick.

    btw there was a small typo on your snippet… it’s the apostrophe on ‘delayedPageview’ … it should be ‘delayedPageview’ otherwise GTM will give an error.

    1. Great, thanks for your update and for catching the delayedPageview thing, it will be useful if anyone else reads this later. I think it’s an issue with how WordPress encodes characters. Please let me know how it goes, I’ll update the post if it works out.

      1. Hi Ana,
        I wanted to confirm that your delayed page view trick really works, i no longer get undefined value anymore, Thanks so much for your help

  4. Hi Ana,
    This is such a helpful article, I have used it on three websites and it has worked on two, but keeps returning undefined on another. Our website edgarswater.com has worked perfectly, and while edgarsfruit.com is built in the same way it won’t work! I’m banging my head against the wall with this one, do you have ideas about why it’s not working?

    1. Hey Jacob, I’m glad it was useful! I checked your sites and found the difference is that the working site uses a current version of the GA tracking code, while the non-working site is running an old version of GA that was phased out 6-7 years ago. Unfortunately this method doesn’t work with the legacy GA code. Is it possible for you to update your GA code to a more recent version?

    1. Hi Max, the technique described here is just using standard web tech so it can work on any form. However you need to be able to edit your form fields and add GTM to your site. If Wix allows you to do that (I’m not familiar enough with Wix to know if they do or not), then you can follow the same approach shown here.

Leave a Reply

Your email address will not be published.