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:

Before we fire Adobe Analytics, let’s define some Data Elements to deliver information to Adobe Analytics:

After Data Elements are created, we see next:

Having data defined, we can create Rule for firing our analytics:

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).

Now we still have one thing to do for Analytics in Launch - track Contact form submission. Let’s create another Rule:

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:

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.