Documentation Experience Platform Web Tutorial

Overview

Last update: Mon Nov 20 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Topics:
Tags

CREATED FOR:

Beginner
Intermediate
Developer

Implement the Experience Cloud in Websites with Tags is the perfect starting point for front-end developers or technical marketers who want to learn how to implement the Adobe Experience Cloud solutions on their website.

Each lesson contains how-to exercises and foundational information to help you implement the Experience Cloud and understand its value. Demo sites are provided for you to complete the tutorial, so you can learn the underlying techniques in a safe environment. After completing this tutorial, you should be ready to start implementing all of your marketing solutions through tags on your own website.

INFO

This tutorial uses application-specific extensions and libraries (AppMeasurement.js for Adobe Analytics, at.js for Adobe Target). If you are looking to implement Adobe Experience Platform Web SDK, please see the Implement Adobe Experience Cloud with Web SDK tutorial.

After completing this you will be able to:

Create a tag property
Install a tag property on a website
Add the following Adobe Experience Cloud solutions:
- Adobe Experience Platform Identity Service
- Adobe Target
- Adobe Analytics
- Adobe Audience Manager
Create rules and data elements to send data to the Adobe solutions
Validate the implementation using the Adobe Experience Cloud Debugger
Publish changes through development, staging, and production environments

NOTE

Adobe Experience Platform Launch is being integrated into Adobe Experience Platform as a suite of data collection technologies. Several terminology changes have rolled out in the interface which you should be aware of while using this content:

Platform Launch (Client Side) is now tags
Platform Launch Server Side is now event forwarding
Edge configurations are now datastreams

NOTE

Similar multi-solution tutorials are also available for Web SDK and Mobile SDK.

Prerequisites

In these lessons, it is assumed that you have an Adobe Id and the required permissions to complete the exercises. If not, you may need to reach out to your Experience Cloud Administrator to request access.

For tags, you must have permission to Develop, Approve, Publish, Manage Extensions, and Manage Environments. For more information on tag user permissions, see the documentation.
For Adobe Analytics, you must know your tracking server and which report suites you will use to complete this tutorial
For Audience Manager, you must know your Audience Manager Subdomain (also known as the “Partner Name” “Partner ID,” or “Partner Subdomain”)

Also, it is assumed that you are familiar with front-end development languages like HTML and JavaScript. You do not need to be an expert in these languages to complete the lessons, but you will get more out of them if you can comfortably read and understand code.

About tags

The tags feature of Adobe Experience Platform is the next generation of website tag and mobile SDK management capabilities from Adobe. Tags gives customers a simple way to deploy and manage all of the analytics, marketing, and advertising solutions necessary to power relevant customer experiences. There is no additional charge for Tags. It is available for any Adobe Experience Cloud customer.

Tags for websites allows you to centrally manage all of the JavaScript related to analytics, marketing, and advertising solutions used on your desktop and mobile sites. For example, if you deploy Adobe Analytics, tags will manage the AppMeasurement JavaScript library, populate variables, and fire requests.

The content of your container is minified, including your custom code. Everything is modular. If you don’t need an item, it is not included in your library. The result is an implementation that is fast and compact.

Tags is also a platform that allows third-party vendors to create extensions to make it easy to deploy their solutions through tags. An extension is a package of code (JavaScript, HTML, and CSS) that extends the tags interface and client functionality. You can think of tags as an operating system, and extensions are the apps you use to achieve your tasks.

About the Lessons

In these lessons, you will implement the Adobe Experience Cloud into a fake retail website called Luma. The Luma site has a rich data layer and functionality that will allow you to build a realistic implementation. You will build your own tag property, in your own Experience Cloud organization, and map it to our hosted Luma site using the Experience Cloud Debugger.

Get the Tools

Because you will be using some browser-specific extensions, we recommend completing the tutorial using the Chrome Web Browser
Add the Adobe Experience Platform Debugger extension to your Chrome browser

Copy the sample html page code

accordion

Sample html page code

code language-html

<!doctype html>
<html lang="en">
<head>
    <title>Tags: Sample HTML Page</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-->
    <!--Tags Header Embed Code: REPLACE THE NEXT LINE WITH THE EMBED CODE FROM YOUR OWN DEVELOPMENT ENVIRONMENT-->
    <script src="//assets.adobedtm.com/launch-EN93497c30fdf0424eb678d5f4ffac66dc.min.js" async></script>
    <!--/Tags Header Embed Code-->
</head>
<body>
    <h1>Tags: Sample HTML Page</h1>
    <p>This is a very simple page to demonstrate basic implementation concepts of Tags</p>
    <p>See <a href="https://docs.adobe.com/content/help/en/experience-cloud/implementing-in-websites-with-launch/index.html">Implementing the Experience Cloud in Websites with Tags</a> for the complete tutorial</p>
</body>
</html>

Get a text editor in which you can make changes to the sample html page. (If you don’t have one, we recommend trying Brackets)
Bookmark the Luma site

NOTE

You might find it easier to complete this tutorial with the Luma site open in Chrome, while you read this tutorial and complete the Data Collection interface steps in a different browser.

Let’s get started!

Next “Create a tag property” >

recommendation-more-help

45774420-d03e-4a6b-94b5-cd639ae825b2