Integration

Using tags via Adobe Developer Console

Last update: May 14, 2024

CREATED FOR:

  • Intermediate
  • Developer

AEM Sites 6.5

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
      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.

  1. Navigate to your organizations Adobe Experience Cloud (https://<yourcompany>.experiencecloud.adobe.com)
  2. Log in using your Adobe ID, and make sure you are in the right organization.
  3. From the solution switcher, click on Experience Platform, then the Data Collection section, and select Tags.

Experience Cloud - tags

  1. Make sure you are in the right organization and then proceed with creating a tags property.
    Experience Cloud - tags

    For more information on creating properties, see Create a Property in the product documentation.

  2. Click on the New Property button

  3. Provide a name for your property (For example, AEM Target Tutorial)

  4. 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.

  5. Click the Save button.

    tags - New Property

  6. 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

  1. 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)

  2. Click on the Extension Catalog option, and search for Target in the filter.

  3. Select the latest version of Adobe Target at.js and Click on Install option.
    Tags - New Property

  4. 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.
    Target - Extension Config

    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

  5. 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.

  6. Repeat the steps above to search for “Experience Cloud ID Service” extension and install it.
    Extension - Experience Cloud ID Service