Experience League | Image

L780 - Getting Started with Adobe Launch

Table of Contents

Lesson 1 - Create a Web Property

Prerequisites

To complete this lesson, you must have permission to Develop, Approve, Publish, Manage Extensions, and Manage Environments in Launch. If you are unable to complete any of these steps because any of the user interface options are not available to you, contact your Experience Cloud Administrator to request access.

Exercise 1.1 - Create a web property

  1. Log into the Experience Cloud.

  2. Open the Solution Switcher.

  3. Select Activation from the menu.

    1

  4. Under Launch, by Adobe, click the Go to Launch button.

    You should now see the Properties screen (if no properties have ever been created in the account this screen might be empty):

    2

    3

    NOTE: A property is a container that you fill with extensions, rules, data elements, and libraries as you deploy tags to your site. A property can be any grouping of one or more domains and subdomains. You can manage and track these assets similarly.

    For example, suppose that you have multiple websites based on one template, and you want to track the same assets on all of them. You can apply one property to multiple domains. For more information on creating properties, read Companies and Properties in the product documentation or watch the Creating your first property video.

  5. Click New Property.

  6. Name your property (for example, “Launch Tutorial”).

  7. As the domain, enter enablementadobe.com. This tutorial uses this property in conjunction with the We.Retail demo site, which is hosted on this domain.

  8. Click Save.

    4

    Your new property should display on the Properties page. If you check the box next to the property name, options to Configure or Delete the property appear above the property list. Click on the name of your property (for example, “Launch Tutorial”) to open the Overview screen.

    5

Lesson 2 - Setup Environments

Lesson Context

This lesson introduces two of the main concepts of Launch:

  • Environments
  • Embed Codes

New properties are created with three environments:

  • Development
  • Staging
  • Production

These environments correspond to the typical stages in the code development and release process. If desired, you can add additional Development environments, which is common on larger teams with multiple developers working on different projects at the same time.

The embed code is a <script> tag that you put on the pages of your site to load and execute the logic you build in Launch. If you load the library asynchronously, the browser continues to load the page, retrieves the Launch library, and executes it in parallel. In this case, there is only one embed code, which you put in the <head>. When Launch is deployed synchronously, there are two embed codes, one which you put in the <head> and another which you put before the </body>.

This lesson shows how to implement the asynchronous embed code of your Launch property's Development environment.

Objectives

At the end of this lesson, you will be able to:

  • Obtain the embed code for your Launch property
  • Understand the difference between a Development, Staging, and Production environment
  • Add a Launch embed code to an HTML document
  • Explain the optimal location of the Launch embed code in relation to other code in the <head> of an HTML document

Exercise 2.1 - Setup environments

From the property Overview screen, click on the Environments tab to go to the environments page. Note that Development, Staging, and Production environments have already been created for you.

6

Development, Staging, and Production environments correspond to the typical environments in the code development and release process. Code is first written by developers in a Development environment. When they have completed their work, they send it to a Staging environment for QA and other teams to review. After the QA and other teams are satisfied, the code is published to the Production environment, which is the public-facing environment which your visitors experience when they come to your website.

Launch permits additional Development environments, which is useful in large organizations where multiple developers work on different projects at the same time.

These are the only environments needed to complete the tutorial. Environments allow you to have different working versions of your Launch libraries hosted at different URLs, so you can safely add new features and make them available to the right users (such as developers, QA engineers, the public, and so on) at the right time

  1. In the Development row, click the Install icon to open the modal.

    Note: Launch defaults to the asynchronous embed codes.

  2. Click the copy icon to copy the installation code to your clipboard.

  3. Click Close to close the modal.

    7

Exercise 2.2 - Implement the embed code in the <head> of the sample HTML page

The embed code should be implemented in the <head> element of all HTML pages that share the property. You might have one or several template files that control the <head> globally across the site, making it a straightforward process to add Launch.

If you haven’t already, download the sample HTML page. Right-click on this link and click Save Link As. Then, open the page in a code editor.

