Posts

AEM-DTM-Target Integration. Simplified! – Part1

Introduction:
Let’s start with the introduction of three gems of Adobe Experience Cloud crown:

  1. AEM – Adobe Experience Manager(AEM) is a web content management system with a lot of powerful features to manage, organise and deliver the content with best in class experience. AEM came to Adobe with the acquisition of Day Software in 2010, earlier it was known as Day CQ (Communique). For this article, we are using AEM 6.3 version.
  2. DTM – Dynamic Tag Management(DTM) is a tag management tool which offers tools to integrate Adobe Experience Cloud Solutions as well as solutions like Google Analytics etc.DTM used to be known as ‘Satellite’ before Adobe had acquired it in 2013.
  3. Target – Adobe Target is a personalization solution of Adobe Experience Cloud Suite, which delivers the personalisation of content based on different type rules. Target came to Adobe with the acquisition of Omniture in 2009. In this article, we are going to demonstrate the Target VEC capabilities.

Architecture:
AEM can be integrated with Target directly without using DTM. However, it’s recommended to use the DTM in between due to listed benefits:

  1. Efficiency –DTM allows you to optimise the loading time of multiple tools and marketing tags.
  2. Reduce Cost – Minimise the development cost as once Data Layer is in place multiple solution can leverage the same.
  3. Flexibility – DTMallows you to quickly test and optimise tags without being bound by release cycles.
  4. Multiple Sites – Using DTM you can manage multiple sites from the single console.

AEM is usually connected with DTM using AEM Cloud Services and Target is connected to DTM using Experience Cloud configuration. Here is the relevant diagram:

 

Request Flow:
How a request flows from AEM to Target via DTM:

  1. AEM starts rendering a site page.
  2. Site has a DTM script attached along with Data Layer. DTM script is associated with a relevant property. Data Layer discussed below.
  3. DTM Property has Target added to it, which raises a request to Target and share required data.
  4. Target pushes its response back to AEM instance using mbox js. Note: Now mbox.js has a newer and updated alternative which is known as at.js
  5. AEM page got Target response which gets rendered on the page.     

Data Layer:
As you might have noticed in request flow that AEM site has got the DTM Script and Data Layer associated. Data layer is a W3C standard to store values in javascript object. Data layer is created at AEM and consumed by DTM to get the required data from AEM instance and push to any solution like Analytics, Target etc. We are going to create a sample data layer below in DTM Rules section.

DTM Setup:
To get the access of DTM, one has to raise the request with Adobe Client Care with proper information. Once the access is granted, go to https://dtm.adobe.com and login with the credentials provisioned by Client Care.

To start with DTM, create a new property with the URL of the website. Thereafter add the required tools in the property like Adobe Analytics or Adobe Target. In AEM configuration, we are going to use same DTM Property in order to integrate the AEM with Analytics, Target, etc.

For this article we are going to add Adobe Target, for this we need Client Code which will be provided by the Client Care or alternatively you can try adding using Experience Cloud membership.

 

DTM Property

Adding Tool in DTM Property

Adding Target as a Tool in DTM Property

DTM Rules:
In above steps you have created a new DTM property, added Target as a tool in the same property. Now you need to know how to play with data, DTM uses data layer to get the data from AEM instance. For example, using Target you need to render homepage of website based on browser, location, devices etc or you can also get the user specific details like age, gender, interests etc. Hence you need to get all such information from AEM in data layer. For example, here the data layer:

Once the data-layer is all set, fetch the values from data layer and set it in DTM data elements. We use these data elements in different types of rules. DTM has got three type of rules:
1. Event Based Rule – Rules executed when visitor interacts with on-page elements.
2. Page Load Rule – Rules executed when visitor loads the page.
3. Direct Call Rule – Rules executed when you want to tell DTM to do something specifically.

 

 

DTM Rules

Creating a data element using data layer is quite straight forward. You can see the below screenshot, here we have created a new data element Page Title which is mapped with pageName field of data layer created above 

Data Elements

DTM Workflow:
Every property in DTM follows a standard workflow. Workflow has got three steps:

  1. Creation of property and rules.
  2. Approve the newly added and modified rules.
  3. Publish the property to make the changes live.

AEM-DTM Integration:
There are two ways to integrate DTM with AEM:

  1. Using Cloud Services
  2. Embed JS
  1. Using Cloud Services:

Using AEM admin console, go to Tools > Deployment > Cloud Services. Find ‘Dynamic Tag Management’ and click on ‘Configure now’. Provide a Title and Name of the configuration keeping Parent Configuration field intact. Enter the details as below:

