fbpx
Selecteer een pagina

Goal of the article

This blog post is a practical guide for the integration of Adobe Experience Manager (AEM) with Adobe Target (AT) in accordance to Adobe’s best practices. The complete setup will take some time… so sit back, relax and follow along. We chose to use a very descriptive writing style and include a lot of screenshots so you get a clear view on what to do at each step.

After completion of all the steps, the integration of AEM and Adobe Target using Adobe Launch should be successful to load all of the Adobe Target scripts connected to AEM with Adobe I/O. Yes, many different products of the Adobe suite are being used in this process but after completion of the process, it will be a lot easier to integrate other products like Adobe Analytics via the same configuration.

 

Target Audience

Anyone who is a developer of AEM solutions and who (has a client that) needs to integrate with Adobe Target. If you’re not familiar with AEM at all, I recommend you let someone with knowledge of the platform take care of this for you.

 

Adobe Target

For those of you who already know what Adobe Target is, feel free to skip this section.

Adobe Target enables you to create customized experiences on your website without having to make any adjustments in the structure and HTML/CSS of your website. This allows you to see the effect that certain changes might have in terms of conversion, engagement, page clicks, … without having to rely on an IT department to make those changes for you. In Adobe Target, you are able to create A/B tests and targeted experiences.

If you want to make full use of Adobe Target while having the easiest setup, you must first integrate AT with AEM using Adobe Launch. This is free for all Adobe customers as long as you have bought at least 1 Adobe product (which should be fine since you will have both AT and AEM at your disposal).

 

Prerequisites

The most obvious prerequisite is that you have access to an AEM instance, Adobe Target, Adobe Launch and also access to Adobe I/O. If you are an Adobe partner, you can request Adobe to provide a sandbox environment where you can play around with Adobe Launch and Adobe Target. If you’re a customer, reach out to your customer success manager and check what is available.

Subsequently install the following extension in Google Chrome: Adobe Target VEC Helper

 

Setting up Adobe Launch

Creating a new web property

In order to integrate AEM with AT, you first need to configure Adobe Launch. For demonstration purposes, I will create a new property from scratch, but keep in mind that this is not required and can be added to a web property that already exists.

Fig. 1 – Create Property

 

For illustration purposes in this article, I chose the name “Adobe Target Integration” and domain “localhost.local”. Feel free to change any of these values to ones that seem for fit for your organization.

Fig. 2 – Create Property

 

Next, you have to make sure to add an Adobe Target extension to the newly created web property.

Fig. 3 – Install Extension

 

When clicking “Install”, you’ll be redirected to another screen where you can configure your extension. The required data is fetched and filled out automatically. Simply click “Save” and your extension is successfully added to your web property.

 

The Data Element

Now that the extension has been added to the web property configuration, the next step is to make sure that the Adobe Target libraries are loaded onto your page. In order to do that, a new Data Element first has to be created.

Fig. 4 – Create Data Element

 

This data element serves to load the core libraries of Adobe Launch. I chose to set the name to PageName for this example. Make sure to use the same values as the ones shown in the following picture:

Fig. 5 – Create 1st Data Element

 

Once filled out, simply click “Save”.

 

Creating rules for Adobe Target

Next up are the rules, that define what happens at a given time when the page loads. Rules can be configured when the libraries are loaded. To configure rules, click on the Rules tab next to Data Elements and create your first rule. Start by giving a name to your rule, like: “Target configuration”. Next, click on “+” to create a new event. Leave the extension set to “Core”, for the event type select “Library Loaded (Page Top)” and leave the other settings as is. Click on “Keep changes” to save.

Fig. 6 – Data Element Configuration

 

Now it’s time to actually load Adobe Target. Click on “+” underneath Actions. In the Extension dropdown, select Adobe Target. Set your Action Type to “Load Target” and leave the other settings as default and click “Keep changes” to save.

Fig. 7 – Load Adobe Target

 

Subsequently, click on “+” underneath Actions again, select Adobe Target as the extension, but this time round select “Add params to all Mboxes”. Set the Name to pageName and the Value to %PageName% in the pane on the right-hand side. Note that this is the same name as the Data Element you’ve created earlier. If you chose another name, you must use that name here too. In case you forgot the name you’ve chosen, click on the icon next to the Value field and select your Data Element. Leave everything else default. Click “Keep changes” to save.

Fig. 8 – Add Params To Mbox

 

And last but not least, the Adobe Target Mbox has to be fired to see your changes. Click once more on “+” underneath Actions, select Adobe Target as your extension and select Fire Global Mbox as your Action type. Leave the other settings as default and click “Save changes”.

Fig. 9 – Fire Global Mbox

 

Now make sure to click “Save” to save all of the actions inside your rule.

 

Publishing the configuration

The rule has now been created, but the Adobe Launch code still has to be added to your pages. In order to do that, the Launch configuration has to be built. Click on the Publishing tab and you see the following screen:

