Event Tracking Social Media Links

Hey ronaldalexander,

Thank you for using Enfold.

Is this for a google analytics tracking? How did you implement it for the mailto links? You may need to add an onclick attribute to the social icon using javascript/jQuery.

Best regards,
Ismael

Hi,

Is this for a google analytics tracking? How did you implement it for the mailto links?

How do you want to track it? Are you using google analytics?

Have you created custom event goals?

// https://support.google.com/analytics/answer/1032415

You may have to modify the includes > helper-social-media.php file directly or use Javascript.

Best regards,
Ismael

Hi,

Sorry for the confusion.

You can try this script in the functions.php file to trigger the corresponding gtag function when one of the social icons is clicked.

add_action('wp_footer', 'ava_social_gtag');
function ava_social_gtag(){
?>
<script type="text/javascript">
    (function($) {  
        $('.social_bookmarks_facebook a').on('click', function() {
            gtag('event', 'Click', { 'event_category': 'Facebook' })
        });

        $('.social_bookmarks_mail a').on('click', function() {
            gtag('event', 'Click', { 'event_category': 'Mail' })
        });

        $('.social_bookmarks_tel a').on('click', function() {
            gtag('event', 'Click', { 'event_category': 'Telephone' })
        });
    })(jQuery);
</script>
<?php
}

Best regards,
Ismael

Hi,

I didn’t know that you’re using custom icons. You need to assign or apply a custom css class attribute to those icons and use them in place of the selectors in the above function.

// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Thanks for the update.

Best regards,
Ismael

Hi,

Thank you for the update.

We applied an additional custom css class to the icons and adjusted the script accordingly.

//-------------------------------
// Social Media icons + tracking
//-------------------------------
add_action('wp_footer', 'ava_social_gtag');
function ava_social_gtag(){
?>
<script type="text/javascript">
    (function($) {  
        $('.cta-icons-kontakt-1 li:nth-child(1) a').on('click', function(e) {
            gtag('event', 'Click', { 'event_category': 'Whatsapp' })
        });

        $('.cta-icons-kontakt-1 li:nth-child(2) a').on('click', function(e) {
            gtag('event', 'Click', { 'event_category': 'Facebook' })
        });

        $('.cta-icons-kontakt-2 li:nth-child(1) a').on('click', function(e) {
            gtag('event', 'Click', { 'event_category': 'Phone' })
        });
		
		$('.cta-icons-kontakt-2 li:nth-child(2) a').on('click', function(e) {
            gtag('event', 'Click', { 'event_category': 'Email' })
        });
    })(jQuery);
</script>
<?php
}

The icons executes the gtag function now when clicked. (see private field)

Best regards,
Ismael

Hi,

You’re welcome! Glad we could be of help. Please don’t hesitate to open a new thread if you need anything else.

Have a nice day.

Best regards,
Ismael