Property Description
API Token The value of the API Token property of your Dynamic Tag Management user account. AEM uses this property to authenticate with Dynamic Tag Management.
Company The company with which your login ID is associated.
Property The name of the Web Property that you created for managing the tags for your AEM site.
Include Production Code on Author Select this option to cause the AEM author and publish instances to use the production version of the Dynamic Tag Management libraries.

When this option is not selected, the Staging Settings apply to the author instance, and the Production Settings apply to the publish instance.

There is an option to self-host the DTM libraries which means AEM will host the DTM libraries if this option is checked, if we want to use the libraries from the cloud then we should uncheck this option. Here we are using later one.

  1. Embed JS:

Go to the DTM Console using https://dtm.adobe.com and click on the relevant property.
Go to Embed tab, copy the Header and Footer staging script, go to the AEM author instance and copy the script in header and footer of the website respectively. Similarly, copy the header and footer production script and put in the AEM publish instance.

Let’s say you have integrated DTM with AEM using one of the above-mentioned method, assign the DTM config to the root of your site using AEM Sites console.

DTM-AEM Connection Test:
Now you need to test whether DTM script is getting loaded with your website. In browser, try to open any page of your website where you have assigned the DTM config and open browser console. If “_satellite” object exists then it means DTM script is getting loaded. You can also try retrieving the data elements that you have created in DTM using “_satellite.dataElements”. If you are able to find all the details, you are good to go.

If _satellite object doesn’t exist, it means page doesn’t have the DTM header/footer script. You can view the source of the page to confirm the same.

 

Satellite Object

 

Satellite Data Elements

 

 

DTM Debugging Tools:
In DTM we play with different types of scenarios and scripts, hence we might need to check if the scripts are working fine and order they are getting executed.
There are couple browser plugins are available which proved to be quite for debugging.

Launch Switch:
It enables the logging in console and as well as we can test the changes using staging script, before making the changes live.

There are two button available on the plugin console. Tweaking them will do the following:
Debug: It enables the logging of the rules, you can also add the logs using _satellite.notify(“info”).
Staging: It will enable the changes you have made in property which you have not published. This is used for testing the changes  before making them live.

Download URL for Chrome: https://chrome.google.com/webstore/detail/launch-and-dtm-switch/nlgdemkdapolikbjimjajpmonpbpmipk

 

Tagtician:
It shows the detailed information about all the DTM Rules. 
Download URL Chromehttps://chrome.google.com/webstore/detail/tagtician-for-adobe-dtm/hiaoiehpkillodoeillmodjcadmfmcbg  

Reference:
Adobe DTM Documentation: https://marketing.adobe.com/resources/help/en_US/dtm/

This is the first part 1 of “AEM-DTM-Target Integration. Simplified!” where you have learned how to setup DTM, create DTM property and data elements, integrate DTM with AEM and debug DTM. In Part 2, you will learn how to create different types of rules in DTM, use these rules to share the information to Target, Target activities, Target audience and how to use Target VEC (Visual Enhanced Composer) along with the Target debugging tweaks.

TRIGGERING A WORKFLOW USING EVENT LISTENERS IN AEM

AEM Version: 6.2
Target Audience: AEM Developers

Introduction

In AEM 6.2 Workflows, we can trigger a workflow when a DAM Asset is created, modified, or deleted within a given path. In this article, we will explore triggering workflows from our code based on events in the JCR.

Suppose you have a workflow that creates custom renditions of assets in addition to the default AEM renditions, when the asset is under “/content/dam/ProjectName/images/”. You would have set up two launchers for triggering this workflow: one with event type as “Node Create” and one with “Node Modified”. We can also achieve the same functionality through our code, without touching the GUI.

Requirement

When assets are moved into a certain folder structure in DAM, trigger a workflow that creates a 100px X 100px thumbnail of our image.

No-rendition-outside-imgs

Fig 1: Before Moving the asset, no custom thumbnail. Fig 2: Desired result after moving the asset, the new thumbnail.

Analysis

The intuitive thought is that when an asset is moved, a new node is created in the new location and the old one is deleted. However, experience shows that AEM does not create a new node in the destination folder on Node Move. We know this because the ‘jcr:Created’ property does not change. AEM does not even change the last modified date.

Creation Timestamp Before Moving the Asset Creation Timestamp is the same after moving

Fig 3: Creation Timestamp Before Moving the Asset. Fig 4: Creation Timestamp is the same after moving

Modification Timestamp Before Moving the Asset. Modification Timestamp is the same after moving

Fig 5: Modification Timestamp Before Moving the Asset. Fig 6: Modification Timestamp is the same after moving.

What if we copy the asset?

On copying the asset, a new version of the same is created. This triggers the Node Creation launcher.

No versions before copying the asset Version created after copy-pasting the asset

