A single-page application (SPA) is a Web application that loads a single HTML page and dynamically updates that page as the site visitor interacts with the application. SPAs use AJAX and HTML5 to create fluid and responsive Web applications without the constant page reloads found in traditional Web applications.
Integrating a Single-Page Application Site with Monetate
Many Monetate clients build their sites on SPA frameworks such as Angular and React. Depending on your site's technical requirements and development resources, Monetate offers options to implement its platform.
Implementation Methods
Three recommended implementation methods are available:
- Monetate JavaScript API — For this front-end implementation, the most important consideration is the tracking required at framework state changes because there may not be full page loads to allow Monetate to track new pages. You must retrack these page appropriately. See AJAX Site Updates for information.
- Engine API — This implementation is server-side and uses Monetate's RESTful API.
- Hybrid — This implementation uses both the Engine API and the Monetate tag.
See List of JavaScript API Methods and What They Unlock for details on each method available with the Monetate JavaScript API. See Types of Implementations for more information about options to implement the Engine API.
Single-Page Application Front-End Implementations
In addition to the main implementation methods available, SPA frameworks can also use a front-end method of implementation. In this method, the Monetate tag remains, and the Engine API is used—but from the front end.
For example, in an SPA for which the front-end stack is based on React, some out-of-the-box actions operating on the DOM confuse React (or other JavaScript frameworks), and then block it from rendering subsequent changes. By using the Engine API, hooked into some data mutation and template-change functions, actions can instead change front-end templates or component configurations. The SPA, therefore, still works as designed while allowing clients to create A/B tests and personalization experiences.
Here are some of the pros of using an SPA front-end implementation:
- There's no need to change back-end services.
- Data is still collected with the Monetate tag, so there's no need to re-implement data collection.
Here are some of the cons of using an SPA front-end implementation:
- Some full-page tests still require a reload, depending on the front-end design.
- Monetate's visual tools—Action Builder and Content Builder—don't work in this mode.
- Content masking is difficult in this mode.