Single-Page Applications or SPAs have become a growing trend over the past few years; however, in the past, SPAs and Tag Management Solutions have not played very well together since SPAs do not reload web pages and web content as non-SPAs do.
To resolve the issues between SPAs and tags served via Ensighten, we have created a simple Ensighten Manage App to change the way Ensighten fetches new tags between SPA page changes.
The first step to get started with making Ensighten Manage play nice with your SPA website is to start to use the Ensighten Manage App called "Single-Page Application Framework". Once you find the App, hover over the App and click the "Configure" button.
To configure Ensighten to handle your SPA website, you will need to tell Ensighten how to determine a page change. With most SPA websites, the URL hash tag or some data layer element (such as page name) usually changes whenever there is a SPA page change. Another common method is an Event Listener (see MDN reference) that your developers have created.
Monitor your data layer's pagename variable
Monitor the URL hash tag
The Single-Page Application Framework allows you to send extra "fake" URL parameters with each Ensighten Server Component call to build better Ensighten Conditions and limit the amount of tag code downloaded to the page so that your website loads as fast as possible.
Simply enter in any extra URL parameters you want sent with the Ensighten Server Component call in this section.
** See the getExtraParams article for more information about the serverComponent and URL parameters
- Reload All Scripts
Where the Tag should Execute
After you've setup Ensighten to either monitor a data element or event, you can select the Ensighten Space to put this Framework in.
After you've selected your Ensighten Space, select the Synchronous condition and ensure that the Timing Setting of this Framework is set to "As soon as possible".
Finally, save and commit your new SPA Framework.
**Note that this Framework requires to be run synchronously with an immediate timing in order to properly handle executing Tags on your SPA website.
To verify your SPA Framework is working, make sure your new SPA Framework tag is in the committed state and then use the Ensighten Developer Tools Extension for Chrome or Firefox to put your browser into Ensighten Testing Mode.
Next, navigate to your website and open your browser's developer tools or your network proxy tool and filter the network requests by "serverComponent.php".
Finally, navigate between a few pages and you should see the "serverComponent.php" request whenever a page change happens like below. If you do not see this happen, please contact Ensighten Support or your Ensighten Consultant to help debug why it is not working properly.
How it Works
The way the Single-Page Application Framework works is that it re-calls the Ensighten Server Component after every page change sending Ensighten the new URL and any extra URL parameters you specify. Then, the Ensighten Server Component tells the browser what new tags to download and execute.
Note that this only re-downloads and executes any asynchronous tags or tags with Ensighten Conditions. Any tags that are synchronous will only be downloaded and executed with the first SPA page view.