Documentation AEM AEM Tutorials AEM Sites Tutorials

[Integration]{class="badge positive"}

Create a Tag Property create-tag-property

Last update: Tue May 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Topics:
Integrations

CREATED FOR:

Intermediate
Developer

[AEM Sites as a Cloud Service, AEM Sites 6.5]{class="badge informative"}

Learn how to create a Tag property with the bare-minimum configuration to integrate with Adobe Experience Manager. Users are introduced to the Tag UI and learn about extensions, rules, and publishing workflows.

https://video.tv.adobe.com/v/38553?quality=12&learn=on

Transcript

Hello, in this video, we are going to be creating a new Launch web property with the goal to integrate this with an Adobe Experience Manager Site. Once Launch and AEM are fully integrated, it becomes really easy to deploy solutions like Analytics, Audience Manager, Target, and a lot more. This video series is really just about setting up the integration between AEM and Launch, so this initial Launch web property is going to be relatively simple. All right, let’s get started. When you click into Launch, you’ll see three cards, and I’m going to click into Adobe Experience Platform Launch. This is going to pull up a list of different properties that have been created for my organization. You can see there’s a lot of them. For this tutorial, we’re going to create a new property. So go up to the upper right-hand corner and click new property.

So the first thing is we’ll give it a name. I’m going to connect this to a sample WKND site so I’ll call it WKND site, going to leave the platform as web. Then, we need to pick a domain.

For your implementation, you would choose the domain of your website. I’m just running on AEM as a cloud service so I’m just going to do adobeaemcloud.com.

Then, we can go ahead and click save to create our property.

Now the property has been created, and then we can click into it to get an overview.

The property overview is kind of like a dashboard about the property, shows your recent activity and some information about the property. The web property itself is actually delivered to the page as a JavaScript library, and that you have some options as to how you’re going to host this. By default, it can be managed by Adobe, which uses Akamai edge servers to deliver that JavaScript really quickly, but you have some additional options as to how you’re going to host it.

The other thing I want to point out is that there are different environments set up per property. So we’ve got a development environment, a staging environment, as well as a production environment. The idea here is that you can make modifications to your library and your web property, and then test them out in different environments. So these three environments are created by default. You’re also able to add your own environment.

The publishing flow is how you would move these changes of the web property between these different environments. So you would start in development and move it forward until it’s published into production.

Extensions are one of the most powerful features of Launch. So we can see that, by default, the Core extension is installed and this extension provides some of the baseline functionality needed for Launch to work.

If we click into catalog, now we can see a whole library of extensions available. We’ve got an extension for Adobe Analytics, Audience Manager, and there’s also a number of third-party extensions available. In this video, we’re just going to keep it simple and just use the Core extension. Once an extension is installed, you then would want to create a rule to actually do something with that extension. So with Analytics, that might be capturing a piece of data. In our case, we’re just going to create a very simple rule. So we’ll go to create new rule, and I’m just going to call this Launch loaded. All we’re going to do with this rule is just debug, log a simple debug message to the browser’s console that hey, Launch was loaded successfully.

Then, we have the ability to trigger this rule based on certain events. So under events I’ll go to add, and you can see I’m using the Core extension. So these are all the events that the Core extension makes available for us to trigger against. I’m going to choose library loaded the page top, so basically, this rule is going to get triggered whenever the library is loaded at the top of the page, so go ahead and keep changes. Then, we could add some conditions about when to trigger it, but instead I’m just going to trigger it every time. Then, we’ll go ahead and add an action. Again, I’m using the Core extension, the only action type available is custom code, and I’m just going to add a little bit of JavaScript. So I’ll open up the editor.

Again, we’re just going to log a simple message to the browser’s console.

The message is just going to be hey, Launch library loaded.

Then, we can save our changes.

I’ll keep those changes, and then I’ll save that rule.

So we’ve got our Launch loaded rule. We also have our Core extension. The next thing that we want to do is actually publish this and publish this web property. So we go to publishing flow. You can see under development, I need to add a new library. You can think of a library as a collection of resources. So I’m going to give it a name, Launch loaded, and the only environment I have available is development so we’ll choose that. Then, each library contains a set of resources, and one of the easiest way to grab all of your changes is just click add all changed resources. You can see it’s collected my Launch rule and as well as the Core extension, so those are all going to be included. Then, we can save and build this library for development.

