Lazy loading Google Analytics script in Angular: A step-by-step guide

Question

Lazy loading Google Analytics script in Angular: A step-by-step guide

Currently I am working with Angular 8 and I am interested in lazily loading my Google Analytics script. I came across some documentation that mentioned globally loading scripts lazily using the script array in angular.json:

"scripts": [
  "src/global-script.js",
  { "input": "src/lazy-script.js", "lazy": true },
  { "input": "src/pre-rename-script.js", "bundleName": "renamed-script" },
],

You can find more information about this on this link.

However, it seems like this method is now deprecated and there are no clear references in the new docs.

Using GTM (Google Tag Manager) has been affecting the load time of my app, so I am looking for a way to activate GTM only after my Angular app has loaded initially.

Do any of you have an example or suggestion on how to achieve this?

Thank you.

javascript angular typescript google-analytics angular8

Answer 1

Answer №1

To achieve this functionality, you can utilize a combination of promises and services. Essentially, you will need to create a service that dynamically injects script tags into the body and sets the path to the script. Once the path is set, resolve the promise so that the script's functionality can be utilized. For a comprehensive example, refer to Ben Nadel's blog.

export class DelayedScriptLoader {

private delayInMilliseconds: number;
private scriptPromise: Promise<void> | null;
private urls: string[];

// Constructor for the delayed script loader service.
constructor( urls: string[], delayInMilliseconds: number );
constructor( urls: string, delayInMilliseconds: number );
constructor( urls: any, delayInMilliseconds: number ) {
    // Code implementation here
}
// Public methods implementation here

// Private methods implementation here
}

}

// Import statements

interface AnalyticsScript {
    // Interface definition
}

export type UserIdentifier = string | number;

export interface UserTraits {
    [ key: string ]: any;
}

export type EventIdentifier = string;

export interface EventProperties {
    [ key: string ]: any;
}

@Injectable({
    providedIn: "root"
})
export class AnalyticsService {
    // Class implementation here
}

Below is an example component utilizing the service:

// Import statements

@Component({
    selector: "my-app",
    styleUrls: [ "./app.component.less" ],
    template:
    `
        <p>
            <a (click)="doThis()">Do This</a>
            &mdash;
            <a (click)="doThat()">Do That</a>
        </p>
    `
})
export class AppComponent {
    // Component implementation here
}

Answer 2

To achieve this functionality, you can utilize a combination of promises and services. Essentially, you will need to create a service that dynamically injects script tags into the body and sets the path to the script. Once the path is set, resolve the promise so that the script's functionality can be utilized. For a comprehensive example, refer to Ben Nadel's blog.

export class DelayedScriptLoader {

private delayInMilliseconds: number;
private scriptPromise: Promise<void> | null;
private urls: string[];

// Constructor for the delayed script loader service.
constructor( urls: string[], delayInMilliseconds: number );
constructor( urls: string, delayInMilliseconds: number );
constructor( urls: any, delayInMilliseconds: number ) {
    // Code implementation here
}
// Public methods implementation here

// Private methods implementation here
}

}

// Import statements

interface AnalyticsScript {
    // Interface definition
}

export type UserIdentifier = string | number;

export interface UserTraits {
    [ key: string ]: any;
}

export type EventIdentifier = string;

export interface EventProperties {
    [ key: string ]: any;
}

@Injectable({
    providedIn: "root"
})
export class AnalyticsService {
    // Class implementation here
}

Below is an example component utilizing the service:

// Import statements

@Component({
    selector: "my-app",
    styleUrls: [ "./app.component.less" ],
    template:
    `
        <p>
            <a (click)="doThis()">Do This</a>
            &mdash;
            <a (click)="doThat()">Do That</a>
        </p>
    `
})
export class AppComponent {
    // Component implementation here
}

Lazy loading Google Analytics script in Angular: A step-by-step guide

Answer №1

Similar questions

When a module with routes is imported into another module with lazy-loading, the routing system becomes disrupted

"Interacting with the ng-keypress event causes the page to smoothly scroll

Angular - Exploring the process of creating a secondary standalone build for a specific section of an application

Oops! Looks like there was an issue with parsing the module. It seems there is an unexpected character '@' in the file. Make sure you have the proper loader configured to handle this file type

I am encountering an issue with a JS addition operator while working with node.js and fs library

Encountering a bad request error while attempting to update a numeric value in MongoDB

The upload method in flowjs is not defined

Mocking an injectable Angular2 service

Looking for a jQuery Gantt Chart that includes a Treeview, Zoom functionality, and editing capabilities?

Tips for preventing the occurrence of the $digest already in progress error

Turn off Typescript compilation in Visual Studio for a webpage

What are the appropriate levels of access that an operating system should provide for web-based scripting?

How can we transfer parameters in JavaScript?

Trouble with displaying canvas images in imageDraw() function

How can I integrate Cheerio.js into an Angular 6 application?

Is it possible to pass image data response from jQuery .ajax into a new AJAX call?

Choosing between radio buttons either horizontally or vertically within a table

JQuery UI Autocomplete - Issue with loading data object

How can we make sure the selected tab opens in jQuery tabbed content?

Is there a way to reset the yAxes count of a chart.js chart in Angular when changing tabs?