Skip to main content
All CollectionsBotify ActivationPageWorkersInstalling the PageWorkers Tag
Installing the PageWorkers Tag on Angular (v17)
Installing the PageWorkers Tag on Angular (v17)
Updated over 3 months ago

🛠 This document provides technical details of installing the PageWorkers tag on websites built with the Angular (v17) framework.

Overview

Angular is a popular JavaScript framework used to create SPA web apps that support SSR. Before reading this article, read Tech Notes: Installing the PageWorkers Tag to learn best practices for loading the PageWorkers tag on your website.

The most recent Angular version at time of this documentation is V17.

There are two methods for installing the PageWorkers tag on Angular (v17) frameworks:

Recommended Installation: Global Scope

👉 Recommendation Summary:

On Angular:

  • Insert the tag script at the top level app.component file of your application in AppComponent to be available for the entire website.

  • Use Renderer2 API from Angular.

  • Append the script to your document’s body.

  • Use async=true.

To load the PageWorkers tag for your entire website, load it at your application’s topmost level with the Renderer2 Angular API. In a typical Angular.js app, this should be the app.component.ts folder:

Load the tag using the Angular built-in API Renderer2 within the component:

  1. Instantiate Renderer2 from angular/core to modify DOM.

  2. Use isPlatformBrowser from angular/core to guarantee script won’t be added on server-side when running SSR. This is to avoid eventual issues due to attempting to insert a script tag in a server-side abstracted DOM (and not a proper browser DOM).

  3. Append script in ngOnInit() method, when the component is initialized. Only insert when on a browser environment (see Step 2 above).

  4. Use async true script. This gives proper time for the application to initialize (see more details in the Tag Loading Priority section).

  5. Append the tag into the document’s body.

  6. To avoid duplicates, confirm the script isn’t already in the document before adding it.

This code is a simplification. Depending on your codebase, you may be required to create a specific Angular service to handle the tag injection, as shown in the following example:

ScriptLoaderService example:

Tag Loading Priority

As in other SSR frameworks, we recommend inserting the tag dynamically on the client side, as outlined above. Angular lets you identify where to insert the script in the document. The best practice is to insert the script into your document’s body, though we dynamically insert the tag in this example, so appending it in the document’s head or body will have little consequence on PageWorkers' loading and execution.

This is all that is required to load the tag directly into your Angular.js application.

💡 Your tag will be loaded upon landing on any website page but will not be re-executed on navigation.

Alternate Installation: Local Scope

If you know with absolute certainty the tag should only be loaded on a specific subset of your pages, you may insert it on specific pages only. You can use the same method described above on any of your pages.

👉 With the alternate installation, the tag will only be loaded when first landing on a page where the tag is explicitly injected, whether the user lands directly on the page or comes from in-app navigation. However, regardless of the landing source, the tag will only be loaded and executed once and will not be re-executed on subsequent navigation, even on other pages of the same type.

Did this answer your question?