Click Tracking Divi Call-To-Action Buttons

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

I was recently asked to create a tweak that would allow a user to track clicks on Divi's call-to-action module buttons. At first I wasn't sure it would be very useful. Most CTA buttons link to another page on a website. Why not just look at pageviews for that page? I realized this was a very simplistic view and there are actually good reasons to track CTA button clicks.

More than likely you would have more ways than just the button to get to the linked page so you would never know how your users arrived at the page. You could also use tracking to split test different button colors and placement. Simply give each button a different tracking label and you'll know which ones get more clicks. 

The following tweak will enable you to do just that. Once implemented, you'll be able to add tracking to all CTA buttons as well as label each separately so you can differentiate them in Google Analytics.

PHP

We'll have to edit the Divi parent theme files for this tweak to work. Fortunately, since this tweak only adds Google Event Tracking, it's not a big deal if our changes get overwritten by a theme update. Nothing will break; you'll just have to make the changes again. 

Locate this file /themes/Divi/et-pagebuilder/et-pagebuilder.php

If using Divi 2.3.x, use the following instructions. If using Divi 2.2 or below, start here.

Find the following code near line 4661:

<script type="text/template" id="et-builder-et_pb_cta-module-template">
<h3 class="et-pb-settings-heading">
END;
esc_html_e( 'Call To Action Module Settings', 'Divi' );
echo <<<END
</h3>

<div class="et-pb-main-settings">
<div class="et-pb-option">
<label for="et_pb_title">
END;
esc_html_e( 'Title', 'Divi' );
echo <<<END
: </label>
<div class="et-pb-option-container">
<input id="et_pb_title" type="text" class="regular-text" value="<%= typeof( et_pb_title ) !== 'undefined' ? et_pb_title : '' %>" />

<p class="description">
END;
esc_html_e( 'Input your value to action title here.', 'Divi' );
echo <<<END
</p>
</div> <!-- .et-pb-option-container -->
</div> <!-- .et-pb-option -->

Add the following code below the last line of the code above:

<div class="et-pb-option">
<label for="et_pb_button_category">
END;
esc_html_e( 'Button Category', 'Divi' );
echo <<<END
: </label>
<div class="et-pb-option-container">
<input id="et_pb_button_category" type="text" class="regular-text" value="<%= typeof( et_pb_button_category ) !== 'undefined' ? et_pb_button_category : '' %>" />

<p class="description">
END;
esc_html_e( 'Input the Google Event Category.', 'Divi' );
echo <<<END
</p>
</div> <!-- .et-pb-option-container -->
</div> <!-- .et-pb-option -->
<div class="et-pb-option">
<label for="et_pb_button_action">
END;
esc_html_e( 'Button Action', 'Divi' );
echo <<<END
: </label>
<div class="et-pb-option-container">
<input id="et_pb_button_action" type="text" class="regular-text" value="<%= typeof( et_pb_button_action ) !== 'undefined' ? et_pb_button_action : '' %>" />

<p class="description">
END;
esc_html_e( 'Input the Google Event Action.', 'Divi' );
echo <<<END
</p>
</div> <!-- .et-pb-option-container -->
</div> <!-- .et-pb-option -->
<div class="et-pb-option">
<label for="et_pb_button_label">
END;
esc_html_e( 'Button Label', 'Divi' );
echo <<<END
: </label>
<div class="et-pb-option-container">
<input id="et_pb_button_label" type="text" class="regular-text" value="<%= typeof( et_pb_button_label ) !== 'undefined' ? et_pb_button_label : '' %>" />

<p class="description">
END;
esc_html_e( 'Input the Google Event Label.', 'Divi' );
echo <<<END
</p>
</div> <!-- .et-pb-option-container -->
</div> <!-- .et-pb-option -->

This will add the options to the CTA module for event tracking. Save and close this file. The next list of changes still apply to Divi 2.3 or newer.

Locate this file /themes/Divi/functions.php

* Changes to the functions.php file should never be made through the WordPress Editor. If a mistake is made, you could lock yourself out of the WP Dashboard. Changes should be made using FTP or Cpanel.

Find the following function near line 3162:

