Angular GTM Universal Analytics

A collection of services, and directives to easily integrate universal analytics features such as:

Virtual page views
Custom Events
Ecommerce Events

Getting Started:

After installation, import the GtmUniversalAnalyticsModule into the AppModule imports array and invoke the forRoot method passing an object with the property id pointing to your GTM_ID.

imports: [
	...
    GtmUniversalAnalyticsModule.forRoot({
		id: YOUR_GTM_ID,
	}),
],

GTM Configuration:

In order to make this library work with your GTM container, we will need to import some tags, triggers, and variables into your GTM container.

Fortunately, Tag Manager has the option to import configuration from other GTM container into yours.

Click on this link to download the config file in JSON format.

Once you have the file, go to your GTM container and click on the "Admin" tab. It is right next to the "Version" tab.

Then, click on "Import Container" and upload the config file you download.

Select your work space if you have multiple ones or create a new one.

The last option is up to you. If you want to overwrite or merge.

Don't worry about the option you select. You can alway reverse your changes back.

Before you publish your changes, you will need to make a change to one of the variables.

Click on Variables on the left side hand, and look for "Universal Analytics || Tracking Id". Here you will need to type your own Universal Analytics Id.

And done!

Universal Analytics Ecommerce Configurations:

To enable th Ecommerce, click on "Admin" on the left bottom left corner of your Universal Analytics dashboard.

On the the "View" column, click on "Ecommerce Settings" ans set Enable Ecommerce to ON.

GtmUaVirtualPageViewsService:

Note: This service has to be called on the app.component.ts

sendVirtualPageViews();

Create a subscription to the Angular Router to start sending virtual page views to Universal Analytics via the dataLayer

Note: This method needs to be called on the constructor.

Example:

constructor(
  ...
  private gtmUaVirtualPageViewsService: GtmUaVirtualPageViewsService,
) {
  this.gtmUaVirtualPageViewsService.sendVirtualPageViews();
};

GtmUaCustomEventsService:

Before start sending events from your Angular app, read the GTM Configuration section

sendCustomEvent(customEvent: GtmUaCustomEvent);

Send custom events to Universal Analytics via the GTM dataLayer.

If you're unfamiliar with events in Google Analytics you should first read the article About Events

Example:

interface GtmUaCustomEvent {
	category: string;
	action: string;
	label?: string;
	value?: number;
	nonInteraction?: boolean;
}

<a (click)="redirectToFacebookPage()">Facebook</a>

public redirectToFacebookPage(): void {

  const gtmCustomEvent = {
    category: 'social media',
    action: 'click',
    label: 'facebook icon',
    value: 100,
    nonInteraction: false
  };

  this.gtmUaCustomEventsService.sendCustomEvent(gtmCustomEvent);

  location.href = 'https://facebook.com/xyz-company';
};

GtmUaEcommerceEventsService:

Before start sending ecommerce events from your Angular app, read:

GTM Configuration section
Universal Analytics Ecommerce Configurations section

sendProductImpressionsEvent(products: UaEcommerceProduct[], currencyCode: CurrencyCode = 'USD');

Send an "angularEcommerce" event to Universal Analytics via the dataLayer.

The object pushed to the dataLayer contains ecommerce meta data for measuring product impressions

The product object should be available at the moment this method is called.

Arguments:

products:
currencyCode: = 'USD'

The currencyCode argument has a default value of USD.

interface UaEcommerceProduct {
	name: string;
	id: string;
	price?: string;
	brand?: string;
	category?: string;
	variant?: string;
	list?: string;
	position?: number;
	quantity?: number;
	coupon?: string;
}

const ecommerceProducts: UaEcommerceProduct = [
	{
		name: 'Triblend Android T-Shirt',
		id: '12345',
		price: '15.25',
		brand: 'Google',
		category: 'Apparel',
		variant: 'Gray',
		list: 'Search Results',
		position: 1,
	},
	{
		name: 'Donut Friday Scented T-Shirt',
		id: '67890',
		price: '33.75',
		brand: 'Google',
		category: 'Apparel',
		variant: 'Black',
		list: 'Search Results',
		position: 2,
	},
];

