Google Analytics Event Tracking for Essential Grid

[jasonixr]

I have multiple essential grids on a site which open links in new tabs. I need to track these clicks in Google Analytics.

When searching Google I can see a cached support post from ThemePunch detailing how to do just that:
https://webcache.googleusercontent.com/search?q=cache:7EKSAcwJlyAJ:https://www.themepunch.com/faq/google-analytics-event-tracking-essential-grid/+&cd=1&hl=en&ct=clnk&gl=us&client=safari

Unfortunately only the cached version of the particle seems to be available - it appears they’ve removed the original from their website.

I’ve implemented the solution they detail but don’t know what to look for to see the results in Google Analytics. I’m guessing clicks will show up in Behavior > Events but wasn’t sure; especially as I’m not seeing any events triggering when I go to Realtime > Events then go and click the grids.

So my questions are:

1. Are the instructions in the cached version of the post still valid?
2. Where in Google Analytics will I see the clicks?
3. Is there a different method for tracking these that Theme.co suggests for Essential Grid?

[christopher]

Hi @jasonixr,

• I am not sure why they removed that portion of the documentation, but the instruction should work.
• To follow up with the link clicks inside Google Analytics admin, please follow the instruction below:
  https://support.google.com/tagmanager/answer/6106716?hl=en
• There is no different approach that is related to our theme. The tracking functionality is not related to the theme and it is a plugin related one which it should work with their official recommendation.

It seems that the plugin developers added a completely new documentation website and it misses the article in question.

[jasonixr]

Following the instructions on the Google Tag Manager support link you provided solved everything for me, thanks!

For anyone else looking to track essential grid hyperlink clicks - essentially there are three steps to this:

1. Add this code to the API/Javascript section of the essential grid that you want to track hyperlink clicks to:

   /* Listen for clicks for outbound links, lightbox, and filter buttons */
   jQuery(‘body’).on(‘click’, ‘.esg-grid a, .esg-filterbutton’, function() {

   var $this = jQuery(this),
       data  = '';
   
   /* if click is outbound link or lightbox */
   if($this.is('a')) {
   
       /* if clicked item is lightbox link */
       if($this.hasClass('esgbox')) data += 'Lightbox: ';
   
       data += $this.attr('href');
   
   }
   /* if click is filter button */
   else {
   
       data += 'Filter: ' + $this.text();
   
   }
   
   /* send event data to Google */
   __gaTracker('send', 'event', 'outbound', 'click', data, {'transport': 'beacon'});
   

   });

2. Create an account in Google Tag Manager and use a plugin such as “DuracellTomi’s Google Tag Manager for Wordpress” to get it working in your website (or alternatively you can create a child theme and insert the code provided by Google into functions.php but I’ve found the plugin works fine and is quicker).

3. In Google Tag Manager you create triggers, then tags which track those triggers, for each link you want to track clicks of; these create events inside Google Analytics (assuming you’ve setup Analytics for the page). Detailed instructions can be found here https://support.google.com/tagmanager/answer/6106716?hl=en

Once all of that is done you’ll be able to track the clicks in Google Analytics under Behavior > Events > Overview but you’ll need to choose “Event Label” to see them listed individually.

[ruenel]

Hello @jasonixr,

You are most welcome. It’s good to know that your issue has been resolved.
We also appreciate for sharing the information of how it was resolved.

Best Regards.