www.kameleoon.com Open in urlscan Pro
95.216.36.100  Public Scan

Submitted URL: https://pages.kameleoon.com/e3t/Btc/DI+113/cf1Jb04/VWN8ZD8fCQYyW57GCmb4WpWmtW97gBTk4FXjXcN78Lwvy3q3phV1-WJV7CgVNwN6Zf24bWsbF...
Effective URL: https://www.kameleoon.com/en/blog/run-ab-tests-any-single-page-application-spa-framework?utm_campaign=Product%20Updates&ut...
Submission: On February 24 via api from CH — Scanned from DE

Form analysis 0 forms found in the DOM

Text Content

Skip to main content
Assets/MenuCreated with Sketch.
 * Platform
   * A/B testing
   * Full Stack
   * Personalization
   * Why Kameleoon
     * A single platform
     * Ease of use
     * AI-powered conversion
     * Focused on security
     * Powerful integrations
     * Tech DNA
 * Specialties
   * Made for
     * Marketers
     * Product Managers
     * Developers
   * Specialties
     * E-commerce & Retail
     * Travel & Tourism
     * Automotive
     * Financial Services
     * Media & Entertainment
     * Healthcare
     * Data Privacy & Security
 * Customers
 * Resources
   * Product
     * Developer Documentation
     * User Manual
   * Blog
   * Success Stories
   * Ebooks
   * Academy
   * Events
   * Feature Management
   * Covid-19 & Experimentation
 * Partners
   * Tech Partners & Integrations
   * Agency Partners
 * Company
   * About
   * Support
   * Press
 * Log in
 * Request a demo

 * Platform
    * A/B testing Continuous A/B testing to provide the best user experience
      across all channels.
    * Full Stack Experimentation meets feature flagging and management.
    * Personalization Personalize the experience by better understanding your
      visitors with AI.
   
   
    * Why Kameleoon
       * A single platform
       * Ease of use
       * AI-powered conversion
       * Focused on security
       * Powerful integrations
       * Tech DNA
   
   Let's discuss your challenges
   Would you like to talk to our experts and learn more about our platform?
   Request a demo
 * Specialties
    * Made for
       * Marketers
       * Product Managers
       * Developers
   
    * Specialties
       * E-commerce & Retail
       * Travel & Tourism
       * Automotive
      
       * Financial Services
       * Media & Entertainment
       * Healthcare
       * Data Privacy & Security
   
   Ebook
   
   Kameleoon included as a new entrant in The Forrester Wave™
   Learn more
 * Customers
 * Resources
    * Product
       * Developer Documentation
       * User Manual
      
      A/B test product features with feature flagging
      https://www.kameleoon.com/en/blog/kameleoons-new-feature-flagging-ui-and-techno…
   
    * Blog
    * Success Stories
    * Ebooks
    * Academy
    * Events
   
    * A/B testing
    * Personalization
    * Feature Management
    * Covid-19 & Experimentation
   
   Kameleoon named top-rated A/B testing platform by TrustRadius
   /en/blog/kameleoon-top-rated-ab-testing-trustradius
   How insurance companies can grow faster with A/B testing
   https://pages.kameleoon.com/en/data-ab-testing-insurance
   Toyota generates 97% more leads thanks to predictive targeting
   https://pages.kameleoon.com/en/toyota-perso-predictive
 * Partners
    * Tech Partners & Integrations Kameleoon integrates with your existing
      analytics and marketing technology ecosystem.
   
    * Agency Partners We work with a range of Kameleoon-certified agencies
   
   Become a partner
   Are you an Analytics Provider, a Marketing Agency or a Vendor? Let’s work
   together.
   Contact us
 * Company
    * About
    * Support
   
    * Careers
    * Press
   
   Connect with us
   We'd love to learn more about you. Send us a message!
   Contact us
 * Log in
 * Request a demo

Switch Language
 * EN
 * List additional actions
 * EN
 * FR
 * DE


 1. Blog
 2. Product Updates
 3. Run A/B tests on any Single Page Application (SPA) framework


RUN A/B TESTS ON ANY SINGLE PAGE APPLICATION (SPA) FRAMEWORK

August 12, 2021
Reading time: 
8 min
Share this article
 * 
 * 
 * 
 * 
 * 

Application stacks are ever changing and do so very quickly. Single Page
Applications (SPA) built with a JS Framework such as React, GatsbyJS, Vue.JS,
among many others, have become very popular as they offer very smooth
experiences and are particularly appreciated by users. A/B testing them can
become a real headache for marketers if their optimization solution doesn't
support these stacks.


SPAS DON’T REQUIRE PAGE RELOADS, CREATING A CHALLENGE FOR A/B TESTING SOLUTIONS

When a user views a traditional non-SPA page and clicks on a link, a new page
with a different URL loads, and the A/B testing snippet also reloads to make
sure the context of the loaded page is evaluated by the solution. This enables
you to track a user journey and to contextualize their experience if necessary.

With a Single Page Application, dynamic navigation means that once the page is
loaded, it doesn’t require page reloading. Instead, virtual page views will be
loaded by the App as visitors browse different areas of the website. The goal is
to build a more natural user experience similar to what you could have with
native mobile apps, by removing page loads, and reducing waiting time. This is
made possible with JavaScript frameworks such as ReactJS, VueJS, or GatsbyJS.

