Support for Google Global Site Tag (gtag) about redux-beacon

[ttmarek]

Sounds good @shayc!

Let me know if you have any questions.

[BrendanFDMoore]

Thanks for reporting the issue @shayc 🎉

🙌

[mihaiblaga89]

Any news on this? Thanks

[shayc]

@mihaiblaga89 I've been having some packed days lately (moving an apartment), hadn't had much time to work on a PR. Feel free to start your own just let me know, thanks!

[ttmarek]

For those needing Global Site Tag support here are the steps you can follow as we wait for this to be added to Redux Beacon.

Step 1

Like with the Google Analytics target, the first step is to add the tracking snippet to the head of your single page app's index.html file:

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());
  gtag('config', 'GA_TRACKING_ID', { 'send_page_view': false });
</script>

⚠️ Be sure to delete the gtag('config', 'GA_TRACKING_ID'); line from the tracking snippet provided by Google Analytics, and replace it with gtag('config', 'GA_TRACKING_ID', { 'send_page_view': false }); where GA_TRACKING_ID is the one provided to you by Google Analytics.

Step 2

Next, copy & paste the following function wherever you are configuring Redux Beacon in your project.

function GoogleSiteTag(gaTrackingId) {
  return function target(events) {
    // Ensure the target works when doing SSR
    if (typeof window === 'undefined') {
      return;
    }
    
    // Ensure the Google Site Tag snippet is available
    if (typeof window.gtag !== 'function') {
      throw new Error('window.gtag is not a function. Did you forget to include the Google Site Tag snippet?');
    }

    // Push the events to Google Site Tag
    events.forEach(event => {
      if (event.type === 'page') {
        gtag('config', gaTrackingId, event);
      } else if (event.type === 'event') {
        gtag('event', event.name, event);
      }
    });
  };
}

Step 3

Then provide this function/target when creating the middleware or a meta reducer:

const gaTrackingId = 'My GA Tracking Id'; // <<< Replace with your tracking Id.
const middleware = createMiddleware(eventsMap, GoogleSiteTag(gaTrackingId));
const metaReducer = createMetaReducer(eventsMap, GoogleSiteTag(gaTrackingId));

Step 4

Finally, in your event definitions if you want to push a page view:

const pageView = (action) => ({
   type: 'page',
   page_title: 'whatever' // probably get this by mapping the route to a map of page titles
   page_location: action.payload.location // or wherever this is in your action
   page_path: action.payload.path // or wherever this is in your action
});

And, if you want to push an event:

const event = (action) => ({
   type: 'event',
   name: 'event_name', // You need this
   'parameter_1': 'value_1',
   'parameter_2': 'value_2',
});

Review

What we've done here is create a custom Redux Beacon target for Google Site Tag. It's a very bare-bones target that I hacked together on my lunch break. I'm leaning on y'all to help me test it out. I do intend to add a similar target to Redux Beacon in the next few days that is a little more robust and feature-rich. Until then, I hope this'll do.

• I would love a pull request that adds this target to Redux Beacon (with tests and support for multiple tracking Ids)
• I would also accept a pull request adding documentation around creating custom targets, for scenarios like these where Redux Beacon doesn't expose its own.

Happy analytics tracking 🙂

[ttmarek]

Finally published! https://rangle.gitbook.io/redux-beacon/targets/googleanalyticsgtag