Send to Adobe Target

The Experience Workspace Send to Adobe Target integration allows authors to push fragments or full pages directly to Adobe Target for personalization and experimentation use cases.

Prerequisites

  1. An Adobe Target account
  2. An Adobe Developer Console project with an Adobe Target API integration

Overview

Configuring the Adobe Target integration requires these steps.

  1. Create an Adobe Developer Console project with appropriate API credentials.
  2. Add Developer console credentials to Experience Workspace.
  3. Turn on the Send to Adobe Target plugin for the Prepare menu.

Create an Adobe Developer Console project

These instructions highlight the important steps for creating the necessary Adobe Developer Console project and assume basic familiarity with Adobe Developer Console, Adobe Target, and the Admin Console. Please see their respective documentation for further information.

  1. Log into the Adobe Developer Console at https://developer.adobe.com/console
  2. Create a new project, which will initially be untitled. You can rename it as appropriate.
  3. Click Add API.
  4. In the Add an API dialog, find and check the Adobe Target API and click Next.
  5. In the Configure API wizard, you will be prompted to name the credential. This will be pre-populated or you can choose your own.
  6. Click Next.
  7. Select which profiles you want your integration to have access to. By default, the integration will have access to all product profiles.
  8. Click Next.
  9. Click Save configured API and the wizard closes. Keep the browser tab open.
  10. In another browser tab, visit https://adminconsole.adobe.com/ and update the product role to Approver or the role that best suits your needs.
  11. Return to the browser tab with the Developer Console and navigate to the credential details page and copy your Client ID and Client Secret.
  12. Sign into Adobe Target and note your tenant name. This will be the human-readable name after the @-sign in the Adobe Target URL.

Add Adobe Target credentials to Experience Workspace

  1. Now you can provide Experience Workspace with the credential information you copied from the Developer Console and Adobe Target.
  2. In a new browser tab or window, browse to your project's hidden /.da folder: https://da.live/#/{ORG}/{SITE}/.da
  3. Make a new sheet called adobe-target.
    • If you wish to allow only some authors to use the Adobe Target integration, you can set specific permissions to prevent unwanted use.
  4. Create the following rows in the config sheet, substituting the values from Adobe Target and Adobe Developer Console.
key value
tenant YOUR_TENANT_NAME
clientId YOUR_CLIENT_ID
clientSecret YOUR_CLIENT_SECRET

Do not preview or publish this file.

Enabling Send to Adobe Target

Finally, you enable the Send to Adobe Target plugin in the Prepare menu, which will use the secrets you provided.

  1. Edit your site config or org config.
  2. Add the following row to the prepare tab or create the prepare tab if it does not yet exist.
title path icon ref
Send to Adobe Target

Because this is an Adobe-provided plugin, the path field is not required. Experience Workspace will resolve the plugin by its title.

Using Send to Adobe Target

  1. Open a page or fragment in Experience Workspace.
  2. Click the Prepare menu button.
  3. Select Send to Adobe Target.
  4. A dialog will pop up.
  5. If an existing Offer is found, you will be prompted to update or delete it.
  6. If an existing Offer is not found, you will be prompted for a name.
  7. Send / update the Offer.

Your page will automatically be previewed, and its content will be sent to Target.

Limitations

Delivery

Most projects will have their own setup for how Adobe Target should be delivered on a page. This could be anything from using alloy.js, to at.js, to a custom integration through Google Tag Manager. This includes whether or not to use VEC or a form to create an activity.

The notes and sample code below are an example that provides a path to good performance while balancing developer experience, complexity, and the personalization admin's experience.

Sample code

The following has been taken from the Adobe Target integration on Author Kit.

scripts.js (Javascript)

async function loadTarget() {
  // Check for target metadata flag
  const targetMeta = getMetadata('target');
  if (targetMeta) {
    // Overwrite target domains to be same origin
    window.targetGlobalSettings = {
      serverDomain: hostnames[0],
      secureOnly: true,
      overrideMboxEdgeServer: false,
    };

    // Import the local copy of at.js
    await import('../deps/at/at.js');

    // Request all the relevant offers for the page
    const offers = await window.adobe.target.getOffers({
      request: { execute: { pageLoad: {} } },
    });

    // Loop through them and inject if they exist
    offers?.execute?.pageLoad?.options?.forEach((opt) => {
      const { cssSelector, content } = opt.content[0];
      const el = document.querySelector(cssSelector);
      if (el) el.outerHTML = content;
    });
  }
}

export async function loadPage() {
  await loadTarget();
  // DOM updated, decorate as usual
  await loadArea();
}
await loadPage();

Below is a sample Cloudflare Worker function to proxy Target requests through your production domain. It is loosely based on the Edge Delivery Cloudflare reference implementation.

target.js (Javascript)

export default async function fetchTarget({ url, env, savedSearch, originalRequest }) {
  const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'POST, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type',
  };

  // Handle CORS preflight
  if (originalRequest.method === 'OPTIONS') {
    return new Response(null, { headers: corsHeaders });
  }

  const targetUrl = new URL(url.pathname + savedSearch, `https://${env.TARGET_HOSTNAME}`);

  const response = await fetch(targetUrl, {
    method: originalRequest.method,
    headers: {
      'Content-Type': 'application/json',
    },
    body: originalRequest.body,
  });

  // Add CORS headers to response
  const newResponse = new Response(response.body, response);
  Object.entries(corsHeaders).forEach(([key, value]) => {
    newResponse.headers.set(key, value);
  });

  return newResponse;
}

Non-Edge Delivery Services surfaces

The Adobe Target Offers created from Experience Workspace are semantic HTML that can be delivered to any surface that can accept this type of content. There are two common ways to handle this type delivery:

  1. Let the delivered Offer use the existing surface's CSS and JavaScript - This is useful for default content you may want to push out to other surfaces.
  2. Wrap the delivered Offer in an AEM Embed Web Component - This creates an encapsulation of styles and client-side logic that mimics the exact same experience someone would have on an Edge Delivery surface.

Tips