Wordpress Development

How to Set Up Tracking Links in WordPress Contact Forms: A Practical Guide for Google, Facebook, Instagram, and LinkedIn with Contact Form 7

Tracking links, also known as UTM (Urchin Tracking Module) parameters, are essential tools in digital marketing that allow advertisers to measure the effectiveness of their online campaigns. These parameters are added to the end of URLs to capture relevant information about the traffic coming to your website. In this guide, we will show you how to set up these tracking links in WordPress contact forms using the Contact Form 7 plugin, covering campaigns on Google, Facebook, Instagram, and LinkedIn.

Step 1: Installing and Activating Contact Form 7

First, ensure that Contact Form 7 is installed and activated on your WordPress site. Here’s how it should appear in the plugins section of your WordPress dashboard:

Contact form 7

Step 2: Creating and Configuring the Form

Follow these steps to configure a form that can capture UTM parameter data:

  1. Create a new form: Go to the Contact Form 7 section in your dashboard and select "Add New" to create a form. Customize the fields according to your contact needs.
  2. Add hidden fields for UTM parameters: To capture data such as campaign medium (utm_medium), source (utm_source), campaign name (utm_campaign), and others, add hidden fields to your form. Use this format for each field you want to capture:
[hidden utm_source default:shortcode_attr]

Repeat this process for each UTM parameter you need to capture.

Step 3: Storing UTM Data in Cookies

To ensure the UTM parameters remain available even after users navigate through different pages on your site, it’s advisable to store these data in cookies. Implement the following script in your site's footer to store UTM parameters:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var urlParams = new URLSearchParams(window.location.search);
    ['utm_source', 'utm_medium', 'utm_campaign'].forEach(function(param) {
      var value = urlParams.get(param);
      if (value) document.cookie = param + "=" + value + ";path=/";
    });
  });
</script>

Step 4: Configuring the Form to Use Cookie Values

Ensure that your Contact Form 7 form uses the values stored in cookies if they are available. Modify the shortcode of the hidden fields as follows:

[hidden utm_source default:get_cookie "utm_source"]

This adjustment will allow the hidden field to automatically capture the utm_source value from the corresponding cookie.

Example URL with UTM Parameters

Here is an example of a URL using paralleldevs.com with UTM parameters for tracking a campaign:

https://paralleldevs.com?utm_source=google&utm_medium=cpc&utm_campaign=spring_sale&utm_content=ad_variation1&utm_term=web_development

This URL includes the following UTM parameters:

  • utm_source=google: Indicates that the traffic is coming from Google.
  • utm_medium=cpc: Specifies that this is a cost-per-click campaign.
  • utm_campaign=spring_sale: Names the campaign as "spring_sale".
  • utm_content=ad_variation1: Differentiates between different ad variations in the same campaign.
  • utm_term=web_development: Identifies the keyword used, in this case, "web development".

Conclusion

Integrating UTM parameters into your contact form in WordPress using Contact Form 7 allows you to effectively track where your visitors are coming from and how they arrived at your site. This information is vital for evaluating and optimizing your digital marketing campaigns. By following these steps, you can capture valuable data that will help improve your advertising efforts.

Here’s an image to visually complement your article, illustrating a digital marketing setup with a focus on using Contact Form 7 in WordPress and analyzing UTM parameters for various platforms such as Google, Facebook, Instagram, and LinkedIn.