Components

Zen Journey - a technical view on the Adobe Marketing Cloud - part 2

16 April 2015Maciej Stanasiuk

A couple of weeks ago Michal blogged about how Adobe’s Experience Manager, Campaign and Visitor ID can be used to achieve true cross-channel personalisation in Zen Journey. Today we will concentrate on the second, front-end part of the implementation, that is embracing the combined power of Dynamic Tag Management, Analytics, Target and Marketing Cloud Visitor ID to enable John to buy his dream car.

First you have to add Dynamic Tag Management to your AEM build. With AEM 6 this process is a piece of cake. Simply go to Cloud Services and choose Configure now at Dynamic Tag Management:

zjp2-1

Configuration itself is quite simple, too. The only thing you have to do is to paste your DTM API token (which can be obtained from Customer Care). Then, having selected your Company and Property you will be able to import your header and footer code or select self-hosting option. Today we will use hosting by Akamai, reducing the time that would be required to spent if we were to host the code by ourselves.

Once DTM is implemented you can progress with tools setup. Let’s start with Adobe Analytics we will use for user tracking and (most of) identification. To add Analytics to your DTM simply click Add a Tool at your property’s main screen.

zjp2-2

When adding Analytics you have two ways of tool configuration -- the manual or automatic one. Automatic is the newer and faster one, so let’s stick with it. Using it requires authentication via either Marketing Cloud or Web Services. Find your Web Services credentials in your Analytics user profile and use them in DTM.

zjp2-3

After that you have to configure your Analytics implementation. Fortunately, using Automatic configuration the only thing you need to do is to select your Report Suites. You are of course free to add props, vars, customize JS and change any other settings, but if you want to simply start tracking your page, you don’t have to!

zjp2-4

Now it’s the time to add your Visitor ID tracking. Once again click Add a Tool and select Marketing Cloud ID Service, enter your Marketing Cloud Organization ID (Customer Care will help you if you don’t know it) and your Analytics Tracking Server. If required, add other settings, too and you should be able to use Visitor ID right from this moment. To learn more about Visitor ID please see: https://marketing.adobe.com/resources/help/en_US/mcvid/mcvid_operation.html

The last tool that has to be added to DTM is Adobe Target. You can also choose to configure it automatically, so apart from naming it and optionally adding additional global mbox parameters there’s nothing else you have to do.

Having every tool ready, it’s the time to get to the proper implementation. First of all, you have to use Target to display subscription overlay to returning visitors. The first step is to add an mbox to your page, enabling Target. To do that, still being in DTM, go to Rules and create new Page Load Rule.

zjp2-5

Name the rule and add a condition that will fire it. In this example we’d like to fire it at every product (car) page. To do this we will use a simple include path condition with the regex - /cars/.* . Regexes can be extremely rel="noopener noreferrer" useful in DTM - see this awesome guide by Lunametrics if you want to learn more about them.

zjp2-6

Once the rule is set up to fire properly it’s the time to add an mbox. In DTM you can automatically create it around any HTML element. During the campaign mbox will replace a content of this element with any HTML, so as we want to display the overlay rather than changing existing content, we can create it around an empty div with #overlay selector.

zjp2-7

Having mbox created (remember to approve the changes and test if they work fine!) it’s the time to set up your overlay campaign. Login to your Target account and create a landing page campaign.

zjp2-8

There, firstly you have to select the campaign’s location. Select the mbox you have created in DTM and save it. Then you have to add a new experience:

zjp2-9

Secondly, you have to add the conditions that would fire the experience - that is a segment of users that will get it. Click Create new segments and go to Visitor Behavior tab. There, select Visitor Returning. Additionally, you could set up a parameter for the user that has not subscribed already to avoid displaying the overlay to the users who already did subscribe (eg. based on a data parameter or certain cookie).

zjp2-10

Having the experiences ready, you have to add an alternative content (offer) to the second one. Click on the arrow next to the current offer and click on Create HTML offer. As you remember this will simply replace your empty div - that’s why you have to add everything that will make your overlay work here, possibly including JS and styling.

For example, to provide the best user experience you might want to add a script that will show the overlay after some time or if the user behaves like he wants to exit the page. To achieve that you can use any custom script you wish. One of the many ways to do that would be as following, by checking if hasSubscribed cookie value is false (it will change once the user subscribes) and displaying the overlay then:

if (!hasSubscribed){
  $‌('#newwsletterOverlay', {id : 'overlay'}).appendTo('body');
  setTimeout(function(){
    $‌(‘#newsletterOverlay’).fadeIn('slow').center();
  }, 3000);
}

Once the overlay code is done you can save and start your campaign! Now it is time to add some Analytics custom tracking. As we have the basic tracking already implemented, all we have to do is to configure additional data and events that will enable us to have data ready in Campaign and Audience Manager for any further Targeting needs. To start go back to DTM and create a new Data Element. Data Elements enable us to push any data available to the front-end to any of the tools that we have implemented. We will use it to push the e-mail address to the Analytics’ eVar.

zjp2-11

First of all, name it and select it type as Custom Script. Custom Script is supposed to be a function that returns any kind of string.

zjp2-12

Thanks to jQuery we are able to return the value of our e-mail form using one line of the code:

$‌('.newsletter-form-email').val();

It’s good to remember that any code here is run the moment the Data Element is required by the rule. That means that in case of Page Load Rules it will run instantly and in case of Event Based Rule set up to fire on the certain click, it will run when the element is clicked.

Now, thanks to DTM flexibility there are a couple of ways to track our newsletter overlay. As the element doesn’t exist when the page loads (it’s being added by Target after all) the most simple way would be to write a custom JS. Add a new Page Load Rule and set the Path condition to fit any pages that would have the overlay displayed (eg. /cars/.*, just like before).

//13

Then, go to Javascript / Third Party Tags and add your code. We want it to be able to track the Submit button being clicked and then push the e-mail address to Analytics’ eVar5, as well as send event5. In addition to that we would like to save the user’s vehicle of interest as eVar4. The code therefore could look as following:

$‌('body').on('click', '.newsletter-submit', function(){
  var submittedEmail = _satellite.getVar('Newsletter Subscription E-mail'),
  vehicleName = $‌('.header-vehicle').html().trim();

  s.eVar4  = vehicleName;
  s.eVar5 = submittedEmail;
  s.events = 'event5';
    
  s.linkTrackVars = 'eVar4, eVar5';
  s.linkTrackEvents = 'event5';
  s.tl(true, 'o', 'Newsletter Form Submission');

});

Save your code and the rule. Now it’s time to switch to Analytics to configure the event and the variables - simply add your new eVars and events in the Report Suites panel. After that your Report Suite will be ready to gather, present and share all the required data.

Now it’s the time for Campaign to do its work. How to integrate Analytics and Campaign has already been explicitly rel="noopener noreferrer" described in the previous post, available here: https://www.cognifide.com/blogs/technology/zen-journey---a-technical-view-on-the-adobe-marketing-cloud---part-1/

Of course, all of the above is only a small part of the Zen Journey experience. In the next post we will concentrate on how to track form abandonment in Analytics and how to use this data in Audience Manager for even better content targeting.

Author: Maciej Stanasiuk
Published: 16 April 2015
Tags:
marketinganalyticsAdobecloudtool
 

People in or team love to share their experience. Explore our blog

Job Opportunities

We're always looking for new faces to join the Cognifide family. Take a look at our available jobs.