What is a Single-Page Application?
A Single Page Application (SPA) is a type of web application designed to deliver a seamless user experience by loading a single HTML page and dynamically updating its content as users interact with it. SPAs are often used for mobile and desktop websites viewed in a browser, offering an alternative to native applications. By leveraging JavaScript frameworks like React, Angular, or Vue.js, SPAs fetch data and render views on the client side without requiring full-page reloads. This approach makes SPAs faster and more responsive, providing an app-like experience directly in the browser.
How does SiteSpect support SPAs?
SiteSpect integrates seamlessly with SPA and PWA websites. Whether your site contains occasional dynamic content or is built as a full SPA, you can use our client-side testing capabilities in addition to all of SiteSpect’s core functionality, including server-side feature flagging, find & replace, visual editor, audience creation, and advanced analytics. Any of these techniques can be used for A/B testing or for applying changes globally or to targeted audiences.
SiteSpect operates as a reverse proxy between users and the web server. This means we intercept all incoming user requests and outgoing server responses, allowing us to make changes to the HTML, CSS, JavaScript, and API calls before these requests are loaded in the user’s browser. SiteSpect injects the logic for required libraries and campaign changes into the initial HTML page load on the first request of a user’s visit.
Unlike traditional tag-based testing tools, with SiteSpect everything is included in the HTML from the start and does not require the full site to render before separate JavaScript can load, fetch, and modify content. This means that client-side changes are applied seamlessly, without flicker or delay.
Supported SPA frameworks
SiteSpect is framework agnostic and works with all common SPA frameworks, including, but not limited to, React, Angular, Vue.js, Ember.js, Backbone, and Svelte.
How to set up client-side campaigns in SiteSpect
The SPA configuration in SiteSpect is a collection of small JavaScript libraries and the client-side variation. Your account team will set these up for you during onboarding. Once everything is configured, you have access to all client-side capabilities without any further setup.
Configuring libraries
The client-side libraries are injected and controlled using a global change on all HTML pages, and include:
- ssdomvar.js uses mutation observers to identify when changes should be applied and logic to evaluate client-side variations and triggers and apply changes.
- core.js captures client-side events and sends data to SiteSpect to populate metrics.
- generic-adapter.js is not required, but often added to leverage mutation observers with custom JavaScript code.
Learn more about deploying client-side libraries.
Injecting the Client-Side Variation
The client-side variation injects the instructions for what to change from the campaigns and variations your users are assigned to. By default, this is inserted onto the page right after the body tag, but the injection point is configurable. Contact your account team or the SiteSpect Help Desk at helpdesk@sitespect.com or +1-844-859-1900 for more information.
Building a campaign
Once the SPA configuration is set up, you can build campaigns and metrics using the client-side tools native to the campaign and component builders in SiteSpect. All client-side options are available in the standard campaign builder, alongside server-side and search & replace variations, allowing you to combine variation types to integrate seamlessly with your SPA campaign. And like server-side changes, client-side variations are defined by triggers and what to change.
Triggers
Unlike a server-side trigger, which is evaluated separately on every network request, client-side triggers insert a listener once and evaluate continuously, monitoring all new and dynamic content in real time. In addition to path, hash, and query triggers, client-side triggers allow for custom JavaScript logic to define when your variations should apply.
What to change
Client-side options for what to chage are a little different from other change types in SiteSpect. Instead of search and replace fields, you have a selector and options for what to change.
Selector: this is the name of the CSS selector that you want to modify. When a page component matches this selector, SiteSpect applies the settings in the changes section as you have defined them.
Changes:
- Update HTML replaces the inner HTML content of the selector defined above with the HTML that you enter. If your selector matches more than once, your change will be made to all instances. You do not need to include the container tags for your selector.
- Set Attribute adds the attribute name(s) and value(s) to the selector defined above. If an attribute already exists, such as “href”, the existing value will be replaced with the value you define.
- Set CSS adds the CSS rules to the selector defined above. If a CSS rule already exists, such as “background-color”, the existing value will be replaced with the value you define. Note that if there is an !important rule, this won't override it unless this rule is also !important.
- Custom JavaScript lets you provide a custom function to execute on the selector defined above. Note that this function is run against all matching components, with an option to apply changes only once to each matching component, preventing the function from running again if that component later mutates. The current component the function is working on can be accessed with the keyword this.
Analytics & Integrations
Metrics
Client-side triggers are available for event-based metrics, just like campaigns and variations, and are treated just like server-side metrics in your reports. Due to the nature of how the values are collected,
numeric measurement and string capture metrics are restricted to server-side triggers only. We find that for many metrics that require a value capture, such as order total, there are separate network calls made to process a request, and values can be extracted from those. Read more about metrics, or reach out to helpdesk and your account team if you need assistance.
Analytics integrations
SiteSpect’s Web Analytics Tag Transformation and Segmentation (WATTS™) feature offers a robust solution for tracking user behavior and campaign effectiveness in single-page applications where content updates dynamically without full-page refreshes. Using WATTS, you can view, segment, and analyze SiteSpect campaign data within a third-party web analytics program. Read more about setting up WATTS for your SPA.