Fig. 7: No versions before copying the asset. Fig. 8: Version created after copy-pasting the asset.

Approach

Event Listeners

AEM supports observation, which enables us to receive notifications of persistent changes to the workspace. A persisted change to the workspace is represented by a set of one or more events. Each event reports a single simple change to the structure of the persistent workspace in terms of an item added, changed, moved or removed. There are thus 7 possible events at the JCR level, viz:

  1. Node Added
  2. Node Moved
  3. Node Modified
  4. Node Removed
  5. Property Added
  6. Property Removed
  7. Property Changed

We connect with the observation mechanism by registering an event listener with the workspace. An event listener is a class implementing the EventListener interface, that responds to the stream of events to which it has been subscribed. An event listener is added to a workspace with:

(A detailed explanation of each parameter is given with the code example in the package as well as the at the end of this article) As defined by the EventListener interface, listener must provide an implementation of the onEvent method:

When an event occurs that falls within the scope of the listener, the repository calls the onEvent method invoking our logic which processes/responds to the event. In our case, we will register an event listener to listen for “Node Moved” events under “/content/dam/images” so that when an asset is moved to that folder, our workflow can be triggered.

Implementation

When the component is activated, the activate(…) method is called. It contains a call to ObservationManager.addEventListener(…) for registering the event listener. The deactivate(…) method contains logic for deregistering the event listener, and is triggered when the bundle is being stopped.

When the relevant event occurs, the onEvent(…) method is called, which contains logic for processing the event. In our case, we trigger a workflow.

The following is the relevant code from ThumbnailNodeMovedListener.java:

Download this code (including the workflow):

Build it using

N.B: Creating a workflow is not part of this tutorial, and therefore a ready workflow has been provided in the code package. However, if you want to learn to create workflows, here is an excellent resource: ->

/workflow-in-aem/

References

Adobe Consulting Services. (2018, March 20). acs-aem-samples/SampleJcrEventListener.java at master · Adobe-Consulting-Services/acs-aem-samples. Retrieved from Github: https://github.com/Adobe-Consulting-Services/acs-aem-samples/blob/master/bundle/src/main/java/com/adobe/acs/samples/events/impl/SampleJcrEventListener.java

Day Software AG. (2018, March 20). JCR 2.0: 12 Observation (Content Repository for Java Technology API v2.0). Retrieved from Adobe Docs: https://docs.adobe.com/docs/en/spec/jcr/2.0/12_Observation.html

How to Change Data Type (Typecast) in AEM, Use @TypeHint

Problem Statement:

How to convert a variable from one data type to another data type in AEM.

For a use case where a number field is used in dialog and further data will be utilized in Sightly (HTL) for numeric comparison operations. Problem can come up as data will be stored in String format and comparison can only be made on same data type elements.

Solution:

@TypeHint: It is used to forcefully define the data type of a property. It can be used as following:

Scenario:

I have a number field in my dialog with name ‘sponsoredPosition’, by default it’s value is stored in String format and I wanted it to be stored in Long format instead of String.

Steps:

In the component add a node, parallel to the ‘sponsoredPosition’ node (The one of which data type needs to be changed) of the type nt:unstructured.

  1. In the new node add following properties:
  2. ignoreData{Boolean} = true
  3. value{String} = Long
  4. Name{String} [email protected]
  5. sling:resourceType{String} =   granite/ui/components/foundation/form/hidden.

Here,

(a) ignoreData, as the name suggests tells value of this field should not be stored.

(b) In value field you must define the data type in which you want your data to be stored.

(c) In Name field add ‘@TypeHint’ suffix to the property name of original node whose value was stored in string(by default) .

(d) Resource type hidden is used for hiding it in dialog.

 

BLOG SUMMARY & BUSINESS GOAL

This blog is intended to provide technical AEM users a solution to an asked question and tactical training on the topic: How to Typecast in AEM.

Conclusion

Adding @TypeHint solved the issue, now value is being stored in Long format instead of String.

Interested in more training and support for your organisation using AEM CMS? Request a consultation to discuss Argil DX managed services.

AEM Dispatcher Setup for Linux

Installing dispatcher for AEM in Apache Web-server in Linux may get little tricky, as documentation provided by Adobe on Installation of Dispatcher in Linux is not sufficient, and if we take it in analogy and try doing same way we do in Windows, then we face some issues locating the appropriate files.

Prerequisites for Dispatcher Setup
  • Apache 2.2 web-server – In Ubuntu 12.0 and higher, Apache 2.2 web-server is pre-installed, but in case it is not there, you can find the installation instructions here.
  • Dispatcher Module – Appropriate dispatcher module can be downloaded from Adobe Package Share.