const currencyCode = 'EUR';

this.gtmUaEcommerceEventsService.sendProductImpressionsEvent(
	ecommerceProducts,
	currencyCode,
);

sendProductClickEvent(products: UaEcommerceProduct[], searchList?: string);

Send an "angularEcommerce" event to Universal Analytics via the dataLayer.

The object pushed to the dataLayer contains ecommerce meta data for measuring product clicks

The products object should be available at the moment this method is called.

Arguments:

products:
searchList:

The searchList argument is optional.

interface UaEcommerceProduct {
	name: string;
	id: string;
	price?: string;
	brand?: string;
	category?: string;
	variant?: string;
	list?: string;
	position?: number;
	quantity?: number;
	coupon?: string;
}

const ecommerceProducts: UaEcommerceProduct = [
	{
		name: 'Triblend Android T-Shirt',
		id: '12345',
		price: '15.25',
		brand: 'Google',
		category: 'Apparel',
		variant: 'Gray',
		list: 'Search Results',
		position: 1,
	},
	{
		name: 'Donut Friday Scented T-Shirt',
		id: '67890',
		price: '33.75',
		brand: 'Google',
		category: 'Apparel',
		variant: 'Black',
		list: 'Search Results',
		position: 2,
	},
];

const searchList = 'T-shirts clearance';

this.gtmUaEcommerceEventsService.sendProductClickEvent(
	ecommerceProducts,
	searchList,
);

sendViewProductDetailsEvent(products: UaEcommerceProduct[], searchList?: string);

Send an "angularEcommerce" event to Universal Analytics via the dataLayer.

The object pushed to the dataLayer contains ecommerce meta data for measuring product details views

The products object should be available at the moment this method is called.

Arguments:

products:
searchList:

The searchList argument is optional.

interface UaEcommerceProduct {
	name: string;
	id: string;
	price?: string;
	brand?: string;
	category?: string;
	variant?: string;
	list?: string;
	position?: number;
	quantity?: number;
	coupon?: string;
}

const ecommerceProducts: UaEcommerceProduct = [
	{
		name: 'Triblend Android T-Shirt',
		id: '12345',
		price: '15.25',
		brand: 'Google',
		category: 'Apparel',
		variant: 'Gray',
		list: 'Search Results',
		position: 1,
	},
	{
		name: 'Donut Friday Scented T-Shirt',
		id: '67890',
		price: '33.75',
		brand: 'Google',
		category: 'Apparel',
		variant: 'Black',
		list: 'Search Results',
		position: 2,
	},
];

const searchList = 'T-shirts clearance';

this.gtmUaEcommerceEventsService.sendViewProductDetailsEvent(
	ecommerceProducts,
	searchList,
);

sendAddToCartEvent(products: UaEcommerceProduct[], currencyCode: CurrencyCode = 'USD');

Send an "angularEcommerce" event to Universal Analytics via the dataLayer.

The object pushed to the dataLayer contains ecommerce meta data for measuring product add to cart

The products object should be available at the moment this method is called.

Arguments:

products:
currencyCode: = 'USD'

The currencyCode argument has a default value of USD.

Note: Make sure the products argument passed is not an empty Array.

interface UaEcommerceProduct {
	name: string;
	id: string;
	price?: string;
	brand?: string;
	category?: string;
	variant?: string;
	list?: string;
	position?: number;
	quantity?: number;
	coupon?: string;
}

const ecommerceProduct: UaEcommerceProduct = [
	{
		name: 'Triblend Android T-Shirt',
		id: '12345',
		price: '15.25',
		brand: 'Google',
		category: 'Apparel',
		variant: 'Gray',
		list: 'Search Results',
		position: 4,
	},
];

const currencyCode = 'EUR';

this.gtmUaEcommerceEventsService.sendAddToCartEvent(
	ecommerceProducts,
	currencyCode,
);

sendRemoveProductFromCartEvent(products: UaEcommerceProduct[]);

