Introduction
Welcome to a new Modyo tutorial. In this tutorial, we are going to focus on Modyo Channels and Google Optimize to perform an A/B Test on a widget, since our fictitious team believes that humanizing the banner will improve our conversion rates. For this tutorial, we are going to have a banner with a mockup of a cell phone and another with a person.
Test A
Test B
Prerequisites
To complete the tutorial you need a Modyo site with Dynamic Bank Home, a widget on the platform (in our case APP), an account in Google Optimize, and Google Analytics Universal.
Step 1: Create a Space in Optimize
The first thing to do is create an account within Google Optimize by clicking Create account.
Fill in the fields, accept the conditions, and move on to the next step.
After completing the steps, click on Create.
Step 2: Create experience
Once the account is created within Optimize, click Start to create the first experience, fill in the appropriate fields, and select A/B Test.
Once the experience is created, create a variant, instead of the normal widget code APP, replace it with the following code:
<div class="bg-white" id="app_home"> <div class="container py-5 position-relative"> <div class="row justify-content-center align-items-center py-5 py-md-0"> <div class="pattern_app"></div> <div class="col-12 col-md-4"> <h4 class="h2 mb-3">DYNAMIC APP, <span class="font-weight-normal">take your bank everywhere</span></h4> <a href="#" onclick="gtag('event', 'click', {'event_category': 'button', 'event_label': 'CTA APP', 'value': 0});"><img src="https://cloud.modyocdn.com/uploads/36e7b591-d60d-4312-b1ad-cd984533206a/original/download_app.png" alt="Download"></a> </div> <div class="col-12 col-md-4 d-none d-md-block test-a"> <img src="https://cloud.modyocdn.com/uploads/a0de39ca-33aa-4790-b88e-492d2d665371/original/woman_app.png" alt="Woman App"> </div> <div class="col-12 col-md-4 d-none d-md-none test-b"> <img src="https://cloud.modyocdn.com/uploads/58a9628d-81c8-44b1-97a1-bd585c186931/original/app_bank.png" alt="App"> </div> </div> </div> </div>In the Google Optimize menu, click Add variant which we will call Change image.
Click edit to make the change:
When the editor opens, we go to the bottom of the APP widget and replace line 2 (the container div) onwards with the following:
<div class="row justify-content-center align-items-center py-5 py-md-0"> <div class="pattern_app"></div> <div class="col-12 col-md-4"> <h4 class="h2 mb-3">DYNAMIC APP, <span class="font-weight-normal">take your bank everywhere</span></h4> <a href="#" onclick="gtag('event', 'click', {'event_category': 'button', 'event_label': 'CTA APP', 'value': 1});"><img src="https://cloud.modyocdn.com/uploads/36e7b591-d60d-4312-b1ad-cd984533206a/original/download_app.png" alt="Download"></a> </div> <div class="col-12 col-md-4 d-none d-md-none test-a"> <img src="https://cloud.modyocdn.com/uploads/a0de39ca-33aa-4790-b88e-492d2d665371/original/woman_app.png" alt="Woman App"> </div> <div class="col-12 col-md-4 d-none d-md-block test-b"> <img src="https://cloud.modyocdn.com/uploads/58a9628d-81c8-44b1-97a1-bd585c186931/original/app_bank.png" alt="App"> </div> </div>Save and click Done to return to the experience.
We need to link our Google Analytics account to measure and define the objectives of the Test.
To define the Goal, Google Analytics is added in the download button, with Category button and the tag CTA APP.
Save the target and start the test.
Step 3: Start
To start the test go to settings and check the installation, it will indicate if you have the Google Analytics and Google Optimize code on your site. Otherwise, follow the steps in Google Analytics and Google Optimize to complete your setup.
At the end of the installation, start the test by clicking on the button Start at the top right.
Conclusion
Congratulations! You've finished the A/B Test tutorial with Google Optimize, and you're ready to test your site and improve conversion. As you start to receive usage statistics, you can see them from the Google Optimize menu.
