Last time on Somebody Digital, we posted a basic tutorial for people wanting to get started with testing in VWO. In this tutorial, we discussed how you could set up an A/B test in this software, as well as how things like variations and goals worked in the context of a normal A/B test.
This tutorial on VWO sparked a lot of interest and seemed to offer some guidance for those wanting to start A/B testing.
And that got us wondering; would it be worthwhile to provide guides to other A/B testing software? Perhaps ones that are significantly different in terms of design, like Adobe Target?
So here it is, here is our beginner’s guide to creating an A/B test in Adobe Target.
1. Create Your A/B Test
Starting with the screen that appears before you even get to Adobe Target itself. As you can see, this screen lists the various Adobe products your plan includes, such as Analytics, Target, Launch and more.
So click the Target button to move onto the next step.
This will bring you to a list of activities. Like with VWO, it’ll look a bit different if you haven’t saved any yet, but the way forward is the same nonetheless. Click on ‘ + Create Activity‘.
You’ll get shown a dropdown menu with various types of tests you can create. They’re all useful in their own way, but for the purposes of the demo, we’ll go with a standard A/B test. So click the A/B test option in the menu:
Which again, will not send you to the next page. Instead, it’ll open up a modal like the one below:
In this modal, you can choose what URL the test runs on, what kind of editor (‘Experience Composer’) you wish to use, and what type of program the test is for. Leave the program type as Web, set the Experience Composer type to Visual, and keep the Workspace as the Default one. Then, enter your chosen URL in the Activity URL box and click ‘Next’ to finally move on to the editor.
This will give you a screen that looks like the following. It’s a lot to take in, so we’ll guide you through it piece by piece.
Firstly name your test, hover over the text saying ‘Untitled Activity‘ to bring up the option to rename the test, then click again to make a text field appear.
Enter your test name here. We’ll go with ‘Demo Test’, since it’s exactly that.
Set up your experiences
Take a look at the list of Experiences on the left. These are basically the variations that you see in the VWO editor, with one small difference. Namely, there’s no ‘Control’.
Instead, there’s a general ‘Experience A’ and ‘Experience B’, both of which can be customised as you see fit. So if you want to create a test that runs against an existing variation, you won’t need to set up a ‘fake control’ this time around.
Either way, leave them for now. Keeping Experience A as the control and using Experience B for the variation works perfectly fine for a demo test like this.
Now click the cog icon at the top. This will open up a menu with a few test specific settings.
Setting up the URL the test will run on
Most notably, ‘Page Delivery‘. Clicking this brings you to a page where you can choose what page the test runs on, just like you could with the modal prior to the visual editor.
Leave it for now.
Back in the main editor, click the cog again, and go down to ‘Add Additional Pages‘.
This is a bit of a strange one.
You see, in VWO, the way you run a test on multiple independent URLs is via the URLs menu. Or the first one that appears when setting up a new test.
However, this is not the case with Target. Instead, you have to create a new ‘page’ for every independent URL you want the test to run on, and then edit the code for each of those pages independently.
Which means that if you had a site called [mysite.com] and wanted to run tests on [mysite.com]/shop and [mysite.com]/blog, you’d need to do one of two things:
add separate pages in the editor for [mysite.com]/shop and [mysite.com]/blog, set up the page properties accordingly, and copy the code across to each one.
It’s a… unique way of doing things. And not one that makes it super simple to switch between VWO and Adobe Target on the fly.
Still, it’s not needed for this demo, so we won’t have you set up extra pages here.
What we will have you do though is add custom code, which again is through a slightly different interface than you may be used to.
3. How to Add Custom Code
Since in Adobe Target, you need to set up code modifications in the panel on the right, where the button marked ‘Add Modifications‘ is.
Click that button, and then choose ‘Custom Code’ from the Modification Type dropdown. This will bring you to Target’s equivalent of the VWO code editor.
With the difference being that all code has to be wrapped in its relevant HTML tags. Hence for this test, enter this code in the box:
<script> var test = document.createElement(‘aside’); test.classList.add(‘fixed-aside’); test.innerHTML = ‘This is a test’; </script>
It’s the same as in the VWO tutorial, minus the encapsulating script tags.
Once you’ve done this, you’ll need to save your work.
However, it’s not super clear how to do this by default. The save button in the sidebar where you add content doesn’t do that; it merely makes the relevant changes in the visual preview. Meanwhile, while ‘Next’ technically works, you may not always want to go straight to the targeting or goals right away.
So, the solution is the arrow next to that button. By clicking it, you get shown two more options; Save Draft (just Save if the test is already set up) and Save Draft & Close.
Click on the former to save your work. Then hit the ‘Next’ button to move onto the next page.
This will bring you to the audience targeting page. For anyone using VWO, this basically acts like the extra targeting options you get on the first page of the campaign editor, right after you enter the URL.
But Target treats it a bit differently. Instead of merely changing the conditions for the test from a list, you have to set up an ‘audience’ and use that for the test instead. It’s not a bad system, and it’s got its uses if you need the same conditions time after time (since audiences can be saved and reused later), but it can be a tad confusing nonetheless.
4. How to Set up Audience Targeting
Click the three dots next to where it says ‘All Visitors’, then choose the option to ‘Replace Audience‘.
Here you’ll get a list of audiences you can use for targeting. For now though, click ‘Create Audience‘.
This will bring you to a form where you can set up targeting rules for the test. For instance, you can run the test if the user is using a specific browser, device type, operating system, etc. We’ll go with the former.
Click the Browser option. Then, set the first box to Type, the second one to Equals, and the last one to Chrome. This will let us run our test only if the user is viewing the site with Google Chrome.
And you can do this with as many other browser types as you like. You can also add rules via the ‘Add Rules’ button if you want to combine it with other targeting options too.
Either way, make sure your new audience has a name…
Then once you’re happy it looks like this, click Save:
To go back to the audience selector. Choose your new audience, and click Done.
That’s it for now. You can also select how many people are entered in the test, or how the system allocates variations to users, but for the time being, we are gonna stick to the default setup. Click Next again to move on.
Which will bring you to the goals setup for the test. Here you can enter an objective for the campaign, and add various metrics you want to track.
5. How to Set up your Goals/Metrics
So let’s add the same ones we used in the previous VWO tutorial with traffic to all pages and set up click tracking.
Starting with the Primary Metric. This will track visits to all pages on the website.
Tracking visits to all pages
Like with VWO, this can be set up by tracking visits to URLs that contain the site domain. So click the dropdown marked ‘Select success metric’, then set it to Conversion. Next, open the action dropdown (which appears once the previous one has been set), and set that to Viewed a page.
Finally, change the remaining dropdown to URL contains, and enter your site’s domain in the text box below. Here’s what it’s supposed to look like:
Then, once you’re certain it’s set up right, move onto the next few metrics. You can add these by clicking ‘Add a New Metric‘.
This will add a new goal form which can be edited just like the last one. However, there’s one difference here.
Set up click tracking
Since this goal tracks clicks on an element rather than traffic to a page, we’ll need to work with Adobe Targets interesting click tracking interface.
Set the first dropdown to Conversion, and the next one to Clicked an element to make a button appear marked ‘Select elements’:
Click on it to open the click tracking interface.
Where there are two ways to select what element you wish to track clicks on. The visual way and the manual way.
The latter is pretty simple. Head to the sidebar to the right, type in the relevant selector (in this case ‘.fixed-aside’). Click ‘Save’, and it should add click tracking for that element.
Alternatively, you can click the element in the preview pane to do the same thing. However…
Target will use some unique selectors for tracking. For instance, the selector Adobe Target generates for the aside we added is:
HTML > BODY > ASIDE.fixed-aside:eq(0)
Which is quite wordy and is also fragile, which may cause problems for more complex tests down the line.
So if you select elements like this, make sure to edit the selector to something much simpler and more concise. That way, your click tracking won’t shatter if the structure of the page changes.
And that’s all for now. We’ve set up our goals, and the test is ready to go.
But hang on, you may be saying. Didn’t the VWO demo have a third goal? One which tracked all clicks on all links across the site?
Yes. Yes it did.
Unfortunately, Target does not allow you to do this. Their system can only track unique elements on a page, not a group of elements at the same time. So if you wanted to track all the links, you’d need to specifically select every link one by one, not add ‘a’ into the tracking field and call it a day.
Hence there’s no practical way to set up that goal for this demo.
What’s more, even if there was, it wouldn’t work correctly. In addition to the above ‘unique selector’ requirement, Target also requires any elements you want to track clicks on to be present on the page when you click save.
So the system wouldn’t allow you to save such a goal anyway. It wouldn’t find all the necessary links on the home page, and would consider the tracking as too broken to continue with.
Regardless, here’s what your goals should look like now:
Once you’re happy that’s the case, click ‘Save’ and ‘Close’ to finish the test.
6. Complete your test and QA
Congratulations, you’ve done it. You’ve created your first A/B test in Adobe Target. You can preview it by clicking the test name in the main list, then clicking the three dots next to the ‘Edit Activity’ button and choosing ‘Activity QA’ from the dropdown menu:
This will open a modal like the one below, with preview links for all variations used in the test.
Check your test looks as expected, and then pat yourself on the back for a job well done!