Google Tag Manager integration with React and Flowrouter

help
1

Hi,

I would like to ask a frequently communicated question, “how to integrate Google Tag Manager” into Meteor app. …in my case with Flowrouter and React.

Currently, I’m using @analytics package with google-tag-manager package: @analytics/google-tag-manager - npm

I tried to integrate Google Tag Manager into my Meteor app by the following way, but when I will set some targets to visited URL’s into GTM, the measurements seems to be not reliable. (…sometimes targets are measured, sometimes not). :frowning:

import {FlowRouter} from 'meteor/ostrio:flow-router-extra';
import Analytics from 'analytics';
import googleAnalytics from '@analytics/google-analytics';
import googleTagManager from '@analytics/google-tag-manager';

let analytics = null;
let _initialized = false;
let _pageChanged = function () {
    if (analytics) {
        /* Add user info */
        if (Meteor.user()) {
            let user = Meteor.user();
            analytics.identify(user._id, {
                firstName: user.profile.firstname,
                lastName: user.profile.lastname,
                sign: user.profile.sign,
                email: user.profile.email
            });
        }

        /* Track a page view - waiting some time to process FlowRouter... */
        Meteor.setTimeout(() => {
            analytics.page();
        }, 500);
    }
};

Tracker.autorun(() => {
    Tracker.dependencies.settings.depend();
    if (!_initialized && Meteor.settings.public['ANALYTICS'] && Meteor.settings.public['ANALYTICS'].enabled) {
        let settings = Meteor.settings.public['ANALYTICS'];
        let options = {plugins: []};
        if (settings.app) {
            options.app = settings.app;
        }
        if (settings.version) {
            options.version = settings.version;
        }

        if (settings.googleAnalytics && settings.googleAnalytics.trackingId) {
            options.plugins.push(googleAnalytics({
                trackingId: settings.googleAnalytics.trackingId
            }));
        }

        if (settings.googleTagManager && settings.googleTagManager.containerId) {
            options.plugins.push(googleTagManager({
                containerId: settings.googleTagManager.containerId
            }));
        }

        analytics = Analytics(options);
        _initialized = true;
        _pageChanged();
        //console.info('Analytics initialized...');
    }
});

/* Track page changed */
Tracker.autorun(() => {
    FlowRouter.getParam();
    _pageChanged();
});


/* Track a custom event */
/*analytics.track('userPurchase', {
    price: 20
    item: 'pink socks'
})*/

Thanks a lot for each help :slight_smile:

2

I never used FlowRouter but as I see the documentation, I would probably use a global trigger.

1 Like
3

@paulishca …by your answear using Flowrouter seems to be like something wrong :smiley: Which router you are using?.. Iron?

Thanks a lot for your answer.

4

Only react-router as I only use React :slight_smile:

1 Like
5

Another solution (package) from @filipenevola:

6

How can I use this Google tag manager?