Replace the existing embed code on or around line 34 with the one on your clipboard and save the page. Next, open the page in a web browser. If you are loading the page using the file:// protocol, you need to add "https:" at the beginning of the embed code URL in your code editor. Lines 33-36 of your sample page might look something like this:

Open your web browser’s developer tools and go to the Network tab. At this point, you should see a 404 error for the Launch environment URL:

8

The 404 error is expected because you haven't built a library in this Launch environment yet. You will do that in the next lesson. If you see a "failed" message instead of a 404 error, you probably forgot to add the https:// protocol in the embed code. Again, you only need to specify the https:// protocol if you are loading the sample page using the file:// protocol. Make that change and reload the page until the 404 error appears.

Exercise 2.3 - Launch implementation best practices

Review some of the Launch implementation best practices that are demonstrated in the sample page:

  • Data Layer: Adobe strongly recommends creating a digital data layer on your site, containing all of the attributes needed to populate variables in Analytics, Target, and other marketing solutions. This sample page only contains a very simple data layer, but a real data layer might contain many more details about the page, the visitor, their shopping cart details, etc. For more info on data layers, see Customer Experience Digital Data Layer 1.0. To maximize what you can do in Target, Customer Attributes, and Analytics, define your data layer before the Launch install code, in order.
  • JavaScript helper libraries: If you already have a library like JQuery implemented in the <head> of your pages, load it before Launch in order to leverage its syntax in Launch and Target.
  • HTML5 doctype: The HTML5 doctype is required for Target implementations.
  • preconnect and dns-prefetch: Use preconnect and dns-prefetch to improve the page load time. See also: https://w3c.github.io/resource-hints/.
  • Pre-hiding snippet for asynchronous Target implementations: To manage content flicker when Target is deployed via asynchronous Launch embed codes, you should hardcode a pre-hiding snippet on your pages before the Launch embed codes. This is discussed in the Target tutorial.

Here is a summary what these best practices look like in the suggested order. Placeholders are in ALL CAPS for account specific details:

<!doctype html>
<html lang="en">
  <head>
    <title>Basic Demo</title>
    <!--Preconnect and DNS-Prefetch to improve page load time. REPLACE "techmarketingdemos" WITH YOUR OWN AAM PARTNER ID, TARGET CLIENT CODE, AND ANALYTICS TRACKING SERVER-->
    <link rel="preconnect" href="//dpm.demdex.net">
    <link rel="preconnect" href="//fast.techmarketingdemos.demdex.net">
    <link rel="preconnect" href="//techmarketingdemos.demdex.net">
    <link rel="preconnect" href="//cm.everesttech.net">
    <link rel="preconnect" href="//techmarketingdemos.tt.omtrdc.net">
    <link rel="preconnect" href="//techmarketingdemos.sc.omtrdc.net">
    <link rel="dns-prefetch" href="//dpm.demdex.net">
    <link rel="dns-prefetch" href="//fast.techmarketingdemos.demdex.net">
    <link rel="dns-prefetch" href="//techmarketingdemos.demdex.net">
    <link rel="dns-prefetch" href="//cm.everesttech.net">
    <link rel="dns-prefetch" href="//techmarketingdemos.tt.omtrdc.net">
    <link rel="dns-prefetch" href="//techmarketingdemos.sc.omtrdc.net">
    <!--/Preconnect and DNS-Prefetch-->
    <!--Data Layer to enable rich data collection and targeting-->
    <script>
      var digitalData = {
        "page": {
          "pageInfo" : {
            "pageName": "Home"
          }
        }
      };
    </script>
    <!--/Data Layer-->
    <!--jQuery or other helper libraries-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!--/jQuery-->
    <!--prehiding snippet for Adobe Target with asynchronous Launch deployment-->
    <script>
      (function(g,b,d,f){(function(a,c,d){if(a){var e=b.createElement("style");e.id=c;e.innerHTML=d;a.appendChild(e)}})(b.getElementsByTagName("head")\[0\],"at-body-style",d);setTimeout(function(){var a=b.getElementsByTagName("head")\[0\];if(a){var c=b.getElementById("at-body-style");c&\&a.removeChild(c)}},f)})(window,document,"body {opacity: 0 !important}",3E3);
    </script>
    <!--/prehiding snippet for Adobe Target with asynchronous Launch deployment-->
    <!--Launch Header Embed Code: REPLACE LINE 39 WITH THE INSTALL CODE FROM YOUR OWN DEVELOPMENT ENVIRONMENT-->
    <script src="//assets.adobedtm.com/launch-EN93497c30fdf0424eb678d5f4ffac66dc.min.js" async></script>
    <!--/Launch Header Embed Code-->
  </head>
  <body>
    <h1>Launch by Adobe: Basic Demo</h1>
    <p>This is a very simple page to demonstrate basic concepts of Launch by Adobe</p>
  </body>
