Do you need help with digital marketing?Start here
  • Contact Form 7 (CF7) is a WordPress plugin that can manage multiple forms on your website. It also provides the flexibility to customize the form and mail contents with simple markup. Some supportive features of CF7 are:

    • Form customization
    • Ajax-powered submission
    • CAPTCHA
    • Akismet spam filter
    • And so on.

    How to track your website contact form 7 with GTM and Google Analytics

    I have already published a video on this at our YouTube Channel “Brandconn Digital”, which you can watch by clicking on below.

    Contact form 7 tracking Steps

    Step 1 – Create a custom javascript HTML Tag

    Create a custom javascript tag that pushes a Data Layer event when mail is sent after successful form submission including the form ID. Go to your Google Tag Manager account to create an HTML tag.

    • Select Tags >> New
    • Give any descriptive name to this tag: My tag name is “Contact Form 7 Mailsent
    • Choose tag type: Custom HTML Tag
    • Copy and paste the below-mentioned javascript in the HTML section.
    “<script>
    document.addEventListener( ‘wpcf7mailsent’, function( event ) {
    dataLayer.push({
    ‘event’ : ‘wpcf7successfulsubmit’,
    ‘CF7formID’ : event.detail.contactFormId
    });
    }, false );
    </script>”

     

    • Trigging fire this tag on all pages and Click Save

    After following all the above steps, it will look something like this:

    Contact Form 7 Tracking Custom HTML GTM Tag

    Step 2 – Create GTM Trigger

    A trigger that looks for the Data Layer event for data when mail is sent, and triggers to the Google Analytics Event tag that will be based on Goal conversion.

    Trigger Configuration:

    • Trigger name – Mine is “Contact Form 7 Trigger”, you can choose your own
    • Trigger Type – Custom Event
    • Event name – wpcf7successfulsubmit
    • This trigger fire on – All Custom Events
    • Click Save

    Contact Form 7 Tracking GTM Trigger

    Step 3 – Create a new tag to pass values in Google Analytics Event for goal conversion

    Tag Configuration:

    • Tag name – My tag name is “Contact form Submission”, you can choose your own
    • Tag Type – Google Analytics: Universal Analytics
    • Track Type – Event
    • Category – You can set this as you want and this is going to show up in Google Analytics Events report. I named this “Contact form Submission”.
    • Action – Again, the choice is yours. I have selected “Submitted Mailsent”.
    • Label – If you want to track different forms separately, you need to set this as {{CF7-formID}} and need to create a user defined variable to pick the form id and pass it in Label.
    • Value – Add a value if you want, I did not add.
    • Non-Interaction Hit – This is again your decision, I select True/False, it will effectively change your bounce rates when the hit is fired.
    • Tracking ID – Your tracking ID. I have set up as a user defined constant variable, which explains why it says {{GA Tracking Code}}
    • More Settings & Advanced Settings – If you are an analytics whiz, there are advanced settings in here that you may want to configure. However, I did not change any of them.

    Trigging: Firing trigger would be that we have created in Step 2

    When you are done, it will look something like this:

    Contact Form 7 Tracking Google Analytics GTM Event Tag

    Step 4 – Create a form Id user-defined Data Layer Variable

    Add a new user-defined Variable called CF7-formID. Setup the Data Layer Variable Name as CF7formID (case sensitive).

    Variable name: CF7-formID

    Variable Configuration:

    • Variable Type – Data Layer Variable
    • Data Layer Variable Name – CF7formID
    • Data Layer Version – Version 2
    • Click Save

    Contact Form 7 Tracking User defined form ID Variable

    Step 5 – Setting up the Goal Conversion in Google Analytics

    Into Google Analytics, Navigate to Admin >> View >> Goals >> +New Goal

    And structure it as

    Goal setup: Select Custom

    Goal description:

    • Name – Name it as you want. I have named it as “Get In Touch Form” on my tracking form name that is “Get In Touch

    Type: Select Event.

    Goal details:

    • Category: Equals to > Contact Form 7 Submission (It is case sensitive whatever YOU named it in GTM)
    • Action: Equals to > Submitted Mailsent (It is also case sensitive whatever YOU named it in GTM)
    • Label: If you want to track each form of your website separately, then select the form ID of the form you want to track. Leave this blank if you don’t want to track different forms separately. My form Id is 704, so I put the same.
    • Value: You can add another variable here if you want, like page URL, etc.
    • Use the Event Value as the Goal Value: If you had a value attached to each event, put here. Since I did not, I will not.

    Contact Form 7 Tracking Google Analytics Goal Conversion setup

    • Now click ‘Save

    Your Contact Form 7 tracking and goal conversion are setup now. If you have followed every step perfectly then Goal conversion and Events data will appear in the Google Analytics Goal Conversion and Events reports. For testing purpose, you can fill a form and see Event and Goal conversion in Google Analytics real-time report.  If you are happy with your goal conversion and tracking, then submit the current workspace in GTM and publish it.  If you want to set up other goals for different form IDs, then just repeat the process but change the Label in the Goal Conversion.

    If you are running short of time or find it tricky then you can always handover this task to us. We are a reputed digital marketing agency and offer a wide range of digital solutions including online reputation management. We have a team of expert SEO specialists, web developers and web designers, who will provide you with every service ranging from web design to web development to paid marketing with the best solution and help your business grow in the competitive digital marketing world.

    You should also read to this

     

  • MenuMore From Brandconn Digital.