[Integration]{class="badge positive"}

Add Target extension to a Tags Property adobe-target-extension

[AEM Sites as a Cloud Service, AEM Sites 6.5]{class="badge informative"}

To follow along with this video, you must have already integrated tags in Adobe Experience Platform with AEM.

Learn how to enable Adobe Target to your AEM web site using tags.

Hi there. In this video, let me show you how to add Adobe Target to your Adobe Experience Manager site using Adobe Experience Platform Launch. The primary focus here is to show you how to load target libraries on your site pages and more advanced capabilities of the integration will be covered in another video. I have an Adobe Experience Manager as a cloud service instance set up for this video with a production, staging and a development environment. Please make sure to use the latest build of AEM for your setup. Let’s get started. Since we will be going through an iteration of changes, let’s start with the development environment and eventually push our changes to the production environment when we are finally ready. Let’s navigate to AEM sites and open up the WKND reference site from the AEM homepage. Let’s open the WKND English homepage and preview it. You can use any tag management solution to add the target library to your site. In our case, we are using the Adobe Experience Platform Launch. It’s a prerequisite to have Launch libraries added to your site before we load target libraries. So if you haven’t already added Launch to your site, please do so. Let’s inspect the page to view console statements. You can view a console statement that states launch library loaded added as part of our page load launch route. We will take a look at this rule later in this video. Click on the Adobe Experience Platform Debugger browser plugin to view the build details of the launch library that’s added to our site. You can also view the launch property name, environment, and the type of extension. Now let’s open a new tab in the browser and open Launch UI. Let’s quickly locate the launch property name that we obtained from the previous step and open it. Select to view the list of rules and open the launch loaded rule. Let’s open the custom code action and you can notice the log statement for the page load displayed on the WKND site.
Select the extensions option and you can notice the Adobe Core Extension that’s already installed by default. To add additional extensions, click on the extension catalog and then search for Adobe Target. Let’s select the latest version of the Target extension and click to install it. All of your 80.js settings are automatically retrieved from your 80.js configuration in the target user interface. The extension only retrieves settings from the target user interface when it is first added, so all settings should be managed in the launch interface if additional updates are needed. If launch is added to your site as synchronously, please download the prehiding code snippet from here and hardcode it to your site just before the asynchronous embed code to avoid content flickering. Save your changes and you can now see the target extension added to our launch property. The changes get saved within launch, but to push these changes to an environment, we need to run a publishing flow, like how AEM has different environments for testing and publishing your changes, Launch also has a pipeline for development, stage and publish. You can create a new library using the add new library option. I have a development library created before, and let’s open to edit it. Now it’s time to add all of our changes to the development library and then save and run the development build.
While the build executes, let’s check out the environments, and you can notice that dev, stage and production environment listed here. Our AEM’s development instances integrated with the Launch development library. So any change added and built to the Launch development library should be visible immediately in your AEM development environment. Let’s check on our build status. If the build is successful, lets switch to our WKND site homepage and refresh the browser screen. Now let’s use the Experience Cloud browser plugin to view the libraries loaded on our page. You can notice that the Adobe Target Extension is currently listed and is successfully added to your site page. In this video, we learned how to load target libraries on your site using Launch, how to find target calls from your site and more advanced topics related to target will be covered in another video. -

Next Steps