</html>

Exercise 2.4 - Embed Code

A DTM embed code is a <script> tag that you embed in the HTML of your web page.

This <script> tag retrieves a JavaScript file published by DTM and loads it on the page. This file is the DTM library file, commonly called a container tag. This container tag contains all the tools, data element definitions, rules logic, and code that you define inside of DTM.

DTM publishes this container tag file to the web host you specified, which is either an Akamai location or your own FTP location. The embed code that DTM provides is based on this host location.

When a user visits your site in a browser, the browser requests the DTM file from this server, using the embed code, and loads it.

In the diagram below, Step 1 shows DTM publishing the container tag to your specified web host. In Step 2, the browser requests the container tag, using the embed code, and the host responds with the published file.

9

Exercise 2.5 - Linking Embed Codes

The linking process allows you to take the DTM Production embed code, with its matching host location, and use that same embed code with your Launch production environment.

If you do this, DTM and Launch share the server location and the container tag file name.

When you publish in Launch, the Launch container tag file overwrites the DTM file, so when the browser requests the file from the server, the Launch file is returned.

In the diagram below, Step 3 represents Launch publishing its container tag over the top of the DTM container tag (from Step 1). When Step 2 occurs, it gets the Launch container tag instead.

10

Important: This overwriting works both ways. If you publish Launch, then subsequently publish from DTM, the DTM container tag overwrites the Launch one. You have two systems publishing to the same location. This means you don't have to change the code on your page, but it also means you need to be careful when you publish. It's recommended that you disable your DTM property to prevent this situation.

Linking Prerequisites

Before you link your embed code:

  • Your DTM company must be connected to the same Experience Cloud Organization as Launch.
  • Your user account must have the Manage Environments right in Launch and the Admin right in DTM.
  • Your DTM property must not already be linked to a different Launch property.
  1. In Launch, open the Environments tab.
  2. Create a new Production environment.
  3. Give your environment a name.
  4. Toggle the Link DTM embed code option on.
  5. Paste your DTM production embed code into the DTM Embed Code field in Launch.
  6. Finish configuring your Launch Production environment (archive setup, etc).
  7. Click Save.

Launch validates a number of things and tells you whether linking was successful.

Important: You can only have one Production environment in Launch. If you have already created one on this property, you need to delete the existing Production environment so you can create a new linked environment. The new one does not have the same embed code as the old one, so don't do this unless you are familiar with the process.

If you use embed code linking, the process is mostly the same as without it, but with some highlighted differences:

  1. Create your property, install an extension, create data elements, and create rules in Launch, as you normally would.
  2. Create your Development and Staging environments in Launch as usual.
  3. ​Create a linked Production environment as described above.
  4. Create your library in Launch as usual.
  5. Test in Development, submit, test in Staging, and approve as usual.
  6. Publish. The Launch container tag overwrites the DTM container tag and any browser with this embed code retrieves the Launch container tag.
  7. Disable your DTM property to prevent accidentally publishing the DTM file over the top of the Launch file.

Step 7 can be done any time after Step 3 has been performed.

Lesson 3 - Extensions

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.

Adding an extension adds new data elements and new options for creating rules.

Extensions determine the elements that are available when building properties, rules, and data elements. They provide:

  • Events, conditions, and exceptions
  • Data elements
  • JavaScript

