search

ymcatwincities / openy_activity_finder

Activity Finder for Open Y
https://github.com/YCloudYUSA/yusaopeny_activity_finder
GNU General Public License v3.0
3 stars 24 forks source link

[AF4] Google Analytics (and any other tracking tool) integration #55

Open duozersk opened 3 years ago

duozersk commented 3 years ago

While implementing Activity Finder for another client we were forced to deep dive into the Google Analytics integration. We do have a global mixin function (one place) that is called to track/send events into Google Analytics - https://github.com/ymcatwincities/openy_activity_finder/blob/4.x/openy_af4_vue_app/src/main.js#L31

The implementation of this function is handling 2 ways of integrating with Google Analytics:

First one: https://developers.google.com/analytics/devguides/collection/gtagjs https://developers.google.com/analytics/devguides/collection/gtagjs/events

      if (window.gtag) {
        window.gtag('event', action, {
          event_category: category,
          event_label: label,
          value: value
        })
      }

Second one: https://developers.google.com/analytics/devguides/collection/analyticsjs https://developers.google.com/analytics/devguides/collection/analyticsjs/events

      else if (window.ga) {
        window.ga('send', 'event', category, action, label, value)
      }

However, there are projects handling the Google Analytics integration through the Google Tag Manager. The way of registering an event then differs - the object with custom configured keys is getting pushed to the dataLayer, and then Google Tag Manager reacts to this object and sends event to Google Analytics. The hard part is the custom keys of the object as they differ from project to project.

The suggested approach is to change it in the way that allows custom project specific code to react to the event in Activity Finder and send/register this event in any way they want/require. The implementation can be similar to Drupal.behaviors - collect all the handlers and call them. Another way is to use the JavaScript event and allow custom code to react to it. I tend to use the second approach + move our 2 handlers into the event listeners (to provide examples how to handle it).

shelleygoetz commented 2 years ago

@sarah-halby added to Jira - https://openy.atlassian.net/browse/MAINTAIN-201

duozersk commented 2 years ago

Implemented in https://github.com/ymcatwincities/openy_activity_finder/pull/117