Number doesn't swap when navigating to subsequent pages in an SPA using Google Tag manager

[InvocaKnowledge]

Symptoms

When users first enter the website, the number on the header swaps, but if they navigate to other pages, the number remains unchanged. The Invoca tag is already deployed by Google Tag Manager and triggered by the event, DOM Ready.

Applies To

Invoca Tag Script

Resolution

In order to fire the tag to run again, Invoca.PNAPI.run() can be called when the page is fully loaded. In Google Tag Manager, an additional tag can be set for this method.


You can verify the event that is fired when a page is loaded and utilize that event as a trigger for rerunning the tag; The customer had an event called "Loaded a Page". By doing so, the Invoca tag will execute again when the "Loaded a Page" event is triggered, allowing the number to be swapped appropriately.

NOTE: The customer will need to work with their Engineering team to fire a custom event from their SPA in order for GTM to “hear” the Custom Event, and respond with Invoca.PNAPI.run().

The number swap flow:

1. When the user first visits the website, the initial Invoca tag runs and swaps the number in the header.
2. As the user navigates through the pages, the content is loaded dynamically.
3. Once the content for a new page is fully loaded, the custom event "Loaded a Page" is triggered. (image #1)
4. The "Loaded a Page" event is configured as the trigger for the rerun tag associated with the Invoca tag. (image #2, #3)
5. 5. When the "Loaded a Page" event is fired, the rerun tag executes, causing the Invoca tag to run again and update the header number based on the newly loaded page.

Cause

Typically, in a Single Page Application, the initial DOM-ready event might fire when the user first visits the website. However, subsequent page transitions may not trigger this event again since only the content within the page is being updated dynamically.

Since their website has a Single Page Application (SPA) structure, they'll need to ensure that the appropriate callback is triggered after the data is dynamically updated within the DOM of the page.

Additional Information

Create a Custom Event in Google Tag Manager.

Note: This is in addition to the already existing Invoca Tag added to the page via these instructions.

#1. Custom event - Loaded a Page

In the example provided, the customer already had the necessary work completed in their SPA.


#2. Additional Tag for rerunning the Invoca Tag

#3. Create a trigger utilizing the custom event