Use the links at the top of the Extensions list to view installed extensions, the extensions catalog, or updates.

Select an extension, then click Configure to view and change the extension's settings.

Important: Changes do not take effect until they are published.

By default, Adobe provides extensions that support common integrations. Extensions can be modified with custom configurations. Configurations are provided through the extensions. To create a configuration, click the extension card, then click Add New Configuration.

Exercise 3.1 - Extension catalog

Use the extension catalog to browse, configure, and deploy marketing and advertising technology built and maintained by independent software vendors, as well as extensions for Adobe solutions.

The Extensions page provides three views:

  • Installed: Shows all of your installed extensions.
  • Catalog: Shows all available extensions
  • Updates: Shows updates to installed extensions.

Click Extensions to see all your installed extensions. You can also use the catalog to see a list of all available extensions and which extensions have updates available.

Exercise 3.2 - Add a new extension

Launch is highly extendible. Extensions add core functionality to Launch.

A common use of extensions is to create integrations with other applications. In the previous version of Launch, known as Dynamic Tag Management, extensions were called tools.

  1. From a property's overview page, open the Extensions tab.

  2. Select an extension.

    11

    • If the extension exists, select it from the extensions catalog.
    • Mouse over an extension in your list to configure or disable it.
    • Add other extensions from the catalog if they are not currently in your list.

    The Core extension is the starting point for your new extension. The default extension provides:

    • Default event
    • Default conditions and exceptions
    • Default JavaScript

    These defaults are the basis for the custom rules you'll build to create your extension.

Exercise 3.3 - Add the Analytics Extension

The Analytics extension consists of two main parts:

  • The extension configuration, which manages the core AppMeasurement.js library settings and can set global variables

  • Rule actions to do the following:

    • Set Variables
    • Clear Variables
    • Send the Analytics Beacon
  1. Go to Extensions > Catalog and locate the Adobe Analytics extension.

  2. Click Install.

  3. Under Library Management > Report Suites, enter the report suite IDs you want to use with each Launch environment.

    In this lab, you can use one report suite for all environments, but in production you would want to use separate report suites, as shown in the image below:

    12

    Note: Use the Manage the library for me option as the Library Management setting. This makes it much easier to keep the core AppMeasurement.js code up-to-date.

  4. Under General > Tracking Server, enter your tracking server (for example, tmd.sc.omtrdc.net).

    Enter your SSL Tracking Server if your site supports https://.

    13

  5. In the Global Variables section, set the Page Name variable using your Page Name data element, then click the Data Element icon to open the modal and choose the page Page Name data element.

  6. Click Save to Library and Build.

    Note: Global variables can be set in the extension configuration or in rule actions. Be aware that when setting variables with the extension configuration, the data layer must be defined before the Launch embed codes.

Lesson 4 - Data Elements and Rules

This lesson introduces some of the main concepts of Launch:

  • Data elements: Store the attributes you want to send to your marketing and advertising solutions
  • Rules: Fire the requests to those solutions under the right conditions
  • Libraries: JavaScript files that load on the page to do all of the work

Data elements and rules are the basic building blocks of Launch.

Note: New data element types have been added to Launch, which did not exist in DTM. Some of the new data element types include Local Storage, Session Storage, Page Info, and Random Number

This lesson uses all three of these items to make the sample page perform an action.

Objectives

At the end of this lesson, you will be able to:

  • Create a data element
  • Create a rule
  • Create a library
  • Add changes to a library
  • Validate that your library is loading in your web browser
  • Use the Working Library feature to work more efficiently

Exercise 4.1 - Create Data Element for Page Name

Data elements are Launch’s version of a data layer. They can store values from your own data layer object, cookies, local storage objects, query string parameters, page elements, meta tags, and so on.

Note: Data element capabilities can be extended with Extensions. For example, the ContextHub extension allows you to add data elements using features of the extension.

