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

Form analysis
1 forms found in the DOM

GET https://help.kameleoon.com

<form method="get" action="https://help.kameleoon.com" id="form" type="small">
  <div class="input-container hidden" style="border-box: 1px solid pink">
    <input onclick="this.select()" name="s" id="input-header" class="input is-small input-transparent" placeholder="Search an article">
    <input type="hidden" name="search-type" value="simple">
    <div class="search-icon">
      <svg class="hide-icon" id="s-icon-active" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M7.95094 7L14 13.0491L13.0491 14L7 7.95094L0.950943 14L0 13.0491L6.04906 7L0 0.950943L0.950943 0L7 6.04906L13.0491 0L14 0.950943L7.95094 7Z" fill="#474747"></path>
      </svg>
      <svg id="s-icon" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M20.6231 18.2157L15.6902 13.2667C16.9585 11.8109 17.6542 9.98041 17.6542 8.07455C17.6542 3.62285 13.9 0 9.28256 0C4.66822 0 0.914062 3.62184 0.914062 8.07455C0.914062 12.5283 4.66822 16.1501 9.28256 16.1501C11.0154 16.1501 12.6681 15.6468 14.0781 14.6883L19.0496 19.6765C19.2579 19.8855 19.536 20 19.8369 20C20.1191 20 20.3878 19.8955 20.5919 19.7056C21.0282 19.3028 21.0407 18.6357 20.6231 18.2157ZM9.28256 2.1068C12.6941 2.1068 15.4704 4.78425 15.4704 8.07455C15.4704 11.3659 12.6952 14.0433 9.28256 14.0433C5.8731 14.0433 3.09783 11.3659 3.09783 8.07455C3.09783 4.78525 5.8731 2.1068 9.28256 2.1068Z"
          fill="#4C4CA8"></path>
      </svg>
      <a class="hide-icon" id="launch-query">
                  <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.17422 10L0 4.88796L1.29355 3.60976L5.17344 7.4436L12.7064 0L14 1.2782L5.17422 10Z" fill="#2EE5AC"></path>
                  </svg>
                </a>
    </div>
  </div>
</form>

Text Content

User manualDevelopersFAQAcademy

User Manual

 * User manual
 * Developers
 * FAQ
 * Academy


SET UP AN EXPERIMENT ON A SINGLE-PAGE APP (REACT, ANGULAR…)

WRITTEN BY JULIE TRENQUE

Updated on 08/07/2018

2 min

Intermediate




CONFIGURE YOUR ASSETS

ADVANCED TARGETING TOOLS

CREATE AND PUSH A CUSTOM DATA

CREATE A KEY PAGE

CREATE AN ACQUISITION CHANNEL

MANAGE ADVANCED TARGETING TOOLS

GOALS

CREATE A NEW GOAL

SET UP A GOAL IN A CAMPAIGN

MANAGE GOALS

SEGMENTS

CREATE A NEW SEGMENT

SET UP A SEGMENT IN A CAMPAIGN

SET UP A SERVER-SIDE SEGMENT

USE GOOGLE ANALYTICS UNIVERSAL SEGMENTS (GA) IN KAMELEOON

SELECT THE PAGES TO TEST

SET UP AN EXPERIMENT ON A SINGLE-PAGE APP (REACT, ANGULAR…)

MANAGE TARGETING SEGMENTS

REGULAR EXPRESSION EXAMPLES

WAS THIS CONTENT USEFUL?

Yes No
 * User manual
 * Configure your assets
 * Set up an experiment on a single-page app (React, Angular…)

 * What is a single-page app?
   * Definition
   * Impact on experiments built with the graphic editor
 * If your website is a full single-page app
 * If a part of your website is a single-page app
 * REACT and JS SDKs
 * Activation API


WHAT IS A SINGLE-PAGE APP?


DEFINITION

A single-page application is a website usually developed with a modern
JavaScript client-side frameworks (React, Angular, Vue.js, Gatsby…) and which is
accessible through a unique webpage. The purpose is to improve the navigation
experience of the visitor, and avoid loading a new page after every action.

But not all cases of single-page involve an entire website. There are three
possible cases:

 * your entire website is a single-page app;
 * a part of your website is a single-page app (the shopping funnel, for
   example).

We will further detail the procedures to be followed in each case.


IMPACT ON EXPERIMENTS BUILT WITH THE GRAPHIC EDITOR

Each case may have an impact on experiments built with our graphic editor
because our application file (kameleoon.js) will only load at the first page
seen by the visitor. If the SPA dynamically renders a new content on a page or
if a visitor browses from one page to another, Kameleoon is simply not aware of
it.

We will further detail the procedures to be followed in each case.


IF YOUR WEBSITE IS A FULL SINGLE-PAGE APP

When installing Kameleoon, your Custom Success Manager (CSM) will likely detect
that your website is a full single-page app and activate a specific option.

This option allows Kameleoon to:

 * detect visitor navigation between pages by observing dynamic URL changes.
   When a change occurs, Kameleoon reloads its entire engine. The behavior of
   Kameleoon is well explained in our Developers documentation.
 * monitor new SPA updates by using MutationObserver on the SPA (even though the
   page URL does not change at all) so that we can apply (or reapply) variation
   changes when something has changed on your website. Kameleoon currently
   supports the following actions done with the graphic editor: style changes,
   wording modification, position updates (swap, insert after / before), use of
   custom CSS selectors, etc.


IF A PART OF YOUR WEBSITE IS A SINGLE-PAGE APP

For example, only your funnel may be a single-page app.

You need to use the following code in the global script of your Kameleoon site:

if (location.href.indexOf("mySPAWebsitePart") != -1)

{

   Kameleoon.API.Core.enableSinglePageSupport();

}

With that code, Kameleoon will catch the navigation between each step of your
funnel and reload its engine to execute back all your experiments.

(Replace “mySPAWebsitePart” by the URL of your funnel)


REACT AND JS SDKS

Kameleoon also provides a REACT SDK and a JS SDK for single-page apps. It
enables a developer to use an alternate way of running experiments / feature
flags on your application via the use of an SDK implemented within your
single-page app.

You can refer to each SDK documentation to check out all possible features for
your single-page app.


ACTIVATION API

You can also run experiments / feature flags on your application by using our JS
Activation API. Read more about it



SHARE




IN THIS ARTICLE :

* What is a single-page app?
  * Definition
  * Impact on experiments built with the graphic editor
* If your website is a full single-page app
* If a part of your website is a single-page app
* REACT and JS SDKs
* Activation API


RELATED ARTICLES

Configure your assets


CREATE A NEW SEGMENT

Segmentation helps you to precisely target your visitors. You can create, modify
and duplicate segments with the (...)
Configure your assets


SET UP A SEGMENT IN A CAMPAIGN

Create a new segmentSet up a segment in an experimentSet up a segment in a
personalization Create a new segment To (...)
Segments


SET UP A SERVER-SIDE SEGMENT

A server-side segment is a specific segment for server-side experiments where
only specific targeting conditions (...)

✓
Thanks for sharing!
AddToAny
More…



PLATFORM

 * A/B testing Client-side
 * Full Stack Experimentation
 * Personalization


KAMELEOON

 * Company
 * Clients
 * Contact us


RESOURCES

 * Developer documentation
 * Blog
 * Release notes

Subscribe to our newsletter