Fig. 10 - Publishing

Fig. 10 – Publishing

 

Click “Add new library”, name your library and select an environment. If you do not have another environment then Staging and Production, I would highly recommend to create an other one before naming your library and selecting the environment.

Next, click on “Add all changed resources” at the bottom of your screen. Normally, you should  see that the rule and data element that you’ve created and 2 extensions are automatically added. Click on “Save & Build for <ENVIRONEMENT_NAME>” here.

Next, you can select your newly created library and click on the Submit for Approval option. Afterwards, select it again and select the Build for Staging option. Then select the Approve for Publishing option and finally Build & Publish to Production. Once you’ve done that, it should look like the following screenshot:

Fig. 11 - Build for Development

Fig. 11 – Build for Development

 

That concludes what has to be done in Adobe Launch. Next up: configuring AEM to load the Launch web properties.

 

Setting up AEM: part 1

For the integration of AEM with AT, you have to use Adobe I/O. First create a security key in AEM, which is needed to create an integration with Adobe I/O. To create that key, go to Tools > Security > Adobe IMS Configurations.

Fig. 13 - Adobe IMS configurations

Fig. 13 – Adobe IMS configurations

Click on the “Create” button. Select Adobe Launch as your Cloud Solution and make sure to check the Create new certificate checkbox. Enter an alias for the key and click “Create certificate”. Next, Click “Download Public Key” as we will be needing that key in the next steps. Click on Next and keep this tab open as we will be still needing it later on (it’s not a big problem if you close it, you can always reopen the tab).

Fig. 14 - Create Security Key

Fig. 14 – Create Security Key

 

Setting up Adobe I/O

And now, the configuration of Adobe I/O. If you have never done it before, don’t worry, everything will be explained step by step. First, go to https://console.adobe.io/integrations. Sign in with your Adobe credentials and you should be able to see the “New integration” button. Click on that button, select “Access an API”, afterwards select “Experience Platform Launch API” and click on “Continue”.

Fig. 15 - Integration API Launch

Fig. 15 – Integration API Launch

 

Enter a name and a description and click on “Select a File from your computer”. Now select the .crt file that has been downloaded earlier on. Select the role “Admin” and a product profile (normally you should see only one if your Adobe ID is linked to a single company).

Fig. 16 - Select Key And Role Admin

Fig. 16 – Select Key And Role Admin

 

Click on the “Create integration” button and then click “next” to see the overview of your integration.

Fig. 17 - Integration Overview

Fig. 17 – Integration Overview

 

Make sure to copy the API Key from this screen and click on Retrieve Client Secret. Temporarily store both of those values.

Fig. 18 - JWT

Fig. 18 – JWT

 

Click on JWT and copy the JSON (a JWT token) that is generated for you.

 

Setting up AEM: part 2

Finishing the IMS configuration

Now that you have successfully integrated Adobe Launch with Adobe I/O, it’s time to prepare AEM to use that what has been created in Adobe Launch and Adobe I/O.

The first thing to do is to finish what you started. Remember that I told you to keep that tab open? Go back to that tab now. In case you’ve closed it, you can go back to it by clicking on Tools > Security > Adobe IMS Configurations > Select the configuration you created earlier, click on Properties and finally click on Account.  Fill out the Title, Authorization server, API Key and Client secret (that you stored somewhere temporarily earlier) and the payload is the JSON that you’ve copied earlier on. The Authorization server is the “aud” value of your JSON.

Fig. 19 - IMS Final Config

Fig. 19 – IMS Final Config

 

To finish this part of the configuration, click “Save & Close”.

Now the AEM instance can successfully connect to Adobe I/O to integrate with Adobe Launch. The end of the process is almost near!

 

Adding the cloud configuration

Next up, the Adobe Launch configurations need to be added to AEM. In order to do that, go to Tools > General > Configuration browser

Fig. 20 - Configuration Browser

Fig. 20 – Configuration Browser

 

You can either create a new folder or select an existing one. Open the properties of the folder and check the “Cloud Configurations” box. Click “Save & Close”.

Fig. 21 - Cloud Configurations

Fig. 21 – Cloud Configurations

 

Next, you have to add the Adobe Launch configurations to your configuration folder. Go to Tools > Cloud Services > Adobe Launch Configurations.

Fig. 22 - Adobe Cloud Configuration

Fig. 22 – Adobe Cloud Configuration

Select the folder that you’ve just opened to check the “Cloud Configurations” box and click “Create”.

Add a title to the configuration and select the IMS configuration that you’ve created in the previous steps. Once you did that, the Company dropdown should receive some values. Select your company. Finally select the web property that you’ve created in the beginning of this tutorial. Do not enable the “Include Production code on Author” field.

Fig. 23 - Launch Configuration AEM

Fig. 23 – Launch Configuration AEM

 