This exercise shows how to create a data element for Page Name, which will be used later in the Target and Analytics implementations.

  1. In the top navigation, click Data Elements. Because you haven’t created any data elements yet in this property, a brief video appears with additional information on this topic. Watch this video, if you like.

  2. Click Create New Data Element.

    Click the Create New Data Element button

  3. Name the data element (for example, "Page Name").

  4. Use the JavaScript Variable Data Element type to point to a value in your sample page's data layer: digitalData.page.pageInfo.pageName.

  5. Use not available as the Default Value. The Default Value tells Launch what value to use for the data element if your JavaScript Variable specified above is not found.

  6. Check the boxes for Force lowercase value and Clean text to standardize the case and remove extraneous spaces.

  7. Leave None as the Storage Duration setting, because this value is typically different on every page.

  8. Save the data element.

Exercise 4.2 - Create a Rule

Next, use the data element you created in a simple rule. Rules are one of the most powerful features in Launch. They tell specifically what happens when a visitor interacts with your website. When the criteria outlined in your rules are met, the rule triggers the specified action.

Use the following steps to create a rule that outputs the Page Name data element value to the browser console.

  1. In the top navigation, click Rules. Because you haven’t created any rules yet in this property, a brief video appears with additional information on the topic. Watch this video, if you like.

  2. Click Create New Rule.

    Click the Create New Rule button

  3. Name the Rule (for example, "All Pages - Library Loaded"). This name uses a convention that indicates where and when the rule will fire, which makes it easier to identify and reuse as your Launch property matures.

  4. Under Events, click Add.

    Name the Rule and Add an event

    The Event tells Launch when the rule should fire and can be many things, including a page load, a click, a custom JavaScript event, and so on.

  5. As the Event Type, select Library Loaded (Page Top). When you select the Event Type, Launch pre-populates a name for the event using your selection. The default order for the event is 50. Ordering is a powerful feature in Launch that gives you precise control over the sequence of actions when multiple rules are triggered by the same event. This feature is used later in the tutorial.

  6. Click Keep Changes.

    Select an Event

  7. To fire this rule on all pages, leave Conditions blank. If you open the Conditions modal, you will see that conditions can add both restrictions and exclusions based on a large variety of options, including URLs, data element values, date ranges, and more.

  8. As the Action Type, select custom code. At this point, this is the only option. Later in the tutorial, as you add extensions, more options will become available.

  9. Select Open Editor, then add the following to the code window:console.log('The page name is '+_satellite.getVar('Page Name'));

    Select an Action

    Enter custom code

  10. Save the code window.

  11. On the Action configuration screen, click Keep Changes.

  12. Save the rule.

Note for DTM Migrators

In Launch, rules are required in order to fire most marketing pixels. For example, in order to fire the Adobe Analytics Beacon, we must use a Rule to instruct Launch to do so.The Rule builder has been dramatically redesigned and rebuilt in Launch. Some of the main changes are:

  • There is just one Rule builder. DTM rule-types like "Page Bottom", "Click", and "Direct Call" are all just event-types in the Rule builder. This makes it much easier to update a rule should you need to change the trigger from, say, a DOM Ready event to a custom event.

  • There is a new "Custom Code" event-type

  • Extensions can add new event types to the Rule builder. For example, the Target extension could eventually add built-in support for its at.js custom events, so custom code wouldn't be needed to use this feature.

  • Extensions can add new actions to the Rule builder, reducing issues by deprecating reliance on custom code. You will be using many of these extension actions in this Tutorial.

  • Rules are required to fire requests associated with most marketing tools. This will require a mindset adjustment, especially for things like setting Customer IDs, firing Analytics beacons, and firing the global mbox.

Lesson 5 - Publishing Workflow

After you have implemented some key solutions of the Adobe Experience Cloud in your Development environment, it's time to learn the publishing workflow.

Objectives

At the end of this tutorial, you will be able to:

  • Publish a Development library to the Staging environment
  • Map a Staging library to your production website using the Debugger
  • Publish a Staging library to the Production environment

Exercise 5.1 - Save the rule to a library

