Anyone made this work for Ionic2 by any chance?

[epetre]

I'm trying Ionic2 and it would be nice if we there was a way to access the plugin directly in js if it exists.

[abinici]

Hi,

I can confirm that this plugin works with Ionic 2. Here is the provider that I wrote for an Ionic 2 app:

Click to expand

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

declare var cordova: any;

declare class GoogleTagManager {
    init(success: any, error: any, id: string, period: number);
    trackPage(success: any, error: any, pageURL: string);
    trackEvent(success: any, error: any, category: string, eventAction: string, eventLabel: string, eventValue: number);
    pushEvent(success: any, fail: any, eventData: any);
}

@Injectable()
export class GoogleTagManagerService {
    private gtm: GoogleTagManager;
    private isInitialized: boolean = false;

    public initialized$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

    init(id: string) {
        return new Promise((resolve, reject) => {
            if (window['cordova']) {
                this.gtm = cordova.require('com.jareddickson.cordova.tag-manager.TagManager');

                let cbSuccess = (e) => {
                    console.info('GTM init was successful', e);
                    this.isInitialized = true;
                    this.initialized$.next(true);
                    resolve(e);
                }
                let cbError = (e) => {
                    console.error('GTM init was not successful', e);
                    reject(e);
                }

                this.gtm.init(cbSuccess, cbError, id, 30);
            }
        });
    }

    trackPage(path: string) {
        if (this.isInitialized === false) {
            console.info('Simulated >> GTM.trackPage', path);
            return Promise.resolve();
        }

        console.info('GTM.trackPage', path);

        return new Promise((resolve, reject) => {
            let cbSuccess = (e) => {
                console.info('GTM trackPage was successful', e);
                resolve(e);
            }
            let cbError = (e) => {
                console.error('GTM trackPage was not successful', e);
                reject(e);
            }

            this.gtm.trackPage(cbSuccess, cbError, path);
        });
    }

    trackEvent(category: string, eventAction: string, eventLabel: string, eventValue: number) {
        if (this.isInitialized === false) {
            console.info('Simulated >> GTM.trackEvent', category, eventAction, eventLabel, eventValue);
            return Promise.resolve();
        }

        console.info('GTM.trackEvent', category, eventAction, eventLabel, eventValue);

        return new Promise((resolve, reject) => {
            let cbSuccess = (e) => {
                console.info('GTM trackEvent was successful', e);
                resolve(e);
            }
            let cbError = (e) => {
                console.error('GTM trackEvent was not successful', e);
                reject(e);
            }

            this.gtm.trackEvent(
                cbSuccess, cbError,
                category, eventAction, eventLabel, eventValue
            );
        });
    }

    pushEvent(data = {}) {
        if (this.isInitialized === false) {
            console.info('Simulated >> GTM.pushEvent', data);
            Promise.resolve();
        }

        return new Promise((resolve, reject) => {
            let dataObj = data;
            dataObj['event'] = event;

            let cbSuccess = (e) => {
                console.info('GTM pushEvent was successful', e);
                resolve(e);
            }
            let cbError = (e) => {
                console.error('GTM pushEvent was not successful', e);
                reject(e);
            }

            this.gtm.pushEvent(cbSuccess, cbError, data);
        });
    }
}

Here is an example of usage:

this.gtm.pushEvent({
    prop1: var1,
    prop2: var2
}).then(() => {
    this.gtm.trackPage(`/somePage`);
})

When used in a browser the provider will write log messages to the browser console for verification purposes.

[jsk548]

@abinici , Could you please provide the list of variables created in tag manager container.

[jsk548]

@abinici, any update on this ?

[ayhanbinici]

Hi @jsk548,

Sorry mate, didnt have time to comment.

In my tag manager the following built-in variables have been defined:

Name	Type
App ID	App ID
App Name	App Name
App Version Code	App Version Code
Container Version	Container Version
Event	Custom Event

And the following user-defined variables:

Name	Type
Event Category	Data Layer Variable
Event Interaction	Data Layer Variable
Event Label	Data Layer Variable
Event Value	Data Layer Variable
Google Analytics ID	Constant
Page Path	Data Layer Variable
User ID	Data Layer Variable

[jsk548]

@abinici ,
Thanks for the reply. i don't think that this built in variables will be shown when we choose WEB. So do we need to create this variables as user defined ?

[ayhanbinici]

@jsk548 , you can try. Otherwise, I would recommend you create containers for native apps if you want the built-in variables. Thats what I have done, one container for Android and the other one for iOS. When I initialise the GTM, I use an id thats is determined by the platform.