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
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 DOMText 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