Track conversions with Divi’s opt-in module

Web development Marketing
April 15, 2020

Elegant Theme’s Divi is one of my favourite WordPress page builders and it has a really good email opt-in module built-in, so you don’t need to install any additional plugins…

…but it’s not perfect.

The problem

In order to track leads or other conversions from your Facebook ads, other ad campaigns or traffic, you need to be able to track conversions on your WordPress website.

One way to do it on your opt-in forms is to use a thank you page and set that as your goal destination in Google Analytics.

But sometimes you simply want to keep the user on a specific page, and at the moment there is no way to fire any custom pixels or code with just a thank you message.

Bad advice

I tried to google this but didn’t find anything useful, the closest thing to a solution was to bind a JavaScript action to the submit button.

jQuery(document).ready(function ($) {
  $('.et_pb_newsletter_button').on('click', function() {
    // Your conversion code here…
  });
});

But this has its flaws, clicking the button does not mean the form is submitted, as you might get validation errors and so on…

What we really want is to trigger our conversion when the thank you message is displayed.

Doing it the right way…

You can set up a listener in JavasScript using MutationObserver interface to watch for changes and make it fire an action the moment your thank you message element appears visible.

The MutationObserver interface provides the ability to watch for changes being made to the DOM tree.

This can seem a little advanced but here’s a simple example how to set it up an observer.

jQuery(document).ready(function ($) {

  // 1. Define the target element

  var target = $('.et_pb_subscribe .et_pb_newsletter_success');

  // 2. Set up the observer…

  var observer = new MutationObserver(function(mutations) {

    // Check if the thank you message is visible
    if(target.style.display !='none' ) {
      // Fire your pixel code here…
    }
  });

  // 3. Bind it to a target element

  observer.observe(target, {
    attributes: true
  });

});

This code works fine as long as you have only one opt-in module on the page and it is set up to use a thank you message instead of a page redirect.

The one for all solution

To improve this even further, we need to add mode functionality to:

  • create each opt-.in module it’s own observer
  • detect if it’s using thank you message or page redirect
  • ee able to identify what module fires the conversion.

First of all we’re going wrap our code inside a loop to go trough all opt-in modules on the page.

Read some attributes from the observed element to see what if it’s has a redirect or thank you message, and use it’s ID for unique identification.

And finally we’re firing a Google Analytics tracking event to track the conversion. In here you can fire any other tracking code that use javascript, like Facebook Pixel conversion events for example.

Remember that you still need to create a goal from your event in Google Analytics account to make your conversion tracking work.

Here’s the full code you need to add in your Divi child theme’s javascript file:

jQuery(document).ready(function ($) {

  $('.et_pb_subscribe').each(function() {

    // Check for redirection
    if ($(this).attr('data-redirect_url')) {
      var target = this.querySelector('.et_subscribe_loader');
    } else {
      var target = this.querySelector('.et_pb_newsletter_success');
    }
    // Set module label to 'optin' or use module ID if defined
    var event_label = $(this).prop('id') || (event_label = 'optin');

    var observer = new MutationObserver(function(mutations) {

      if(target.style.display !='none' ) 
        // Fire google analytics event
        gtag('event', 'generate_lead', { 'event_category': 'engagement', 'event_label': event_label });
      }

    });

    observer.observe(target, { 
      attributes: true 
    });

  });
});

While this example was for Divi opt-in mobile, same technique can be applied to any Ajax opt-in or contact form that has an inline thank you message, as they all work pretty much the same way.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Ville Teikko

Ville Teikko is an award-winning creative & digital marketing specialist with over 20 years of experience in the digital design and advertising industry. Currently working as a Head of Digital at Harva Marketing.

Thanks for reading

Share this post with your friends!