Click 2 times “Next” and then “Create”. Adobe Launch should be successfully configured now on your AEM system. It might be a good idea now to publish your configuration to your publishing instance by selecting the configuration that you’ve just created and by clicking on Publish.

 

Enable the configuration for Adobe Target

All the effort that you’ve done up to now, was to get everything connected. But to finally make use of Adobe Target, you need to start using the connection. Go to Sites > We.Retail > US, select the EN page and click on “Properties”. Click on the Advanced tab and scroll down to “Configuration”. Break the inheritance with the language master and set the value to the configuration folder that contains your connection with Adobe Launch.

Fig. 24 - Set Configuration

Fig. 24 – Set Configuration

Simply publish your page and luckily for both of us, that’s all there is to it!

 

Create your targeted experience

Now that everything is set up, it’s time to make use of Adobe Target to create some targeted experiences. Log in to Adobe Target (you can easily find it by clicking on the 9-dots icon next to your company name if you’re still in Adobe Launch and then click on Target) and select “Target”.

Fig. 25 - Select Target

Fig. 25 – Select Target

 

`On the right-hand side, select “Create Activity” and select “Experience Targeting”. If you’re not able to do this, check which rights are assigned to you. You need to be an approver to create an experience and to activate the activity. If you’re not an approver, check the following link on how to set the rights for a user, or ask your IT department to set the rights for you.

Fig. 26 - Experience Targeting

Fig. 26 – Experience Targeting

 

Keep the Web targeting activity and Experience Composer set to Visual. In your Activity URL add “http://localhost:4503/content/we-retail/us/en.html” and click Next.

Fig. 27 -  Create Targeting Activity

Fig. 27 – Create Targeting Activity

It might be the case that your browser will ask you to load unsafe scripts, but simply follow the instructions on your screen. Afterwards, your page should refresh and you should be presented with the targeting screen.

Select “Discover the finest gearH2 > Edit > Text/HTML and set the value to “This is some targeted text”.

Fig. 28 - Change Text

Fig. 28 – Change Text

In the top left corner, click on “Untitled Activity” and add a different name to your activity (be creative 🙂 !). Click “Next” and again “Next”.

In that screen, you can add text to your objective field that tells you what the purpose is of this targeting activity. The only thing that is required, is to set your primary goal. That is the deciding factor to see if your activity was successful or not. Set it to Engagement and the measurement to Page Views and click “Save & Close”.

Fig. 29 - Finish Targeting Activity

Fig. 29 – Finish Targeting Activity

Wait a few moments in order for your activity to sync. In the top right of your screen, your activity should show as Inactive. If you’re an approver, you can approve the activity to see the effect on your page. Click on the dropdown and select Activate.

Fig. 30 - Activate Activity

Fig. 30 – Activate Activity

 

`Once that is done, everything should be ready. Go to http://localhost:4503/content/we-retail/us/en.html and check your result!

Fig. 31 - Result

Fig. 31 – Result

 

Finally, pat yourself on the shoulder now, since you’ve put in quite some effort to get everything up and running.

Congratulations! You’ve successfully integrated AEM with Adobe Target, using Adobe Launch and Adobe I/O.

 

Conclusion

By writing this article, I found out that a lot of configuration is needed to get everything up and running. The good thing is that it is just configuration and not a ton of code that needs to be added and could cause a lot of bugs. Overall the setup is robust and allows you to easily integrate other things like Adobe Analytics, because of the whole Adobe Launch setup. It’s quite some work if you are doing it for the first time, but once everything is set up, it gives you a real good impression on how everything works.

Props to Adobe for that.

If you’re stuck with something, you can always reach me by email: dylan.reniers@digitalum.be

About the author

Dylan ReniersDylan Reniers is an AEM architect and enthusiast, having worked with Hybris in the past, living in Belgium and works for Digitalum, a part of the Continuum Consulting tribe, specialized in e-commerce and has a specific focus on AEM and Hybris. Dylan is one of the youngest certified AEM architects and continues his quest to master all the products that are available in the Adobe Experience Cloud.

Working for Digitalum gives him the opportunity to work on multiple projects using Adobe Experience Cloud products, giving him more insights in different project approaches to broaden his skillset.

Furthermore, he’s an active football/soccer fan and player and is always up for new challenges to improve himself.

 

Reference material

https://helpx.adobe.com/experience-manager/using/aem_launch_adobeio_integration.html

https://helpx.adobe.com/experience-manager/using/aem_adobetarget_integration.html

https://helpx.adobe.com/experience-manager/kt/integration/using/aem-launch-integration-tutorial-understand.html

https://medium.com/adobetech/integrate-adobe-launch-with-adobe-experience-manager-ffc3670e6f4e

https://medium.com/adobetech/integrate-adobe-experience-manager-with-adobe-target-40fb935bb983

 
Share This