[Integration]{class="badge positive"}
Using tags via Adobe Developer Console
[AEM Sites 6.5]{class="badge informative"}
Prerequisites
-
AEM author and publish instance running on localhost port 4502 and 4503 respectively
-
Experience Cloud
-
Access to your organizations Adobe Experience Cloud -
https://<yourcompany>.experiencecloud.adobe.com -
Experience Cloud provision with the following solutions
note note NOTE You should have permission to Develop, Approve, Publish, Manage Extensions, and Manage Environments in Data Collection. If you are unable to complete any of these steps because the user interface options are not available to you, reach out to your Experience Cloud Administrator to request access. For more information on tags permissions, see the documentation.
-
-
Chrome browser extensions
- Adobe Experience Cloud Debugger(https://chrome.google.com/webstore/detail/adobe-experience-platform/bfnnokhpnncpkdmbokanobigaccjkpob)
Users involved
For this integration, the following audiences must be involved, and to perform some tasks, you might need administrative access.
- Developer
- AEM Admin
- Experience Cloud Administrator
Introduction
AEM offers an out of the box integration with tags. This integration allows AEM administrators to easily configure tags via an easy-to-use interface, thereby reducing the level of effort and number of errors, when configuring these two tools. And just by adding Adobe Target extension to tags will help us use all features of Adobe Target on the AEM web page(s).
In this section, we would be cover the following integration steps:
-
Tags
- Create a tags Property
- Adding Target Extension
- Create a Data Element
- Create a Page Rule
- Setup Environments
- Build and Publish
-
AEM
- Create a Cloud Service
- Create
Tags
Create a tags property
A property is a container that you fill with extensions, rules, data elements, and libraries as you deploy tags to your site.
- Navigate to your organizations Adobe Experience Cloud (
https://<yourcompany>.experiencecloud.adobe.com) - Log in using your Adobe ID, and make sure you are in the right organization.
- From the solution switcher, click on Experience Platform, then the Data Collection section, and select Tags.
-
Make sure you are in the right organization and then proceed with creating a tags property.
For more information on creating properties, see Create a Property in the product documentation.
-
Click on the New Property button
-
Provide a name for your property (For example, AEM Target Tutorial)
-
As the domain, enter localhost.com since this is the domain where the WKND demo site is running on. Although the ‘Domain’ field is required, the tags property will work on any domain where it’s implemented. Primary purpose of this field is to pre-populate menu options in the Rule builder.
-
Click the Save button.
-
Open the property that you just created and click on the Extensions tab.
Adding Target extension
The Adobe Target extension supports client-side implementations using Target JavaScript SDK for the modern web, at.js. Customers still using Target older library, mbox.js, should upgrade to at.js to use tags.
The Target extension consists of two main parts:
-
The extension configuration, which manages the core library settings
-
Rule actions to do the following:
- Load Target (at.js)
- Add Params to All Mboxes
- Add Params to Global Mbox
- Fire Global Mbox
-
Under Extensions, you can see the list of Extensions that are already installed for your tags property. (Adobe Launch Core Extension is installed by default)
-
Click on the Extension Catalog option, and search for Target in the filter.
-
Select the latest version of Adobe Target at.js and Click on Install option.
-
Click on Configure button, and you can notice the configuration window with your Target account credentials imported, and the at.js version for this extension.
When Target is deployed via asynchronous tags embed codes, you should hard-code a pre-hiding snippet on your pages before the tags embed codes in order to manage content flicker. We will learn more about the pre-hiding snipper later. You can download the pre-hiding snippet here
-
Click Save to complete adding the Target extension to your tags property, and you should now be able to see the Target extension listed under the Installed extensions list.
-
Repeat the steps above to search for “Experience Cloud ID Service” extension and install it.
Setup Environments
- Click on the Environment tab for your site property, and you can see the list of environment that gets created for your site property. By default, we have one instance each created for development, staging, and production.
Build and Publish
-
Click on the Publishing tab for your site property, and let’s create a library to build, and deploy our changes (data elements, rules) to a development environment.
embed -
Publish your changes from the Development to a Staging environment.
embed -
Run the Build for Staging option.
-
Once the build is complete, run Approve for Publishing, which moves your changes from a Staging environment to a Production environment.
-
Finally, run the Build and Publish to production option to push your changes to production.
Adobe Experience Manager
- Create IMS integration in AEM using credentials from Adobe Developer. (01:12 to 03:55)
- In Data Collection, create a property. (covered above)
- Using the IMS integration from Step 1, create tags integration to import your tags property.
- In AEM, map the tags integration to a site using browser configuration. (05:28 to 06:14)
- Validate integration manually. (06:15 to 06:33)
- Using Adobe Experience Cloud Debugger browser plugin. (06:51 to 07:22)
At this point, you have successfully integrated AEM with Adobe Target using tags as detailed in Option 1.
For using AEM Experience Fragment offers to power you personalization activities, lets proceed to the next chapter, and integrate AEM with Adobe Target using the legacy cloud services.