Insider Tag on Single Page Applications (SPA)
- 23 Aug 2023
- 2 Minutes to read
Insider Tag on Single Page Applications (SPA)
- Updated on 23 Aug 2023
- 2 Minutes to read
Article Summary
Share feedback
Thanks for sharing your feedback!
Single page applications — mostly built with JavaScript frameworks such as React, Vue.js, Angular, etc. — load the website content on the first page load. When a user interacts with a page, the respective content loads subsequently without reloading. In most of the cases, the page URLs change as well.
On the traditional websites, Insider tag loads every time a page loads. However, on single page applications, it loads on the first page load and does not load again on the other pages. Insider tag handles this challenge by reinitializing itself every time a page URL changes.
Single page sites and applications sometimes require reinitialization of the Insider Tag to trigger necessary functions.
When should I reinitialize the Insider tag?
You can evaluate the following most common cases for your website to understand whether it is a single page application or has single-page flows, and whether it requires you to reinitialize the Insider tag on your end.
| Case | Action |
|---|---|
| The content of your webpage changes without a page reload* (refresh). | This means your website is a single page application. However, it does not necessarily require you to re-initialize the Insider tag on your end. You should evaluate the other cases as well. |
| The page URL changes when your content changes and the document is ready with all the content loaded without a page reload* (refresh). | Insider tag detects the URL change and re-initializes itself. You do not need to re-initialize the Insider tag. |
| The page URL DOES NOT change when your content changes or there is a change in the state** on the website without a page reload* (refresh). | You must re-initialize the Insider tag once the content is ready. |
| Any page with multiple steps (e.g. registration pages, form pages, catalog pages with pagination, etc.) displays different content without a page reload* (refresh), and its page URL remains the same. | You must re-initialize the Insider tag once the content is ready. |
| You are sending a pageview hit for the newer version of your web page when it does not reload* (refresh), but its URL changes. | Insider tag detects the URL change and re-initializes itself. You do not need to re-initialize the Insider tag. |
| You are sending a pageview hit for the newer version of your web page when it does not reload* (refresh) and its URL remains the same. | You must re-initialize the Insider tag. |
| When your page completes (re)loading (refreshing), its URL also changes. However, some of the content loads with a delay after the page completes loading. | Insider tag will already have loaded and will not be able to detect the changes that load with a delay. You must re-initialize the Insider tag. |
| * A page reload provides the latest version of your web page. A page can reload upon certain triggers (e.g. clicking the reload button on the browser, navigating through a web site, etc.). ** A change in the state – in frameworks such as React, Angular, Vue.js, etc. – allows the respective component to re-render. In this case, the UI of the page also changes. | |
How can I reinitialize the Insider tag?
If your website is a single page application or has single-page flows based on the cases listed above, trigger the following function to re-initialize the Insider tag where you need to reinitialize it on your end as applicable.
Insider.eventManager.dispatch('init-manager:re-initialize');Your title goes here
Once you trigger this function, make sure that the Insider tag is reinitialized whenever there is a change in the page content but no change in the page URL
Now that you have completed your integration, you can start discovering the Insider’s InOne panel.
Was this article helpful?