Overview

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:

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:

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.

Luma website

Get the Tools

  1. Because you will be using some browser-specific extensions, we recommend completing the tutorial using the Chrome Web Browser
  2. Add the Adobe Experience Cloud Debugger extension to your Chrome browser
  3. Download the sample html page (right-click on this link and click “Save Link As”)
  4. 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)
  5. 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” >

On this page