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:

<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!