Send an "angularEcommerce" event to Universal Analytics via the dataLayer.

The object pushed to the dataLayer contains ecommerce meta data for measuring product removable from the shopping cart.

The products object should be available at the moment this method is called.

Arguments:

products:

Note: Make sure the products argument passed is not an empty Array.

interface UaEcommerceProduct {
	name: string;
	id: string;
	price?: string;
	brand?: string;
	category?: string;
	variant?: string;
	list?: string;
	position?: number;
	quantity?: number;
	coupon?: string;
}

const ecommerceProduct: UaEcommerceProduct = [
	{
		name: 'Triblend Android T-Shirt',
		id: '12345',
		price: '15.25',
		brand: 'Google',
		category: 'Apparel',
		variant: 'Gray',
		list: 'Search Results',
		position: 4,
	},
];

this.gtmUaEcommerceEventsService.sendRemoveProductFromCartEvent(
	ecommerceProducts,
);

sendPromotionImpressionsEvent(promotions: UaEcommercePromotion[]);

Send an "angularEcommerce" event to Universal Analytics via the dataLayer.

The object pushed to the dataLayer contains ecommerce meta data for measuring promotion impressions.

The promotion object should be available at the moment this method is called.

Arguments:

promotions:

Note: Make sure the promotions argument passed is not an empty Array.

interface UaEcommercePromotion {
	id: string;
	name: string;
	creative?: string;
	position?: string;
}

const ecommercePromotions = [
	{
		id: 'JUNE_PROMO13',
		name: 'June Sale',
		creative: 'banner1',
		position: 'slot1',
	},
	{
		id: 'FREE_SHIP13',
		name: 'Free Shipping Promo',
		creative: 'skyscraper1',
		position: 'slot2',
	},
];

this.gtmUaEcommerceEventsService.sendPromotionImpressionsEvent(
	ecommercePromotions,
);

Development:

Running unit tests:

Run `nx test tracking-gtm-universal-analytics --watch` to execute the unit tests.

@gdlc/angular-gtm-universal-analytics

Angular GTM Universal Analytics

Directory

Getting Started:

GTM Configuration:

Universal Analytics Ecommerce Configurations:

GtmUaVirtualPageViewsService:

sendVirtualPageViews();

Example:

GtmUaCustomEventsService:

sendCustomEvent(customEvent: GtmUaCustomEvent);

Example:

GtmUaEcommerceEventsService:

sendProductImpressionsEvent(products: UaEcommerceProduct[], currencyCode: CurrencyCode = 'USD');

sendProductClickEvent(products: UaEcommerceProduct[], searchList?: string);

sendViewProductDetailsEvent(products: UaEcommerceProduct[], searchList?: string);

sendAddToCartEvent(products: UaEcommerceProduct[], currencyCode: CurrencyCode = 'USD');

sendRemoveProductFromCartEvent(products: UaEcommerceProduct[]);

sendPromotionImpressionsEvent(promotions: UaEcommercePromotion[]);

Development:

Running unit tests:

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@gdlc/angular-gtm-universal-analytics

Angular GTM Universal Analytics

Directory

Getting Started:

GTM Configuration:

Universal Analytics Ecommerce Configurations:

GtmUaVirtualPageViewsService:

sendVirtualPageViews();

Example:

GtmUaCustomEventsService:

sendCustomEvent(customEvent: GtmUaCustomEvent);

Example:

GtmUaEcommerceEventsService:

sendProductImpressionsEvent(products: UaEcommerceProduct[], currencyCode: CurrencyCode = 'USD');

sendProductClickEvent(products: UaEcommerceProduct[], searchList?: string);

sendViewProductDetailsEvent(products: UaEcommerceProduct[], searchList?: string);

sendAddToCartEvent(products: UaEcommerceProduct[], currencyCode: CurrencyCode = 'USD');

sendRemoveProductFromCartEvent(products: UaEcommerceProduct[]);

sendPromotionImpressionsEvent(promotions: UaEcommercePromotion[]);

Development:

Running unit tests:

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads