Access the power of Adobe Experience Cloud without AEM
State-of-the-art Adobe products can be leveraged by any website regardless of its infrastructure. If a business’ site isn’t built on AEM, it can still be optimized using a variety of integrated AEC technologies, including Adobe Launch, Adobe Analytics and Adobe Target. Here’s how to implement Adobe products for any website by leveraging Datalayer with Adobe Analytics and Launch, and personalization with Adobe Target.
Initial Setup
As we are not going to focus on the site itself, we use GatsbyJS with gatsby-starter-gcn template to get a site with dummy content (mostly dog-related, which will be important later on). In the end, we have a single page application that has under the hood React and Webpack. We have code in Github and deployed everything to netlify.com with our own domain. Also, we added one checkbox for a contact form, which users can use to identify if they are also interested in cats. The home page looks like this:
Data Layer
To get the best results out of Adobe Analytics we have to provide Data Layer - JavaScript object with data we want to feed to the analytics. As we are dealing with SPA based on React, we create a component which will define this JS object wherever it’s included - src/components/DataLayer.js
As you can see, we emit an event, when the data layer is prepared. As long as we do use SPA, the data layer needs to be prepared on each page routing and we need to notify Adobe Launch as soon as we switched to new View and Data Layer is ready for usage.
Now we can add this component to our pages, e.g.:
<DataLayer pageTitle={`Post: ${title}`} pagePath={slug}/>
If we open a page and check “digitalData” object, we will see next
A similar story with an event is for Contact form submit - we need to notify Adobe Launch about submit event as well as pass data we are interested (with regards to analytics) to it. So in our src/components/ContactForm.js we updated submit handler.
We store only “likeCats” checkbox in local storage (which can be accessed by Adobe Launch) and emit submit event.
Now we are ready to implement Adobe Analytics.
Configuring Adobe Analytics
Let’s start with preparing Analytics. For this, we need to create a separate report suite (to have a dedicated place for analytics data from our site).
To create it we go to Admin->Report Suites->Create New
Then we configure report suite with info like name, GoLive date (for us it’s not important, but important for production cases). Also, the report suite can be created from a template, which will configure predefined eVars, events, etc.
As you remember, we added one checkbox to the form, which we want to track. Let’s configure the conversion variable to hold its value. To do this, we go to Settings->Conversion->Conversion Variables->Add new. After it’s created, we should see new eVar available
Also, we are definitely interested in form submission tracking. This is a “success” event, so let’s add a new one.
With the following configuration.
After these steps, we can focus on Adobe Launch.
Adding Adobe Analytics to the site using Adobe Launch
Adobe Launch is a successor of Adobe DTM and is an open Tag Management system, which made the best effort to unify the ecosystem of marketing technologies.
First, we create a new property, where we specify its name and domain. Now we should add a couple of extensions to our property:
- Core - extension which provides us with a basic set of events we need for our Rules as well as Data Elements types, which we will configure in order to supply Adobe Analytics with data we are interested in;
- Experience Cloud ID Service - this extension assigns a unique id to the user which will allow us to identify him across all AEC services (Adobe Analytics and Adobe Target in our case);
- Adobe Analytics - provides us with actions to trigger analytics. In it, we configure our Report Suite’s name.
Before we fire Adobe Analytics, let’s define some Data Elements to deliver information to Adobe Analytics:
- “Page Name” as JavaScript Variable from “Core” extension with name “window.digitalData.page.pageInfo.pageName”;
- “User like cats” as Local Storage Item from “Core” extension with item name “likeCats”.
After Data Elements are created, we see next:
Having data defined, we can create Rule for firing our analytics:
- Name “Trigger Analytics”
- In IF section we will specify the event - our “datalayer-complete” event:
- In Then section - we have 3 actions in the following order:
a. “Set Variables” from “Adobe Analytics” extension - in our case we specify only Page Name as “Page Name” data element we defined earlier;
b. “Send Beacon” with s.t() tracking (because we want Adobe Analytics to count this hit as Page View).
c. “Clear Variables” to clear up variables we set in 1st step (so they are not accidentally reused during next analytics firing).
- In the end, our rule looks like this:
Now we still have one thing to do for Analytics in Launch - track Contact form submission. Let’s create another Rule:
- Name “Contact form submit”;
- in IF section we have custom even “contact-form-submit”;
- in Then section next 3 actions:
a. “Set Variables”, to set our conversion variable which indicates user’s interest in cats:
Make sure that eVar configured in Adobe Analytics in our Report Suite is the same as eVar configured in Adobe Launch.
b. Send Beacon with s.tl() tracking, as this hit shouldn’t be treated like page view;
c. and Clear variables.
So we are done with Launch configuration for Adobe Analytics. Let’s build library, include it on our site and test it!
In Publishing tab we should add New Library for the Development environment. Here we name it and add all created Rules and Data Elements with Add All Changed Resources button so we end up with next:
After saving and building it, in Environments tab we can get the link for our library in Install column for the respective environment (Development in our case):
Now we need to add it to all the pages - with GatsbyJS the proper place will be in src/html.js in <head> tag.
Now if we run our site and inspect it with Adobe Experience Cloud Debugger Chrome extension, we would see next:
Nice, we got our analytics call. How about navigating between pages? Let’s go to the Contact page:
Another analytics request has been emitted - works as intended. How about our Contact form submission?
So we got 1 more request but it looks not so good - we have our eVar set and its link tracking - this is correct. However, we have no success event information here - we forgot to configure it!
Making changes to Adobe Launch configuration
First, we go to our Contact form submit rule, to Events section in Set Variables action and configure our event:
Now in the Publishing tab, we need to edit the library. There we can see, that we do not use the latest revision of our rule:
Let’s fix it - click on rule and create a New Revision.
Now we can save, build and resubmit the form.
In Events row, we now see event1 which stands for contact form submission.
Adding Adobe Target
A/B Test
We will start with a simple A/B Test. Oficial SPA implementation guide suggest against using Launch for Adobe Target, so we download at.js, put into our site source code and add it to the page (html.js)
We use version 2.x as it provides support for SPA implementation. We load it at the top of the page in sync way to have it available as soon as possible to prevent content flickering on targeting.
Now we need to define our views. What is View? Here is a definition from Adobe - “The Adobe Target VEC for SPAs takes advantage of a new concept called Views: a logical group of visual elements that together make up a SPA experience”. In our case, it will be our pages/posts. The simplest way would be to utilize gatsby’s onRouteUpdate - gatsby-browser.js
As a view name, we use page name (or “home” which doesn’t have page name). Now we are ready to create A/B Test, where we would have 2 experiences:
- Default - with no changes.
- The one, where we adjust Header’s background and links color (to grey-dark grey, from black and white).
Allocation will be manual - 50% of the traffic will go to Default and 50% to Grey Header background:
As we want to increase engagement we would set goal metric - Page Views
Let’s save and test the activity we just created. In 50% of cases, we will get our new experience:
Note, that we will see this experience only on the domain we configured during activity creation and not on the local environment.
Experience Targeting
The example above is fairly simple and boring. Let’s create a bit more real-world like! If you remember, we have in our contact form a checkbox which when ticked, says us that the user is interested also in cats. Our site is 100% related to the dogs but we can increase user’s engagement if we have some cats for such users as well.
Let’s start by creating a segment in Adobe Analytics which will contain users who checked this checkbox.
We want to use this segment as an audience in Target, so we would need to click Make this an Experience Cloud audience (for Oleksandr - AEC Demo).
Now we go to Adobe Target and create a “special” experience for this audience - there we will add experience which will target the new audience we just created in AA:
And for this audience, we will adjust Teaser Post to contain some cats:
In the end, we have the next state:
As Target delivers to the user the first matching experience (starting from the top) we want to make sure to have our customized experience at the very top.
Note: there is 24 - 48h delay between the user is assigned to the segment and having this info available in other AEC services, like Target in this case.
Now, if we go to our site (with a browser where we submitted the contact form and specified that we are also interested in cats) then we will see our experience:
Rest of the users will see the default teaser post
The advanced capabilities of Adobe Experience Cloud products, in this case, specifically Adobe Launch, Analytics, and Target, can be leveraged to transform business processes without Adobe Experience Manager. The power of AEC can be harnessed by Adobe Launch, allowing businesses to implement the Analytics tool for more advanced data insights, and Target for greater customization and personalization. At Netcentric, we’ve helped some of the world’s greatest brands by unlocking these advanced technologies.