Adobe Launch is a platform to develop and deploy Dynamic Tag Management extensions. In this exercise we will learn how to use Adobe Launch for deploying Adobe Target on your website.

This lab exercise has two parts:

Setting up Adobe Launch for your website
Add Target to your deployment using the Launch interface

1. Setting up Adobe Launch

First, we will set up Adobe Launch for our website.

Step 1: Login in to Adobe Launch UI

Open https://launch.adobe.com in a new tab.
Click on Sign in with Adobe ID
Type the username and password provided on the sheet.
Once you login, make sure you are in the Target Summit Lab organization as displayed in the top-right corner of the page.

Step 2: Create a new property

After you have logged in successfully you should be able to see the Adobe Launch UI. Notice in the right upper corner, the logged in user details, organization and Adobe Products associated.
Click on the Add New Property button.
Name your property —quick_start+XX, XX is your Participant ID written on the sheet.
Use adobe.com as the domain
Don’t change any Advanced Settings.
Click on Save button
A new property can be seen on the Properties page.

Step 3: Create an Adapter

An Adapter refers to the destination(s) where you want to deploy your Launch libraries — on Adobe’s Akamai instance or on your own web servers. For our Lab we'll use the Akamai Adapter.

Click on the property you just created.
You should see a panel like this:
Click on the Adapters tab
Click on Create New Adapter button.
- Enter adapter name: akamai+XX
- Choose an Akamai Adapter type
- Click on Save button

Step 4: Create Environments

An environment is a destination for deployment. An environment has a 1:1 relationship with an embed code.

Choose Environments from the top navigation tabs and then click Create New Environment.
In this lab, we will be creating a development environment. Under Development click Select to choose a development environment.
Enter an environment name: dev-env+XX and choose from the adapters dropdown the adapter that you've created in Step 3 akamai+XX and click the create button.

The Create archive option is a feature used for self-hosting, which we will not be using in this Lab.

Note that as soon as you select the Adapter and hit the create button, the embed code for that environment is created and displayed. Each environment will have its own unique embed code.

Step 5: Integrate Adobe Launch Tag into the React App

Copy the embed codes from the environment that you just created.
Open Brackets Window with your react sample app, expand src directory and click on template.html file.
In your template.html file find the <head> </head> section and paste your embed code before <head> html tag closes. Press Command+S to save the html file. Your template.html file should look similar to:

Step 6: Create and publish JS Library

We are now one step away from publishing the dynamic tag created using Adobe Launch. Go to the Adobe Launch browser tab in the Google Chrome window.

Go to the Publishing tab in Adobe Launch and click on Add New Library button.
Add New Library
- Enter a name for your Library: demo-library+XX
- Choose the development environment that you've created in Step 4
Add All the Changes to build by clicking on Add All Changed Resources button
Click on Save button .
Your library is now created. Build the library with the following steps:
- Click on the small arrow next to the yellow bullet
- Choose Build for development option
- A build for your library was started and instead of yellow bullet you now should see a loading spinner.

Once the bullet turns green in color, your library has been successfully build and your changes are deployed to Akamai.

Note: If bullet has red color, then the library build failed. Please let your TA know.

Step 7. Run the Sample React Application

The Dynamic Tag is now ready for use in your web applications. Go to your sample react application browser window and refresh the page.

Open the Chrome Developer Tools(alt+command+I) on the chrome window with Sample React Application and go to the Network tab. Make sure you have selected JS requests type. Now you should see the launch-bundle successfully loaded.

NOTE: If your application doesn't run, repeat Steps 3 and 4 from A2: Download and Run the React app

Congratulations! You've just deployed and integrated your first Launch Dynamic Tag.

2. Set up AT.js using Adobe Launch

Now that we have set up Adobe Launch on our website, it allows us to deploy any Javascript Library using the Launch interface. We will set up AT.js, Target Client Library, for our website using Launch. To achieve this, we will be using the Launch extension capability. An extension is a packaged set of code that extends the Launch interface and the library functionality. Launch is the platform, and extensions are like apps that run on the platform.

Step 1: Install Target Extension in your Launch property

Open your chrome tab with Adobe Launch and go into your property.
Click on Extensions tab. There are two tabs - Installed and Catalog.
- Installed - All currently installed extensions are listed here. You will see the CORE extension there. This includes common Launch capabilities.
- Catalog - The latest versions of all available Launch Extensions are available here.
Click on the Catalog tab and find Adobe Target Extension card, once you found it click on install button.
This opens the Adobe Target Extension configuration page. This allows us to configure the AT.js deployment.
- Confirm that the Client Code is set to targetsummitlab, the organization for this lab.
- If you see any other value, please seek help from a TA in this lab.
The Adobe Target Extension is now installed for your Launch Property.

Step 2: Create a Adobe Target Rule

Launch is a rule-based system. It looks for user interaction and associated data. When the criteria outlined in your rules are met, the rule triggers the extension, script, or HTML you identified. We will create the necessary Target rules for our Launch integration.

2.1 Create the Target Rule

Go to the Rules tab and click on the Create New Rule button.
Give it a name - target-rule+XX, where XX is your participant ID
We will create a Target rule that performs a set of actions (such as loading the AT.js library) when an event (such as page load) happens.

2.2 Add Events

We will add an event that loads the Target Library at the top of the page.

To set up an event hit the Add button under Events section.
In the event configuration container:
- Leave Extension as Core
- In the Event Type select the Library Loaded(Page Top) event under Page Load section at the end of the dropdown.
- Click on Keep Changes button to save the event configuration
Core - Library Loaded (Page Top) should now be visible under the Events section

2.3 Add Actions

We will add three actions - Loading the Target Library, Adding a Global Mbox parameter and Firing the Global Mbox.

Click on Add under Actions
In Action Configuration, select Adobe Target under Extension
Select Load Target under Action Type
Click on Keep Changes
Click on the + icon under Actions to add another action
In Action Configuration, select Adobe Target under Extension
Select Add Params to Global MBox under Action Type
In the action configuration, you will see a name, value pair you can add. Add accountId in Name and XX in Value.
- Parameters to a Target MBox are send to every Target Request and can be used to personalize the experience. In this example, we will be sending the parameter accountId with every Target request.
Click on Keep Changes
Click on the + icon under Actions to add another action
In Action Configuration, select Adobe Target under Extension
Select Fire Global MBox under Action Type
Notice that the action configuration has Body Hiding enabled.
- When Target is deployed on the client-side, content on your web page is personalized. This happens once the relevant page elements are available for a change. In order to give visitors a consistent experience and not cause a flicker on the page, it is advisable to hide the page or page elements. Target makes them visible after the personalization has been applied.
Click on Keep Changes

2.4 Save the Rule

Your actions are now configured and your Target Rule should look like this.

Click on the Save button and your Rule is ready to be used.

Step 3: Publish the changes

Publishing is all about getting your extensions, data elements, and rules to work for you, collecting the data you want them to collect and providing the experience you want to provide for your users. The following steps will publish all our changes to Adobe Launch.

Go to Publishing tab
Click on the small Down Arrow near your library
Hit on Edit option
Under the New Resources section below, click on Add All Changed Resources. This adds all the changes to your Launch library.
Then click on Save & Build for Development button

You have successfully deployed AT.js to your React App using Adobe Launch

A3. Deploy AT.js using Adobe Launch - adobe-target/clientside GitHub Wiki