After configuring a collection of extensions, data elements, and rules in the Launch interface, you need to package these capabilities and logic into a set of JavaScript code that you can deploy on your website so marketing tags fire when visitors come to the site. A library is the set of JavaScript code that does this.

In an earlier lesson, you implemented the embed code of your development environment on the sample page. When you loaded the sample page a 404 error was returned for the embed code URL because a Launch library had not been built yet and assigned to the environment. In this tutorial, you will put your new data element and rule in a library so that your sample page can do something.

  1. Go to the Publishing tab and click Add New Library.

    Add New Library

  2. Name the library "Initial Setup."

  3. Select Environment > Development.

  4. Click Add All Changed Resources. Launch summarizes the changes you just made.

  5. Click Save & Build for Development

    21

    After a few moments, the status turns green, indicating the library built successfully.

    22

Exercise 5.2 - Validate your rule

To validate that your rule is working as expected, reload your sample page. If you look at the Developer Tools > Network tab, you should see a 200 response for your Launch Library.

23

You have created your first data element and rule, and built your first Launch library.

Exercise 5.3 - Use the Working Library feature

When you are making a lot of changes in Launch, it is inconvenient to have to open the Publishing tab, add changes, and build the library each time you want to see the result. After you have created your Initial Setup library, you can use the Working Library feature to rapidly save your changes and rebuild the library in a single step.

  1. Make a small change to the All Pages - Library Loaded rule.

  2. In the top navigation, click Rules and then click on the All Pages - Library Loaded rule to open it.

    24

  3. On the Edit Rule page, click the Select an option dropdown to show the Working Library options. Select your Initial Setup library.

    25

    After you select the library, the Save button defaults to Save to Library and Build. When you make a change in Launch, you can use this option to automatically add the change directly to your working library and rebuild it.

  4. To test this feature, open your Custom Code action and add a colon after the text "The page name is" so the entire code block reads:

  5. Save the code, keep the changes in the action, and click Save to Library and Build.

    26

  6. Wait a moment until the green status reappears next to the Working Library dropdown, then reload your sample page.

    You should see your change reflected in the console message. (You might need to clear your browser cache and reload to see the change to the page.

    27

    This is a much faster way of working. The rest of the implementation tutorials use this approach.

Exercise 5.4 - Publish to Staging

After you have created and validated your library in the Development environment, it is time to publish it to Staging.

  1. Go to the Publishing page.

  2. Open the drop down next to your library and select Submit for Approval.

    28

  3. Click Submit. Your library appears in the Submitted column in an unbuilt state.

  4. Open the drop down and select Build for Staging.

    29

    Once the green-dot icon appears, the library can be previewed in the Staging environment.

In a real-life scenario, the next step in the process would typically be to have your QA team validate the changes in the Staging library. They can do this using the Debugger.

Exercise 5.5 - Validate the changes in the Staging library

  1. In your Launch property, open the Environments page.

  2. In the Staging row, click the Install icon.

    30

  3. Click the Copy icon to copy the embed code to your clipboard, then click Close.

    31

  4. Open the We.Retail demo site in your Chrome browser.

  5. Open the Experience Cloud Debugger extension.

    32

  6. Open the Tools tab and click Adobe Launch > Dynamically Insert Launch > Embed Code to open the text input field (it might currently have the URL of your Development embed code):

    33

  7. Paste the Staging embed code that is in your clipboard, then click the disk icon to save.

    34

  8. Reload and check the Summary tab of the Debugger. Under the Launch section, you should see that your Staging Property is implemented, showing your property name (for example, "Launch Tutorial" or whatever you named your property).

    35

In real life, once your QA team has signed off by reviewing the changes in the Staging environment, it is time to publish to production.

Exercise 5.6 - Publish to Production

  1. Go to the Publishing page, then from the dropdown, click Approve for Publishing:

    36

  2. Click Approve. The library appears in the Approved column in the unbuilt state (yellow dot).

  3. Open the drop down and select Build and Publish to Production:

    37

  4. Click Publish. The library appears in the Published column:

    38

You've completed the tutorial and published your first property in Launch.