If you have integrated or are integrating the Web SDK, you can skip this guide, as this function will be covered in the Web SDK.
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 cases, the page URLs change as well.
On traditional websites, the 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 you 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 content loads with a delay after the page completes loading. | The 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 website, etc.). ** A change in 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 you 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');Now that you have completed your integration, you can start discovering the Insider’s InOne panel.