Launching a rocket is really easy, for individuals who’ve achieved it! Identical goes with Google Tag Supervisor. It truly is like constructing a rocket, however as soon as you’ve got achieved it the primary time, you hardly ever need to take care of it once more.
Fundamentals
This text will not be about the usage of Google Tag Supervisor, nor how-to set up tags. It’s an try to create an Angular service that takes away the ache of sustaining it. The next issues are fundamentals to remember, in order that we stay sane, as a result of the docs of GTM will make you insane.
- It is GTM, that is how we are going to discuss with it
- GA4 is Google Analytics, model 4
- We are going to by no means use
gtag.jslibrary - We are going to set up on Net solely
- The docs are too overwhelming, most of my work is round these paperwork:
- I might need used
gr-andgarage-prefix interchangeably, forgive me
Setup Google Tag Supervisor
Beginning with tag manager web site, create an account and an preliminary container of sort internet.
It is strongly recommended to put the scripts as excessive within the head tag as attainable, so I’m not going to aim to insert the script through Angular – although I noticed some on-line libraries do this. We will additionally create our script on PLATFORM_INITIALIZER token. Read about Angular initialization tokens. However I see no added worth.
<!-- index.html -->
<head>
<!-- Google Tag Supervisor -->
<script>(operate(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.begin':
new Date().getTime(),occasion:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,doc,'script','dataLayer','GTM-XXXXXX');</script>
<!-- Finish Google Tag Supervisor -->
</head>
<physique>
<!-- someplace in physique -->
<!-- Google Tag Supervisor (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
peak="0" width="0" model="show:none;visibility:hidden"></iframe></noscript>
<!-- Finish Google Tag Supervisor (noscript) -->
</physique>
All what this does is create a worldwide dataLayer array, push the primary gtm.begin occasion to it, then inject the script.
Okay, now what?
The tip in sight
GTM is a only a consolidation layer that gathers info from the web site, and sends it ahead to wherever we hook it as much as. Probably the most pure use of GTM is, in fact, Google Analytics. Hooking up GTM to GA4 is straight ahead, the actual problem although is knowing but yet another model of Analytics. (Common has retired, GA4 is in the home.)
The GA4 monitoring code is buried beneath Admin > Property > Information Streams > Net. Or do as I do once I lose it, sort monitoring id within the search field. The default Enhanced measurement is about with “web page views” by default, bear in mind this.
Ranging from list of trigger types on GTM, the one we’re in search of is Web page view triggers > Initialization to configure GA4. In GTM, we’ll create a tag for Analytics “configuration” which is triggered on initialization.
What we’re in search of is on historical past change, ship a page_view occasion to GA4.
Based on Automatically collected events, page_view is collected on historical past change, robotically.
| Occasion | Set off | Parameters |
|---|---|---|
| page_view (internet) | every time the web page hundreds or the browser historical past state is modified by the lively website. Collected by default through enhanced measurement. | page_location (web page URL), page_referrer (earlier web page URL), engagement_time_msec. Along with the default language, page_location, page_referrer, page_title, screen_resolution |
So we must be set. To check, in GTM, we use Preview characteristic, and in GA4 we use Realtime studies. Working my app, clicking round to completely different routes, I can see page_view occasions piling up.
A aspect node to recollect, permitting “Enhanced Measurements” in GA4, for instance
scrolloccasions, or making a tag in GTM with a set off sortscrollhave the identical impact. GA4 will log scroll occasions each methods. The principle benefit of doing it in GTM; wonderful tuning the set off situations is way simpler.
If “Enhanced measurements” was not set, we’d have needed to create a separate tag in GTM, with set off History change.
Navigation and historical past change
Three situations I wish to take a look at earlier than I transfer on. Navigation with replaceUrl, skipLocationChange and Location.go.
-
replaceUrllogs a correctpage_view:
No additional work right here -
location.gologs apage_viewoccasion with mistaken web page title:
That is anticipated, as a result of this modifications the URL with out navigating away from element, thus web page title sticks round. On the constructive aspect, this trick is useful solely on similar route, so no work wanted right here. -
skipLocationChangedoesn’t log any occasions
To catch the undetected occasion, a method entails work on GTM, with no interference of the developer, and the opposite is customized occasions for handbook logging
Web page view handbook logging
Finally, I must do the next in my code
locationChange() {
this.router.navigate(['.', { page: 2 }], {skipLocationChange: true});
// log a page_view, learn path elsewhere
TellGTMToLogEvent('garage_page_view');
}
In GTM, will create a set off, may very well be something. After which a tag, for that set off, that pushes page_view into GA4. (It took me some time to be taught that!)
Be aware, something that may be inbuilt GTM with out the assist of an Angular developer, is out of scope of this text. However there are various, many choices obtainable in GTM. Click on occasions particularly are fairly wealthy.
My private recommendation when coping with GTM: distinguish every little thing by a suffix or a prefix, simply to get a way of what is taking place, if you happen to do wish to attain 50 with out dropping your thoughts. I’ll depend on the time period storage or gr to tell apart my customized occasions.
- New Set off: Web page View Set off (add suffix “Set off”)
- Kind: Customized Occasion
- Occasion Title:
garage_trigger(that is our knowledge layer occasion)
- New Tag: Web page View Tag (add suffix “Tag”)
- Kind: Google Analytics: GA4 Occasion
- Occasion identify:
page_view(that is the occasion going to GA4)
In our Angular App, let me create a static service. It’s static till we have to change it.
// GTM service
// declare the dataLayer to make use of in typescript
declare let dataLayer: any[];
export class GtmTracking {
// first technique, register a garage_trigger occasion
public static RegisterView(): void {
dataLayer.push({ occasion: 'garage_trigger' });
}
}
In my element that has subsequent hyperlink
nextPage() {
// improve web page, and get all different params
const web page = this.paramState.currentItem.web page + 1;
const isPublic = this.paramState.currentItem.isPublic;
// navigate with skipLocationChange
this.router.navigate(['.', { page, public: isPublic }], {
skipLocationChange: true
});
// register view
GtmTracking.RegisterView();
}
In GTM, the garage_trigger ought to register, and in GA4, I ought to see the page_view. I’m assuming all knowledge will likely be despatched with it.
Working domestically, clicking subsequent, and the page_view registers. However it registers info from the present URL. I need it to register a view for a unique URL.
/tasks;web page=2;ispublic=false
To be able to move the additional parameters, “;web page=2;ispublic=false” we first create a GTM variable for that function.
- New Variable: Storage page_location Variable (add suffix “Variable”)
- Kind: Information Layer variable
- Variable Title:
garage_page_location.
In Web page View Tag we are going to add the parameter to be despatched to GA; page_location, and set it to the next:
{{Web page Path}}{{Storage page_location Variable}}
Now in our Angular app, we simply want so as to add garage_page_location variable to the dataLayer
// in element
nextPage(occasion: MouseEvent) {
// ...
// register view occasion move the additional params
GtmTracking.RegisterView(`;web page=${web page};public=${isPublic}`);
}
In GTM service
public static RegisterView(page_location?: string): void {
// add garage_page_location
dataLayer.push({ occasion: 'garage_trigger', garage_page_location: page_location });
}
We’re presupposed to see a page_view occasion, with /product;web page=2;public=false logged in GA4.
Right here it’s Realtime report.
That was only a fast run with GTM. To prepare it higher, let’s take a look at the opposite beneficial parameters.
The information mannequin
Wanting into recommended events record and reference of all parameters of recommended events, I can see a sure sample, a knowledge mannequin that appears like this:
// hottest parameters of beneficial occasions
interface IGTMEvent {
occasion: string;
item_list_name: string;
gadgets: {
item_id?: string,
item_name?: string,
worth?: quantity,
foreign money?: string,
index?: quantity}[];
technique?: string;
content_type?: string;
item_id?: string; // occured as soon as in Share occasion
worth?: quantity;
foreign money?: string;
search_term?: string;
}
There are few others. What we wish to accomplish is adhering to 1 rule: Angular code, must be agnostic to the monitoring knowledge mannequin. Not solely you might have different attention-grabbing third social gathering trackers, however Analytics itself modifications. So the GTM service we hope to perform, has its personal inside mapper, that maps our App fashions into GTM fashions. Which later interprets them into GA4 fashions, or another third social gathering.
Listed here are some examples I need to remember as I construct my service:
- In a login script, I count on to have the ability to do that on login success:
GtmTracking.Log({occasion: 'garage_login', technique: 'Google', supply: 'Login web page'});
GtmTracking.Log({occasion: 'garage_search', supply: 'Merchandise record', searchTerm: searchTerm});
GtmTracking.Log({occasion: 'garage_view_item_list', supply: 'Product record', gadgets: outcomes});
- On clicking to view a search end result:
GtmTracking.Log({occasion: 'garage_view_item', supply: 'Product record', place: merchandise.index, merchandise: merchandise});
And so forth. The thought is to ship every little thing to GTM knowledge layer, and let the GTM skilled jiggle with it, to create the tags of alternative. From my expertise, the supply of the engagement: the place on website it occurred, may be very useful.
My knowledge mannequin is trying like this:
export interface IGtmTrack {
occasion: EnumGtmEvent; // to regulate occasions site-wise
supply?: EnumGtmSource; // to regulate the place the occasion is coming from
}
Each name to register an occasion, has to determine itself. Then we run a mapper to ship the completely different elements to dataLayer. The GTM service is now like this:
// GTM service
declare let dataLayer: any[]; // Declare google tag
export enum EnumGtmSource {
// any supply in internet is added right here
// left aspect is inside, proper aspect is GTM
ProductsList = 'merchandise record',
ProductsRelatedList = 'merchandise associated',
ProjectsList = 'tasks record',
// ...and so on
}
export enum EnumGtmEvent {
// any occasion are added right here, prefixed with storage to clear head
// left aspect is inside, proper aspect is GTM
Login = 'garage_login',
PageView = 'garage_page_view',
// ...and so on
}
export interface IGtmTrack {
occasion: EnumGtmEvent;
supply?: EnumGtmSource;
}
export class GtmTracking {
public static RegisterEvent(observe: IGtmTrack, additional?: any): void {
const knowledge = { occasion: observe.occasion };
// relying on occasion, map, one thing like this
knowledge['of some attribute'] = GtmTracking.MapExtra(additional);
// push knowledge
dataLayer.push(knowledge);
}
// the mappers that take an present mannequin, and switch it into GTM mannequin
// for instance merchandise:
non-public static MapProducts(merchandise: IProduct[]) {
// map merchandise to "gadgets"
return { gadgets: merchandise.map(GtmTracking.MapProduct) };
}
non-public static MapProduct(product: IProduct, index: quantity) {
// limitation on GTM, the property names have to be recognized by GA4 for best operations
return {
item_name: product.identify,
item_id: product.id,
worth: product.worth,
foreign money: 'AUD',
index
};
}
// then all different mappers for worker, and undertaking, search, login... and so on
non-public static MapSearch(key phrase: string) {
return { search_term: key phrase };
}
non-public static MapLogin(technique: string) {
// this higher flip into Enum to tame it
return { technique };
}
}
The array of “gadgets” can’t be damaged down in GTM, we are able to solely move it as is. In case your app is dependent upon any of GA4 recommended parameters, you should use the identical parameter names inside gadgets array. That is a GTM limitation.
The extras handed may very well be of undertaking sort, an worker, or a string, or array of strings… and so on. That makes RegisterEvent loaded with if-else situations, the less complicated approach is to present public mappers for all attainable fashions, and map earlier than we move to 1 RegisterEvent.
We will additionally place our parameters inside one prefixed property, it will free us from prefixing all properties, and worrying about clashing with automated dataLayer properties.
The GTM service now appears to be like like this:
public static RegisterEvent(observe: IGtmTrack, additional?: any): void {
// separate the occasion, then move every little thing else inside gr_track
const knowledge = {
occasion: observe.occasion,
gr_track: { supply: observe.supply, ...additional },
};
dataLayer.push(knowledge);
}
// additionally flip mappers into public strategies
In GTM, the gr_track will be dissected, and a number of variables created, with worth set to gr_track.one thing. For examples:
Storage observe gadgets variable: gr_track.gadgets
In Triggers, we will create a set off for each occasion. garage_click or garage_login… and so on.
Lastly, the tags. Monitoring view_item_list of a listing of merchandise, Storage observe gadgets variable is handed as GA4 gadgets, and the Storage observe supply variable will be handed as item_list_name.
In our code, the place the product record is considered:
GtmTracking.RegisterEvent({
occasion: EnumGtmEvent.Checklist, // new occasion garage_view_list
supply: EnumGtmSource.ProductsList // 'product record'
}, GtmTracking.MapProducts(merchandise.matches));
Web page view
Now let’s rewrite the RegisterView, mapping the page_location, with a correct occasion identify garage_page_view. Within the service, create a brand new mapper
public static MapPath(path: string): any {
return { page_location: path };
}
And in element, on subsequent click on:
nextPage() {
// ...
// register occasion
GtmTracking.RegisterEvent(
{ occasion: EnumGtmEvent.PageView },
GtmTracking.MapPath(`;web page=${web page};public=${isPublic}`)
);
}
View merchandise in a listing
Let’s make one other one for the beneficial view_item, with occasion supply. We wish to observe a click on from search outcomes, to view a selected merchandise. Within the product record template, we add a click on handler:
// product record template
<ul>
<li *ngFor="let merchandise of merchandise" (click on)="trackThis(merchandise)">
{{ merchandise.identify }} - {{merchandise.worth }}
</li>
</ul>
In element
trackThis(merchandise: IProduct) {
GtmTracking.RegisterEvent(
{
occasion: EnumGtmEvent.Click on, // normal click on
supply: EnumGtmSource.ProductsList, // coming from product record
},
GtmTracking.MapProducts([item]) // ship gadgets array
);
}
Since GA4 parameters all recommend merchandise to be in an array, even when it have been one merchandise, then we wrap it in an array. However the index will be the placement within the record. So, let’s adapt the mapper to just accept a second argument for place of ingredient:
public static MapProducts(merchandise: IProduct[], place?: quantity) {
const gadgets = merchandise.map(GtmTracking.MapProduct);
// if place is handed, change the ingredient index,
// this occurs solely when there's a single merchandise
if (place) {
gadgets[0].index = place;
}
return {gadgets};
}
And in template, let’s move the index
<ul class="rowlist" >
<li *ngFor="let merchandise of merchandise; let i = index" (click on)="trackThis(merchandise, i)">
{{ merchandise.identify }} - {{merchandise.worth }}
</li>
</ul>
And in element:
trackThis(merchandise: IProduct, place: quantity) {
GtmTracking.RegisterEvent(
{
occasion: EnumGtmEvent.Click on,
supply: EnumGtmSource.ProductsList,
},
GtmTracking.MapProducts([item], place) // move place
);
}
When clicking, that is what is about in dataLayer
The GTM tag may very well be set like this:
In GA4 now we are able to wonderful tune our studies to know the place essentially the most clicks come from, the search outcomes, the associated merchandise, or could also be from a marketing campaign on the homepage.
Take a look on the last service on StackBlitz
Placing it to the take a look at
These are beneficial occasions, however we are able to enrich our GA4 studies with additional customized dimensions, we simply must needless to say GA4 limits customized occasions to 500, undeletable. Listed here are some instance studies a GA4 skilled may construct, and let’s examine if our knowledge mannequin holds up:
GA4 report of “reveal particulars” clicks in a number of places
The GA4 report wants a customized occasion: gr_reveal and a supply parameter (already arrange), to create a report like this:
| supply | product – search | product – particulars | homepage – marketing campaign | Totals |
|---|---|---|---|---|
| Occasion identify | Occasion depend | Occasion depend | Occasion depend | Occasion Depend |
| Totals | xxxx | xxxx | xxxx | xxxx |
| gr_reveal | xxxx | xxxx | xxxx | xxxx |
Supply will be item_list_name, or a brand new GA4 dimention. Not one of the enterprise of the developer. Our date mannequin then appears to be like like this:
{
occasion: 'gr_reveal',
gr_track: {
supply: 'homepage - marketing campaign',
gadgets: [
{
item_name: 'Optional send item name'
// ...
}
]
}
}
GA4 report of Add occasions
The brand new occasion to introduce is gr_upload. The supply may very well be the placement on website, along with motion: click on, or drag and drop.
| supply | product – particulars | homepage – navigation | Totals | |
|---|---|---|---|---|
| motion | click on | drag | click on | |
| Occasion identify | Occasion depend | Occasion depend | Occasion depend | Occasion Depend |
| Totals | xxxx | xxxx | xxxx | xxxx |
| gr_upload | xxxx | xxxx | xxxx | xxxx |
Our knowledge mannequin then appears to be like like this
{
occasion: 'gr_upload',
gr_track: {
supply: 'product - particulars',
// we want a mapper for this
motion: 'drag'
}
}
The information mannequin holds, however we want an additional motion mapper:
// management it
export enum EnumGtmAction {
Click on = 'click on',
Drag = 'drag'
}
export class GtmTracking {
// ...
// map it
public static MapAction(motion: EnumGtmAction) {
return { motion }
}
}
// ... in element, use it
GtmTracking.RegisterEvent({
occasion: EnumGtmEvent.Add,
supply: EnumGtmSource.ProductsDetail,
}, GtmTracking.MapAction(EnumGtmAction.Drag));
Including worth
One fixed parameter your GA4 skilled may insist on is worth, particularly in ecommerce web sites. The worth will not be a prepared property, however relatively a calculation of things values. So each MapList technique, could have its personal worth calculation, and once more, that is an additional.
Alter the GTM service mapper
public static MapProducts(merchandise: IProduct[], place?: quantity) {
// ...
// calculate worth
const worth = gadgets.scale back((acc, merchandise) => acc + parseFloat(merchandise.worth), 0);
// return gadgets and worth
return { gadgets, worth, foreign money: 'AUD' }; // foreign money is required in GA4
}
To this point, so good.
Subsequent
What occurs when dataLayer bloats? Let’s examine it subsequent week 😴. Along with making a directive for normal clicks that want much less particulars, and digging into third social gathering trackers like sentry.io, to see what else we want for our service.
Thanks for studying this far of one more lengthy put up, have you ever noticed any crawling bugs? let me know.