Add Google Analytics Event Tracking to The Grid plugin

[mdraak]

I’d like to be able to track clicks on the filters and lightbox links in Google Analytics when using The Grid.

I’ve modified this code which was developed for the Essential Grid. The console.logs appear properly, but the events don’t appear in GA.

  jQuery("body").on("click", ".tg-grid-holder a, .tg-show-filter", 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("tg-media-button")) data += "Lightbox: ";
      console.log("item clicked");

      data += $this.attr("href");
    } else {
      /* if click is filter button */
      data += "Filter: " + $this.text();
      console.log("filter clicked");
    }

    /* send event data to Google */
    gtag("send", "event", "outbound", "click", data, {
      transport: "beacon"
    });
  });

Any suggestions on what the issue could be?

[mdraak]

Got it. My gtag wasn’t correct. Here’s the working code for future use.

  /* listen for clicks for outbound links, lightbox, and filter buttons on gallery grid */
  jQuery("body").on("click", ".tg-grid-holder a, .tg-show-filter", 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("tg-media-button")) data += "Lightbox: ";

      data += $this.attr("data-tolb-alt");
    } else {
      /* if click is filter button */
      data += "Filter: " + $this.text();
    }

    /* send event data to Google */
    gtag("event", "click", {
      event_category: "Gallery Interactions",
      event_label: data
    });
  });

[ruenel]

Hey There,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.