So you can see it’s building the library in the background.

Right now it’s loaded just on the development environment. In order to promote it, we’re going to submit it for approval.

So now it’s in the submitted swimlane, and now we can build it for the staging environment. For this initial run, I’m going to actually push it all the way to production just so that we can see it working in staging and in production. So we’ll approve this library for publishing, and we’ll build and push to production.

So this is going to compile the libraries and make them available on the production endpoint. If we quickly review the environments, you’ll notice that the timestamp of when they were last modified has been updated. If you click the install button, you’ll get a dialogue that gives you some high-level instructions on how to include this Launch web property on your page. As you can see, Launch gets compiled down to a JavaScript file. And this is meant to be embedded in the head tag of your HTML webpage. If you’re just using a static website, you could copy and paste the script tag and insert it directly in the markup of your website. However, since we’re going to be using AEM, there’s actually a more sophisticated way in which we can embed this without ever having to modify our site’s code. One other thing that I want to point out is that the source URL for each of our environments is slightly different, so this is the production JavaScript file.

And if you look at the staging URI, you can see that we’ve got this staging string here just to indicate that this is the library on the staging environment. Right now, all three environments have the same code in the same library, but as we’ll see later, we do have the ability to make a change in preview at first in AEM, in the staging environment, before publishing it into production. Congratulations on creating your first Launch property. In the next video, we are going to connect AEM with the Launch API using the Adobe Developer Console, and this will allow our AEM installation to automatically pull in any of the available Launch properties. -

Tag property creation

To create a Tag property, complete the following steps.

In the browser, navigate to the Adobe Experience Cloud Home page and login using you Adobe ID.
Click the Data Collection application from the Quick access section of the Adobe Experience Cloud Home page.
Click the Tags menu item from the left navigation, then click New Property from top-right corner.
Name your Tag property using the Name required field. For Domains field, enter your domain name or if using AEM as a Cloud Service environment enter adobeaemcloud.com and click Save.

Create a New Rule

Open the newly created Tag property by clicking its name in the Tag Properties view. Also under My Recent Activity heading you should see that the Core extension added to it. The Core tag extension is the default extension and it provides foundational event types such as page-load, browser, form, and other event types, see Core extension overview for more information.

Rules allow you to specify what should happen as the visitor interacts with your AEM site. To keep things simple, let’s log two messages to the browser console to demonstrate how data collection Tag integration can inject JavaScript code into your AEM site without updating AEM Project code.

To create a rule, complete the following steps.

Click Rules from the AUTHORING section of the left navigation and then click Create New Rule
Name your rule using the Name required field.
Click Add from the EVENTS section, then in the Event Configuration form, in the Event Type dropdown select Library Loaded (Page Top) option and click Keep Changes.
Click Add from the ACTIONS section, then in the Action Configuration form, in the Action Type dropdown select Custom Code option and click Open Editor.

In the Edit Code modal, enter following JavaScript code snippet, then click Save, and finally click Keep Changes.

code language-javascript
`console.log('Tags Property loaded, all set for...'); console.log('capabilities such as capturing data, conversion tracking and delivering unique and personalized experiences');`

Click Save to finish the rule creation process.

Add Library and publish it

The Tag property Rules are activated using a library, think of the library as a package containing JavaScript code. Activate the newly created rule by following the steps.

Click Publishing Flow from the PUBLISHING section of the left navigation, then click Add Library
Name your library using the Name field and select Development(development) option for Environment dropdown.
To select all the changed resources since the Tag property creation, click + Add All Changed Resources. This action adds the newly created rule and core extension resource to the library. Finally click Save & Build to Development.
Once the library is built for the Development swim lane, using ellipses select the Submit for Approval
Then in the Submitted swim lane using ellipses select the Approve for Publishing, likewise Build & Publish to Production in the Approved swim lane.

Published library

Above step completes the simple Tag property creation that has a rule to log a message to browser console when the page is loaded. Also the rule and core extension is published by creating a library.

Next Steps

Connect AEM with Tag Property using IMS

Additional Resources additional-resources

Create a Tag Property

recommendation-more-help

bb44cebf-d964-4e3c-b64e-ce882243fe4d