Installation Instructions
  1. Considering Apache web-server is already setup in system, go ahead and extract dispatcher module using following command:
  2. Once you have extracted the files, now you have to move the appropriate files to their respective apt path.
  3. Move “dispatcher-apache2.x-4.1.x.so” to “/usr/lib/apache2/modules”. There you will find all the modules already being loaded by apache 2 webserver.
  4. Adobe recommends to give a soft name to your dispatcher module, but you don’t need it as once setup is done, you will be hardly using it again.
  5. Now go ahead and create a folder conf under “/etc/apache2/”, and move “dispatcher.any” file under this folder. Make sure that you don’t move your dispatcher.any file to ‘conf.d’ folder which is already present.
  6. Now is the time to edit and map module file that you added and map the dispatcher.any file. Go ahead and edit apache2.conf file present under “etc/apache2/”.
  7. Scroll to the end, put some nice comments about you adding some new configs, and add following:
  8. Also add the following config to the end of apache2.conf file, which loads the dispatcher in web-server.
    Comments given above are self explanatory but, you can still go and edit configs if needed as per following descriptions:

    • DispatcherConfig: Location and name of the configuration file (Can be given as an absolute or relative path)
    • DispatcherLog: Location and name of the log file (Can be given as an absolute or relative path)
    • DispatcherLogLevel: Log level for the log file
    • DispatcherNoServerHeader: Whether to use the Apache or CQ server header
    • DispatcherDeclineRoot: Defines whether to decline requests to the root “/”
    • DispatcherUseProcessedURL: Defines whether to use the original request URL or to use one already processed by other handlers (ie: mod_rewrite)
      • Note: This is essential for rewriting incoming links (stripping away the ‘content/{site_name}’)
    • DispatcherPassError: Defines whether CQ or Apache will handle HTTP 40x error codes
    • SetHandler (Apache parameter): Forces all matching files to be processed by a handler
  9. Make sure, that path that is provided for load module, matches with the path where you placed your dispatcher module. Also match the name and version of dispatcher module, and change the config as required.
  10. Now configure dispatcher.any file. Edit /renders section in dispatcher.any.
    By default you may find port set to 8000 or 8080, change it to 80.
    Give whatever soft-name you want to give to your cache folder in place of “cqcache”
  11. Restart the apache server to let webserver take effect. You can restart apache server by using following command:
  12. Once server is restarted and you get [OK] message, go and check /var/log/apache2/dispatcher.log file. If it says dispatcher initialized with correct cache path, it means dispatcher is successfully setup and ready to be used.

Now you just need to configure your CQ replication agent, and point dispatcher flush agents to correct port.

I tested this today itself i.e. 14th Oct 2013 on Ubuntu 13 64 bit debian based OS. It worked like wonder for me. Please post your comments and queries if you have any issues with it, and also if there are better ways to do it. Cheeeerz.

Dynamic Options values in AEM dialog dropdown Using $PATH

In this post, I will explain a real project use-case, where I need to populate a Dropdown in my component dialog with dynamic values, but the condition are-

1. These values can only be fetched from the current resource or current page object.
2. Another condition is that this dropdown must be auto-populated when the dialog opened.

For example,  The drop down values can be the list of all parent pages of the page where this component was dropped.

Q1). How will you go for it?

You will think about ajax call because the dropdown can be filled with dynamic values using options property.

Q2). Yes, you are right then, what will you call from the options property?

Sling Servlet

If your answer is Sling Servlet then, I have some questions for you-

Q1). How will you get the current resource  or current page object in that servlet?
Q2). If you  are trying to pass the path of current resource then How will you do that?

OK, I think you are well understood what am I trying to say. How to get current resource or current page object into the called Sling Servlet.

Maybe you can do it using some other approach but in this post I will explain, How I complete this task?

In place of servlet I have created a JSP file under same component node with some selector (For ex. options.json). For Ex. My component structure is-

Now, I have set some properties on my drop-down dialog node. These properties are shown in figure-

3

Here you will notice that, I have used $PATH, this will return the path of the component wherever it is dropped. Then I used Sling Script Resolution Principle to call my options.json.jsp file.

For writing this blog, I had created dummy data but in actual, I had created a Sling Service and from one of it’s methods, I was getting the JSON values.

Here, you should follow standard coding practices and should remove these scriptlets from JSP file to some java file. But the key point is that this JSP must return the values in JSON format. If you are using Sightly then same code will work or if you want to use HTML in place of JSP then it will work perfectly fine.

I am also sharing the Git repository link where you can find demo examples for these properties.
Git repository link is –

https://bitbucket.org/accunitysoft/accunity-blog-snippets

Happy Coding..!!

Ankur Chauhan
Tech Lead