How To Use Admiral With A Single Page App (SPA) Site
How To Use Admiral With Single Page Applications (SPAs) Or Sites That Rely Heavily On Asynchronous JavaScript
When working with websites built as Single Page Applications (SPAs) or sites that rely heavily on asynchronous JavaScript, users can navigate between different sections—such as moving from an "Explore" feed to a "Search" page—without triggering a traditional, full browser page reload.
Even though the browser's URL bar changes dynamically (e.g., transitioning from .../explore/ to .../search/?text=cats), Admiral's default tracking scripts do not register these asynchronous updates as new pageviews.
Because the initial page load is the only event detected, engagement and targeting campaigns will underperform or fail to display entirely on secondary pages.
The Solution: Force Targeting on Navigation
To ensure Admiral accurately recognizes SPA navigation and triggers targeting rules when a user searches or changes views, you must manually prompt the Admiral tag to re-evaluate the targeting criteria.
By combining the native browser history.pushState() method with Admiral's custom override command, you can smoothly force retargeting on every dynamic transition.
The Fix
Call the following function immediately after an asynchronous page or tab transition occurs:
JavaScript
admiral('targeting', 'force', {});
By default, even a `pushState` navigation won't trigger re-targeting / re-engaging by Admiral—this must explicitly be done by calling `admiral('targeting', 'force', {});` in the single page app's code.
NOTE: You may specify optional custom-targeting key value pairs with this, e.g. `admiral('targeting', 'force', {customParams: {userIsLoggedIn: "true"}});`.
If you have any questions or would like assistance, please reach out to customerlove@getadmiral.com.