But this lack of reloading has an impact on A/B tests, because the solution will
only load once at the first page seen by the visitor. When a visitor browses
from one page to another, the solution is simply not aware of it. If the tag of
your optimization solution loads only once and doesn’t update according to the
visitor’s progression, tracking his user journey in real time becomes
complicated, if not virtually impossible.


KAMELEOON IS COMPATIBLE WITH ANY SINGLE PAGE APPLICATION FRAMEWORK

What good is a powerful technology if it can’t be used in any type of situation?
Whatever JavaScript framework you are using for your Single Page Applications,
you will be able to optimize it with Kameleoon.

There are usually 2 different scenarios in Single Page Applications. Each of
them may have an impact on experiments built with the Kameleoon graphic editor
because our application file will only load at the first page seen by the
visitor.


1. THE PAGE DOESN’T RELOAD, BUT THE URL IS UPDATED

Most Single Page Applications that are developed today are of this type. Even
though the SPA loads virtual page views as visitors navigate different sections
of the site, the URLs are being rewritten dynamically by the SPA.

Kameleoon will automatically detect visitor navigation between pages by
observing dynamic URL changes. When a change occurs, Kameleoon reloads its
entire engine and re-evaluate the whole context of the page so that experiments
can still be run as usual on Single Page Apps.


2. THE URL REMAINS STATIC

This case is less common, and much more complicated. When the URL doesn’t
change, most solutions won’t be able to detect any changes that occur within the
Single Page App, because no transition to a new URL is detected. Additionally,
most SPAs can add additional elements or dynamically change elements as a
visitor interacts with the app.

Kameleoon solves this issue by monitoring in real time new updates by using
MutationObservers on the SPA (even if the page itself doesn’t fully reload), so
that we can apply (or reapply) variation changes when something has changed on
the website.

For developers who utilize our Activation API to code experiments, there is now
a new function that can be called on -demand to force the reloading of
Kameleoon's engine to manage advanced use cases.

For users of the graphic editor, actions currently supported by Kameleoon
include style changes, wording modification, position updates (swap, insert
after or before) and use of custom CSS. Insertions of new elements on the page
are not currently supported.

--------------------------------------------------------------------------------

Ready to get started? See this step-by-step guide and technical documentation.

Request a demo to see this feature and the Kameleoon platform in action.

Questions? Curious? We'd love to hear from you. Please reach us at
product@kameleoon.com

Topics covered by this article
Product Updates
A/B testing
Recommended articles for you


CONFIGURE YOUR FEATURE FLAGS AND LAUNCH YOUR RELEASES USING NEXT-LEVEL
MULTI-ENVIRONMENT MANAGEMENT CAPABILITIES




BUILD PERSONALIZED POP-UPS, BANNERS AND OTHER UX WIDGETS WITH KAMELEOON’S BRAND
NEW NO-CODE GRAPHIC EDITOR




GET THE FULL IMPACT OF YOUR EXPERIMENTS WITH KAMELEOON’S NEW CUSTOM ATTRIBUTION
WINDOW


You may also enjoy these articles
E-commerce


5 WAYS TO INCREASE ROI ON YOUR MAGENTO A/B TESTING PROGRAM

February 22, 2022
Product Updates


CONFIGURE YOUR FEATURE FLAGS AND LAUNCH YOUR RELEASES USING NEXT-LEVEL
MULTI-ENVIRONMENT MANAGEMENT CAPABILITIES

February 22, 2022
Product Updates


BUILD PERSONALIZED POP-UPS, BANNERS AND OTHER UX WIDGETS WITH KAMELEOON’S BRAND
NEW NO-CODE GRAPHIC EDITOR

February 7, 2022
LinkedIn
Twitter
instagram
Youtube
facebook
Switch Language
 * EN
 * List additional actions
 * EN
 * FR
 * DE

 * Platform
   * A/B testing
   * Full Stack
   * Personalization
   * Why Kameleoon
   * Kameleoon In-depth Review
   * Kameleoon vs. Google Optimize 360
   * Kameleoon vs. Optimizely
   * Kameleoon vs. VWO
 * Specialties
   * E-commerce & Retail
   * Travel & Tourism
   * Automotive
   * Financial Services
   * Media
   * Healthcare
   * Data Privacy & Security
   * Marketers
   * Product owners
   * Developers
 * Resources
   * Blog
   * Success Stories
   * Ebooks
   * Academy
   * Events
   * What is A/B Testing?
   * What is Personalization?
   * What is Feature Management?
   * Covid-19 & Experimentation
 * Partners
   * Tech Partners & Integrations
   * Agency Partners
 * Customers
   * Our customers
 * Company
   * About
   * Support
   * Career
   * Press
   * GDPR
   * CCPA
   * HIPAA
   * Contact us
   * Request a demo
 * Support
   * User Manual
   * Developer Documentation
   * FAQ
   * Platform Status

Kameleoon, 2021. All Rights Reserved
Links
Legal Notice & CSU
Privacy Policy
PCI DSS
Cookies settings
Close

Cookies management panel
By allowing these third party services, you accept their cookies and the use of
tracking technologies necessary for their proper functioning.

Allow all cookies

Deny all cookies

 * Google Analytics (ga.js)
   This service can install 7 cookies. Read more View the official website
 * Hubspot
   This service can install 6 cookies. Read more View the official website
 * Vimeo
   This service can install 8 cookies. Read more View the official website
 * YouTube
   This service can install 4 cookies. Read more View the official website


This site uses cookies and gives you control over what you want to activate
✓ OK, accept all ✗ Refuse all
Personalize Read more