Expand my Community achievements bar.

Implementing Adobe Client Data Layer through Adobe Launch

Avatar

Employee Advisor

9/5/22

I often hear from customers saying that, "data layer does not load properly because of which I am losing out some data", "dataLayer is making my website heavy", "a lot of development efforts required to implement data layer"

Well, What If I tell you that, you can create your data layer and implement on your website through Adobe Launch, no need to separately deploy it in the website source code. Adobe Client Data Layer extension in Adobe Launch helps for doing the same

Introduction: This Extension provides Event, Action, and Data Element Types needed to leverage the Adobe Client Data Layer on your site. It should be used to consume data from the ACDL, and use that data for Analytics, Target, segmentation, and other marketing purposes.

Prerequisites:

Admin access to Adobe Launch

Website on which you want to implement it

Implementation Steps:

  1. Create a web property in Adobe Launch
  2. Install Adobe Client Data Layer extension.

VaniBhemarasetty_0-1662377555066.png

3. Click on configure, although you do not have to make any changes

VaniBhemarasetty_1-1662377612736.png

 

At this point, you can just build a library and publish it in the dev environment.

As you can see in the below screenshot, when I type adobeDataLayer in the console, I could see adobeDataLayer created. This is an indication that the extension has created the adobeDataLayer, however, there is no data in it

VaniBhemarasetty_2-1662377927759.png

4. Create a rule to push the data into the data layer

VaniBhemarasetty_0-1662378085173.png

5. Under Actions, select the extension as "Adobe Client Data Layer" and select Action type as "Push to Data Layer

VaniBhemarasetty_1-1662378201734.png

6. Click on "Open JSON Editor" on the same screen.

You would need to define the variables that you want to ingest into the data layer. As shown in the below screenshot

VaniBhemarasetty_2-1662378288973.png

The best part is, that I can use the already defined data elements and use them here. You would need to call the data elements within "%%".

For testing purposes, I have defined a small array and ingested the variables into it. You can create an "n" number of arrays with an "m" number of variables in each of them.

For instance, I can create another rule to ingest the data layer on the product pages and ingest that into the data layer on that specific pages

Validation:

In order to test my implementation, I am using Adobe Experience Platform Debugger and test it. I am using my favorite website https://luma.enablementadobe.com/

I could see the rule created in step 4 has fired

VaniBhemarasetty_3-1662378706964.png

Now I would like to check whether all the variables that are defined in the JSON are coming up or not 

I could see the variables that are defined in the JSON are coming up under the 0th index under "Page"

VaniBhemarasetty_4-1662378784366.png

 

This indicates that the adobeDataLayer has got updated with the data.

 

I can now use this data layer and send the data to adobe solutions. For instance, I can use this and implement AEP Web SDK and send the data to edge and from there to Adobe solutions or non-adobe solutions

 

This extension has helped me to build my own data Layer based on my requirements and I no longer have to depend on web developers, and production cycles for the data Layer to get updates.

 

These are the simple implementation steps to follow to experiment with this extension. 

Hope this helps if you are trying to start with this extension and implement data layers

 

Happy Learning!

Vani

 

 

 

 

 

 

 

 

 

 

8 Comments

Avatar

1/10/23

Hi Vani, great read! I just have an elementary question. Isn't data layer mainly for extracting data from web page to be sent to adobe servers? In this case, since we already have the reference to the data with us apparently in Tags only, what purpose would it serve to create a data layer and then possibly again extract that data?
Some of the detail related to orders or product purchase or users is usually available via API only I think to developers, so in any case we wont be having that data before hand to create a good data layer.

Avatar

Level 6

3/6/24

How to traverse the value like in data layer we can see value in the console by "adobe.page_detail.pagename"

Avatar

Level 1

5/15/24

Hi @VaniBhemarasetty 

How can I pass a product array (I have created a data element for a product that captures all product details inside cart) to the same Push to Data Layer Action item. I used this but it didn't work 
"cart": {
"id": "1234",
"price": "%cartPrice%",
"items": "%cartProduct%"
}

 

as items returning 
items: "[object Object],[object Object]" in my datalayer.

Avatar

Level 1

7/15/24

Hi @VaniBhemarasetty , Can you provide some insight on how I can push data to the ACDL from the frontend? My existing W3C data layer is broken and missing crucial information, so I want to implement a patch fix using the ACDL. I plan to capture the information from the frontend and push it to the ACDL.


Steps I followed :

1.Created a data element using custom code for the click event.

2.Implemented a rule in Events using the ACDL extension to push the data.

KenKevin112_0-1721030247225.png

3.In Actions, add the condition for pushing ACDL to the data layer and map the created data element.

KenKevin112_1-1721030392730.png

Data is still not being pushed to the dataLayer, or I might be implementing it incorrectly. Please guide me if I am making any mistakes in the steps.

 

 

Avatar

Adobe Champion

9/19/24

Hi @KenKevin112 ,

 

Have you registered a event listener for your click event before binding it with rule in ACDL?

 

Avatar

Level 1

9/26/24

Hi @igupta, sorry for the delay responses.

 

I attempted several methods to register the listener, but none were successful. Due to time constraints, we opted for custom scripting.

That said, I'm happy to collaborate and learn how we can make it work.


Thanks.