add_shortcode( 'et_pb_cta', 'et_pb_cta' );
function et_pb_cta( $atts, $content = null ) {
extract( shortcode_atts( array(
'module_id' => '',
'module_class' => '',
'title' => '',
'button_url' => '',
'button_text' => '',
'background_color' => et_get_option( 'accent_color', '#7EBEC5' ),
'background_layout' => 'dark',
'text_orientation' => 'center',
'use_background_color' => 'on',
), $atts
) );

if ( is_rtl() && 'left' === $text_orientation ) {
$text_orientation = 'right';
}
$class = " et_pb_bg_layout_{$background_layout} et_pb_text_align_{$text_orientation}";

$output = sprintf(
'<div%6$s class="et_pb_promo%4$s%7$s%8$s"%5$s>
<div class="et_pb_promo_description">
%1$s
%2$s
</div>
%3$s
</div>',
( '' !== $title ? '<h2>' . esc_html( $title ) . '</h2>' : '' ),
do_shortcode( et_pb_fix_shortcodes( $content ) ),
(
'' !== $button_url && '' !== $button_text
? sprintf( '<a class="et_pb_promo_button" href="%1$s">%2$s</a>',
esc_url( $button_url ),
esc_html( $button_text )
)
: ''
),
esc_attr( $class ),
( 'on' === $use_background_color
? sprintf( ' style="background-color: %1$s;"', esc_attr( $background_color ) )
: ''
),
( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ),
( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' ),
( 'on' !== $use_background_color ? ' et_pb_no_bg' : '' )
);

return $output;
}

Replace it with this:

add_shortcode( 'et_pb_cta', 'et_pb_cta' );
function et_pb_cta( $atts, $content = null ) {
extract( shortcode_atts( array(
'module_id' => '',
'module_class' => '',
'title' => '',
'button_url' => '',
'button_text' => '',
'background_color' => et_get_option( 'accent_color', '#7EBEC5' ),
'background_layout' => 'dark',
'text_orientation' => 'center',
'use_background_color' => 'on',
'button_category' => '',
'button_action' => '',
'button_label' => '',
), $atts
) );
$apostrophe = "'";
if ( is_rtl() && 'left' === $text_orientation ) {
$text_orientation = 'right';
}
$class = " et_pb_bg_layout_{$background_layout} et_pb_text_align_{$text_orientation}";

$output = sprintf(
'<div%6$s class="et_pb_promo%4$s%7$s%8$s"%5$s>
<div class="et_pb_promo_description">
%1$s
%2$s
</div>
%3$s
</div>',
( '' !== $title ? '<h2>' . esc_html( $title ) . '</h2>' : '' ),
do_shortcode( et_pb_fix_shortcodes( $content ) ),
(
'' !== $button_url && '' !== $button_text
? sprintf('<a class="et_pb_promo_button" href="%1$s" onClick="ga(%6$ssend%6$s, %6$sevent%6$s, %6$s%2$s%6$s, %6$s%3$s%6$s, %6$s%4$s%6$s);">%5$s</a>',
esc_url( $button_url ),
( $button_category ),
( $button_action ),
( $button_label ),
( $button_text ),
( $apostrophe )
)
: ''
),
esc_attr( $class ),
( 'on' === $use_background_color
? sprintf( ' style="background-color: %1$s;"', esc_attr( $background_color ) )
: ''
),
( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ),
( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' ),
( 'on' !== $use_background_color ? ' et_pb_no_bg' : '' )
);

return $output;
}

Now we just need to configure the new event inputs. If using Divi 2.2 or older, see below:

Divi 2.2 or older

If you are using an older version of Divi, the code will look a lot different for the et-pagebuilder.php file and slightly different for the functions.php file. Here are the changes for Divi 2.2:

Locate this file /themes/Divi/et-pagebuilder/et-pagebuilder.php

Find the following code near line 2365:

<script type="text/template" id="et-builder-et_pb_cta-module-template">
<h3 class="et-pb-settings-heading">Call To Action Module Settings</h3>

<div class="et-pb-main-settings">
<div class="et-pb-option">
<label for="et_pb_title">Title: </label>
<div class="et-pb-option-container">
<input id="et_pb_title" type="text" class="regular-text" value="<%= typeof( et_pb_title ) !== 'undefined' ? et_pb_title : '' %>" />

<p class="description">Input your value to action title here.</p>
</div> <!-- .et-pb-option-container -->
</div> <!-- .et-pb-option -->

<div class="et-pb-option">
<label for="et_pb_button_url">Button URL: </label>
<div class="et-pb-option-container">
<input id="et_pb_button_url" type="text" class="regular-text" value="<%= typeof( et_pb_button_url ) !== 'undefined' ? et_pb_button_url : '' %>" />

<p class="description">Input the destination URL for your CTA button.</p>
</div> <!-- .et-pb-option-container -->
</div> <!-- .et-pb-option -->

Add the following code below the last line of the code above:

<div class="et-pb-option">
<label for="et_pb_button_category">Google Event Category: </label>
<div class="et-pb-option-container">
<input id="et_pb_button_category" type="text" class="regular-text" value="<%= typeof( et_pb_button_category ) !== 'undefined' ? et_pb_button_category : '' %>" />

<p class="description">Input the Google Event Category.</p>
</div> <!-- .et-pb-option-container -->
</div> <!-- .et-pb-option -->

<div class="et-pb-option">
<label for="et_pb_button_tracking">Google Event Action: </label>
<div class="et-pb-option-container">
<input id="et_pb_button_action" type="text" class="regular-text" value="<%= typeof( et_pb_button_action ) !== 'undefined' ? et_pb_button_action : '' %>" />

<p class="description">Input the Google Event Action.</p>
</div> <!-- .et-pb-option-container -->
</div> <!-- .et-pb-option -->

<div class="et-pb-option">
<label for="et_pb_button_label">Google Event Label: </label>
<div class="et-pb-option-container">
<input id="et_pb_button_label" type="text" class="regular-text" value="<%= typeof( et_pb_button_label ) !== 'undefined' ? et_pb_button_label : '' %>" />

<p class="description">Input the Google Event Label.</p>
</div> <!-- .et-pb-option-container -->
</div> <!-- .et-pb-option -->

Save and close the et-pagebuilder.php file.

Locate this file /themes/Divi/functions.php

* Changes to the functions.php file should never be made through the WordPress Editor. If a mistake is made, you could lock yourself out of the WP Dashboard. Changes should be made using FTP or Cpanel.

Find the following function near line 2978:

add_shortcode( 'et_pb_cta', 'et_pb_cta' );
function et_pb_cta( $atts, $content = null ) {
extract( shortcode_atts( array(
'module_id' => '',
'module_class' => '',
'title' => '',
'button_url' => '',
'button_text' => '',
'background_color' => et_get_option( 'accent_color', '#7EBEC5' ),
'background_layout' => 'dark',
'text_orientation' => 'center',
'use_background_color' => 'on',
), $atts
) );

$class = " et_pb_bg_layout_{$background_layout} et_pb_text_align_{$text_orientation}";

$output = sprintf(
'<div%6$s class="et_pb_promo%4$s%7$s%8$s"%5$s>
<div class="et_pb_promo_description">
%1$s
%2$s
</div>
%3$s
</div>',
( '' !== $title ? '<h2>' . esc_html( $title ) . '</h2>' : '' ),
do_shortcode( et_pb_fix_shortcodes( $content ) ),
(
'' !== $button_url && '' !== $button_text
? sprintf( '<a class="et_pb_promo_button" href="%1$s">%2$s</a>',
esc_url( $button_url ),
esc_html( $button_text )
)
: ''
),
esc_attr( $class ),
( 'on' === $use_background_color
? sprintf( ' style="background-color: %1$s;"', esc_attr( $background_color ) )
: ''
),
( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ),
( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' ),
( 'on' !== $use_background_color ? ' et_pb_no_bg' : '' )
);

return $output;
}

And replace it with the following code:

add_shortcode( 'et_pb_cta', 'et_pb_cta' );
function et_pb_cta( $atts, $content = null ) {
extract( shortcode_atts( array(
'module_id' => '',
'module_class' => '',
'title' => '',
'button_url' => '',
'button_text' => '',
'background_color' => et_get_option( 'accent_color', '#7EBEC5' ),
'background_layout' => 'dark',
'text_orientation' => 'center',
'use_background_color' => 'on',
'button_category' => '',
'button_action' => '',
'button_label' => '',
), $atts
) );
$apostrophe = "'";
$class = " et_pb_bg_layout_{$background_layout} et_pb_text_align_{$text_orientation}";

$output = sprintf(
'<div%6$s class="et_pb_promo%4$s%7$s%8$s"%5$s>
<div class="et_pb_promo_description">
%1$s
%2$s
</div>
%3$s
</div>',
( '' !== $title ? '<h2>' . esc_html( $title ) . '</h2>' : '' ),
do_shortcode( et_pb_fix_shortcodes( $content ) ),
(
'' !== $button_url && '' !== $button_text
? sprintf('<a class="et_pb_promo_button" href="%1$s" onClick="ga(%6$ssend%6$s, %6$sevent%6$s, %6$s%2$s%6$s, %6$s%3$s%6$s, %6$s%4$s%6$s);">%5$s</a>',
esc_url( $button_url ),
( $button_category ),
( $button_action ),
( $button_label ),
( $button_text ),
( $apostrophe )
)
: ''
),
esc_attr( $class ),
( 'on' === $use_background_color
? sprintf( ' style="background-color: %1$s;"', esc_attr( $background_color ) )
: ''
),
( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ),
( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' ),
( 'on' !== $use_background_color ? ' et_pb_no_bg' : '' )
);

return $output;
}

Configuring Event Inputs

Save and close the functions.php file. You should be all set! You should now have the following inputs in your CTA modules in Divi:

  • Button Category
  • Button Action
  • Button Label

Fill in the appropriate data and you should immediately see results in your Google Analytics account under Real-Time->Events. Special characters should probably be avoided when labeling. You can find more information about proper labeling on Google's help page, but generally it will go something like this:

  • Button Category = Button
  • Button Action = Click
  • Button Label = Yellow CTA Button

You also need to make sure you have the right version of Google Analytics. You'll need to have updated to the Universal version, NOT Classic. Google was kind enough to make another help page to determine which version you're using.

There is a lot of code changed in this tweak. In the past, I have uploaded the entire et-pagebuilder.php and functions.php files for you to download. If anyone would like to have that option with this tweak, please let me know in the comments below. Thanks and happy click tracking!

    12 Comments

  1. Awesome work Brad. I’ll be checking this out in the morning. I would like the files to try if that’s ok. Many thanks. Marc

    Marc

    February 26, 2015

  2. Thanks a lot, it really works fine!

    Andrei

    June 30, 2015

  3. I am using divi 2.4.6.2 But when i check my et-pagebuilder.php i only see 15 lines? what am i doing wrong? Please help!

    Chris

    August 14, 2015

    • Hi Chris. Unfortunately Divi 2.4 broke this tweak. I’ve updated the post to reflect that it only works on Divi 2.2 and 2.3. Sorry for the frustrations. I’ll look into updating this for the new version.

      Brad (admin)

      August 19, 2015

  4. Hi Brad! Are you still working on the update for your solution to work on Divi 2.4? This is an excellent solution! Any thoughts on developing a plugin?

    Lauren

    December 3, 2015

  5. I am using Divi Theme 2.5.3 and when I check for the original lines of code I do not see them and thus can not update them. How do I get event tracking to work in this version of Divi?

    Chad Greene

    February 4, 2016

    • Lets try this code thing again… Here is what the code should look like with the link.

      <a id=whatever href=”www.example.com”>link name</a>

      Chad Greene

      February 4, 2016

  6. New and easy way !
    1. Insert this code into the head (divi > settings > integration)

    jQuery(function ($) {
    $( document ).ready(function() {
    $(“.button-ga”).on(“click”, function(e){
    var id = e.target.id;
    ga(‘send’, ‘event’, ‘Download’, ‘DocName’);
    });
    });
    });

    2. Add class to your desire button : “button-ga”
    you can also personalized it with an id and replace ‘DocName’ by id.

    3. check GA real time events page

    Staenk

    April 18, 2017

    • Hi Staenk,
      The method with JQuery function could help me a lot, but it seems it doesn’t work. Does we need to include the code in … ?

      Arnaud

      August 30, 2017

    • wow thanks. This is really useful, However, I got some problem

      It has appeared in analytics events but when I put conversions/goals, Google doesn’t detect it.
      here is my code anyway

      jQuery(function ($) {
      $( document ).ready(function() {
      $(“.et_pb_contact_submit”).on(“click”, function(e){
      var id = e.target.id;
      ga(‘send’, ‘event’, ‘form’, ‘submit’, ‘contact-us’);
      });
      });
      });

      Adit

      September 5, 2017

Post a Reply

Your email address will not be published. Required fields are marked *