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 Experience Cloud 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 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.
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.
Next, you have to make sure to add an Adobe Target extension to the newly created web property.
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.
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:
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.
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.
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.
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”.
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:
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 ” 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:
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.
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).
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”.
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).
Click on the “Create integration” button and then click “next” to see the overview of your integration.
Make sure to copy the API Key from this screen and click on Retrieve Client Secret. Temporarily store both of those values.
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.
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
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”.
Next, you have to add the Adobe Launch configurations to your configuration folder. Go to Tools > Cloud Services > Adobe Launch Configurations.
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.
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.
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”.
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.
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.
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.
Targeted text
Select “Discover the finest gear” H2 > Edit > Text/HTML and set the value to “This is some targeted 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”.
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.
Check your result
Once that is done, everything should be ready. Go to http://localhost:4503/content/we-retail/us/en.html and check your 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.
I hope that this has been informative to you and if you still have some questions, feel free to reach out and we will be glad to help you.
Follow us on LinkedIn for more.
