Scaled Inference Blog Overview of Browser Integration with Amp.ai
Overview of Browser Integration with Amp.aiAmp.aiWould you like to take the guesswork out of your A/B test performance? Would you like to know which user segments were performing well and which user segments were performing poorly? Would you like to use more than just a "B" variant and have n variants instead? Would you like to know how each of those variants performs individually? Let me share a little bit about Amp.ai.Amp.ai is a platform that you can use to gain contextual insights and to measure the performance of A/B/n variants in your application. The contextual insights you will receive will answer questions like, "What are my under-performing segments?", "What are my over-performing segments?", "How do each of these segments perform compared to your baseline?" or "What percentage of my users compose these segments?". Having these insights will help you design variants that are high-impact and give a higher probability of optimizing your conversion rate. When using Amp.ai, you don't design and implement your experiments and throw them away after n-days; rather, you iterate on the context you are observing and the variants you are displaying to your users to continually optimize your application towards better conversion. Amp.ai will help you iterate over your variants by providing insights into the performance of each.In this blog post, I'll show you how to integrate with Amp.ai. Let's get started!Integrate Amp.ai with your Web ApplicationIntegrating Amp.ai with your Web Application is as easy as signing up at amp.ai, creating a project, and placing the following script tag in the <head> section of your page.<script src="https://amp.ai/libs/{PROJECT_KEY}.js"></script>Note: You will see the project key on the screen after creating the project (see screenshot below). Copy the PROJECT_KEY to use in the <script> tag.With the Amp.ai script on your page, we will begin observing pre-defined context on your page through an event named, AmpSession.We encourage you to also use Amp.ai to observe custom context as well. To do this using the Amp.ai in your web application, just place the following code immediately after the Amp.ai script.<script> amp.observe("Your_Custom_Event_Name", { returningCustomer: true, purchasedPreviously: false }); </script>You may be unsure which variants you want to experiment with in your Amp.ai project. We encourage you to hypothesize which underserved segments you want to impact. You can use our Design Framework to document your hypotheses and to select the variants that have a better chance of getting the lift in the underserved segments. Not only that, but using the design framework will also save you time by estimating which variants will have enough impact to justify running the experiment.We suggest you start by first observing a metric that is important in your application such as when a user completes the checkout flow or signs up for a subscription. Amp.ai will give you insights into your current segments and will show you which segments are underperforming with the current state of your application. This information can guide you in the design process of your variants. To use our Design Framework, please contact us at support@scaledinference.com to set up a meeting so we can walk you through it.Observe MetricTo observe your primary metric in each user session, you can observe it after the metric event has occurred. For example:document.querySelector("#subscribeBtn").addEventListener("click", (e) => { amp.observe("Signup"); });Now you need to set up this metric in the Amp.ai console by adding the metric you are observing. You will notice below a metric that has been created from a Signup event name, with a metric name of Signup.Within a day or so, go to the console at amp.ai to view the performance of particular user segments that Amp.ai finds interesting. These results will give you insights on designing this project and coming up with some high impact variants that can help to optimize the metric you have defined.Variant IntegrationAs you have seen, the amount of time it takes to integrate Amp.ai into your application is minimal and the insights you gain are great! It's no different when integrating your variants. Simply call our API with your variants and we will return a variant to be used based on what we have learned so far about your user segments. You will receive the chosen variant immediately as it is determined locally in the client.const decision = amp.decide("Headline", { title: ["Just Do It!", "Go For It!", "Do It!"] }); After the decision is returned, then you take action on that decision by applying the variant to your UI. See example below:<h1 class="headline">Just Do It!</h1> <script> document.querySelector(".headline").innerText = decision.title; </script>We're not quite done yet. We need to go back to the Amp.ai console, enable the decision that we just added to our application and allocate traffic to be "Amped" by Amp.ai. If you allocate 90% of your traffic, then that means 90% of your traffic will use what is returned from the amp.decide call, and 10% will use the default value or control. In the example above, the default value is the first value in the array.Integration Complete! Now what?While waiting for insights to come in, or continuing to iterate on your variants, go check out the following blogs by our CEO, Olcan Sercinoglu to help you design a high-impact optimization project:Growth Amplified via Autonomous OptimizationHow to Design Autonomous Optimization ProjectsHow to Implement Autonomous Optimization Projects Using Amp.aiThere will be upcoming blogs that will address advanced features of Amp.ai being used within your web application. Be sure to subscribe to updates when new blogs are posted so that you don't miss out on these.FAQ1. How much latency will I incur by implementing Amp.ai into my website?A: Integrating with Amp.ai as prescribed in this article can take anywhere from 25ms - 100ms depending on connection speed. The sizeof the script is 25KB. If you include the script using Google Tag Manager, the script is loaded asynchronously. We also provide anasynchronous 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 Amp.ai block the UI in any way?A: No. The Amp.ai 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.
Read full article »
Scaled Inference provides machine learning, machine intelligence and distributed systems.
Read more