Browser Client Integration with for Learning Segments

Steve Mask

Apr 10, 2019



Integrating into your Web Application is quick and provides great insights into segments that are under and over-performing. While you may have already confirmed this information through analytic tools, the information that is crucial is the impacted segment size and performance delta to the baseline. From here you can take action on your under-performing segments and design your variants accordingly to maximize your potential gain. This is just the beginning in harnessing the power of AI to optimize your application. In the following article, you will see how to design your variants through Hypothesis Testing, to ensure that the design is optimizable and that the maximum gain is worthwhile.

Getting started

Begin by creating an account and creating your first project. You will see the following on your screen after dismissing the video. Select the JavaScript section, and copy the first code snippet into the <head> section of all of your pages or just in your layout.

For more information on designing your application for continuous optimization, see How to Design Autonomous Optimization Projects .


Built-In Context

After including the script on your pages, will begin observing context through one of the built-in events called, AmpSession.

Third-Party Context supports third-party data such as Nielsen and geolocation data. If you click on the INFO link next to your project name, you can enable the observation of Nielsen and Geo data. Switch either or both of these on if you would like to also like to observe these. Nielsen data will observe things like Gender, Age range, Education, Marital Status, etc. To use Geo data, copy the following script above the script. This data is only used to enrich your costumer profile and is not shared with any outside vendors. We are fully GDPR compliant, and when requested, can remove all customer data from our database related to your project.

<script src=""></script>

Custom Context

You can also specify custom context parameters to be observed. This is not required, but is highly encouraged as it provides domain context that you are able to gather. If you choose to observe custom context, go to the Customization section after clicking the INFO link and click "Edit" after "Code Injection". To observe your custom context, pass the object representing your context into our amp.observe method. All context is in the form of property-value pairs.

amp.observe('CustomContextName', customContext);

Your context must be present before the amp script loads as the injected script will run after loads.

Context + Outcome

Observing context-only will bring about some great insights about your user segments. Coupling context with observing their outcome or conversion provides even more insights; such as, how each user context is performing. To observe the outcomes of your users, you will use the same API call as above. Listen for the event signifying the conversion and type the code in the Code Injection area as we did above for observing custom context.

document.addEventListerner('DOMContentLoaded', () => {
 document.querySelector("#subscribeBtn").addEventListener("click", () => {

Part of observing the outcome is to set it up as a metric in the console. To create the outcome (or metric) in the console, add the metric and configure it according to your outcome event. For example:

The above image is configured for an event name, Signup, which we saw observed in the code above, and is given a name Signup and the goal is to maximize it.


Overall Performance

The console will give you insights into how your metric is performing overall. Compare this result with how this metric typically does in your application.

In the above example, this application's Signup rate was 1.2% in the last week. Typically, the Signup for this application is 1.0%. This shows us that, in the last week, the Signup has improved by 20%.

Segment Performance

Segment performance will let you know how well each segment, that finds interesting, is performing against your metric average. For example, the segment below,, comprises 49.29% of the sessions and performs 49% better than average. looks for prominent segments that are performing better and worse than average so that you can make informed decisions about how to take action in the design of your variants.


As you can see, integrating observe events with is quite simple and the rewards come within a few days if is provided at least a thousand sessions per day. Observations are meaningful in providing you with the information you need to design high-impact variants for specific user segments to optimize your application. See Overview of Browser Integration with to take full advantage of our machine learning platform to integrate decision-making into your application. If you have any questions, please contact us at .


1. How much latency will I incur by implementing into my website?

A: Integrating with as prescribed in this article can take anywhere from 25ms - 100ms depending on connection speed. The size
of the script is 25KB. If you include the script using Google Tag Manager, the script is loaded asynchronously. We also provide an
asynchronous integration for hyper-sensitive latency solutions. See the Amp-JS-SDK Readme for instructions on how to integrate asynchronously.

2. What data is stored on your servers?

A: We only store data that you send us on our servers and is only used for learning. We do not use your data for any other purposes. We are fully GDPR-compliant and can delete any data you request at any time.

3. Does block the UI in any way?

A: No. The API has two endpoints. One to observe context or metric success, and one to decide on the variant to present for each user segment if you integrate decision-making. Both are fire and forget and the decide call is executed locally.