Adobe Analytics implementation
using ALLOY.JS (AEP Web SDK) through edge network
Objective: To understand the new JS and implementation technique using launch through edge configuration. We will use the new alloy.js (AEP Web SDK) for this implementation, create the new data stream and XDM event schema, and map variables accordingly.
Story: There was a time where we just stick with s_code.js for our adobe analytics implementation that was our traditional method but all other related features will place on the page separately. After a period, then we have started migrating our implementation to the modern method using a tag management solution. Now is the time to explore our implementation to the next level where we will have more structure and reliability.
Heads Up:
1. Since it is a completely new platform, by the time I finish write this blog. No wonder if adobe has changed the term and enhance some of the existing features.
2. This statement and definition are respectively as per my understanding of this platform and implementation.
3. Please contact your account manager to grant access or to be a partner for this new platform.
4. Explained the concepts in straight forward just by giving the definition, screenshot, and tips.
5. Some of the KEY topics from this implementation will explain in a separate topic.
What is alloy.js?
Alloy.js is the library and code name of AEP web SDK which is the combination of all the below -mentioned JS. It is not just the combination, besides fixed some challenged concerns like inconsistent tag, order of tag, and tag dependency. Since it is just a wrap of all combined JS, it sends data to all adobe cloud platform (Experience Platform, Adobe Analytics, Audience Manager, and Target) in a single beacon. Alloy.js is purely an open-source library where you do not require TMS tool support to implement. So far, we do not have any clear-cut idea to set up those data steam and edge configurations directly through open source. Therefore, to make our implementation easy and configure the edge set up, it is recommended to use adobe launch. Adobe launch also will make our job easy to map our XDM variables and send the XDM event (curious on XMD, right? Let us see below) to the adobe analytics.
· Visitor.js
· AppMeasurement.js
· AT.js
· DIL.js
This is my simple version of explaining the alloy.js but this is more than what I have stated. All though it is few features, adobe is still exploring and evolving this alloy.js to support all the use cases across the adobe could platform.
Create or configure the exiting schema in the experience platform
A schema is a structural way to define our group of variables and represent the business object. We can consider it as a container where it will store our class and field groups. Ideally, it is the same as SDR, which we follow in our project to maintain and define the variables accordingly. In this experience platform, the schema is another digital level of SDR, and assume that we have just injected our SDR into the experience platform UI. We have created our new schema (XDM ExperienceEvent) as mentioned below and please follow the same to describe your schema.
- Class — A small set of use cases with a collection of different businesses. It differs based upon our specific project or business, which is represented by schema. We have an option to create and define our new class. We have used the existing class “XDM ExperienceEvent” for our implementation.
2. Structure — Describe the structure of the class and filed group we have selected or created newly.
3. Field Group (formerly “MIXIN”) — Groups of fields with adobe standard variables. It is also a collection of several dimensions. We can use the build-in existing file group or create our own. I have just selected few groups like “web details”, “technical detail”, “AEP Web SDK ExperienceEvent Mixin” etc. as shown on the below screenshot.
· It is highly recommended to create the entity model before proceeding with our actual schema creation into the system.
· Request to select the class name based upon your site industry.
· Make sure to add the respective field group on your list to add the path on the XDM object data element.
Create your DATASTREAM (Formerly called “Edge Configuration”)
A DataStream is used to set up the configuration related to adobe cloud platform tools. It can be created in the adobe experience platform launch interface. The same data stream will be used in the edge configuration while we setting up AEP Web SDK extension. Once you have created your new data stream then the system will assign the three environments with specific settings to be configured. Each environment will have a unique ID same as the launch environment. We need to enter the value on the respective field once we have enabled the adobe cloud tool. When you build an Experience Platform Launch library to a dev environment, the launch library automatically uses the dev environment from your data stream configuration.
We also have an option to create our new environment apart from the default provided list. However, make sure to create a new environment in the launch as well to map and build the configuration accordingly.
As shown on the screenshot for adobe analytics, likewise you can enable and enter your respective value for other platforms. Below are the list of platforms currently it is available to configure through data stream.
· Adobe Analytics
· Adobe Audience Manager
· Adobe Experience Platform
· Adobe Target
· Launch Server side
· Third Party ID Sync
In regards to access the data stream option, the datastreams configuration tool is available to customers on the allow list regardless of whether they use Experience Platform Launch as a tag manager. Moreover, users should have Develop permissions in Experience Platform Launch to see the data stream option in the interface.
Setting up the client side configuration in the launch
There are several actions to be taken care of in this section to see the data through edge configuration. Let us create and set it up.
Install and Configure AEP Web SDK
Create “XDM Object” in data element
Create rule and set up “AEP Web SDK — Send Event” action
Publish the workflow accordingly.
Install and Configure AEP Web SDK –
a. Install the “AEP Web SDK” extension from adobe launch and configure it respectively. We can create multiple instances (Main object) for the single page implementation. We can give our custom name for the alloy. IMS Organization ID and Edge Domain detail will pick up automatically based on your organization. The domain will connect and interact with the adobe service for several actions.
b. Edge Configurations — Select the data stream, which we have created for this implementation. Edge configuration will get the adobe cloud set up in detail by data stream and map it accordingly.
c. We have an option to select the privacy and identity service from our side.
d. The personalization section if we have enabled target on our data stream. This will help us to avoid the flicker appear on the page while the target takes place to show the personalized content and earlier we used to add the pre snippet code. Similarly, we can utilize this section on the AEP web SDK extension.
e. Data collection — This will help us to track the download links automatically for the mentioned format. Same as like what it is in Appmeasurement.js (s.linkDownloadFileTypes).
f. Request to select only the data stream from the edge configuration in this extension and the rest of the field and section remains the same as long as you are not performing any new action.
Create “XDM Object” in data element
We can see three different data element types on the AEP Web SDK extension under the data element.
→ Event Merge ID, Identify Map, and XDB Object
a. We are going to use XDM object as a data element type. Once you have selected, then we need to choose the sandbox and schema accordingly. The schema is what we have created earlier.
b. XDM Object — Even though if you have not clear on the schema part earlier, that is fine. Now you will be getting a clear picture once you saw the XDM object structure. XDM object will list out the field group and class we selected on the schema part.
c. Auto-populated Field ( little star icon) — The attributes of this field will be auto-populated when this data element is provided as the XDM object for a “Send Event” action if the “Place Context” context is configured. If we provide a data element here manually, it will overwrite the auto-populated value.
d. So on the XDM object; we can start assigning our value manually or from the data element. As stated earlier, since we are adding the value- form another data elements then the auto-populate value will get an override.
e. Here we have also assigned a couple of the page values (page URL and Page title) into the prop variable as part of the custom dimension. Used “prop2” — page URL and “prop28” –page title. Both this page URL and title value will come from other data elements.f. We also have other data type values like string and Boolean as well on the XDM object.
g. We have mapped “webPageDetails” object and its respective data type in our implementation.
h. Finally, once we have done with all the setup on the data element, make sure to save it.
Create rule and set up “AEP Web SDK — Send Event” action
a. Here is the time to fire our SDK event as same as what we do on the adobe analytics action. Just to recall, we will select the adobe analytics from the action and select the action type, so in set variables, all our created data elements mapped accordingly.
b. On the instance field, the list of instances you have created on the extension will show here on this dropdown.
c. XDM data — Select the data element we have created (XDM First Data Element) and entered our value on a few of the objects.
d. Merge ID and Dataset ID — It does not have any dependency on this implementation. Therefore, we may look into this topic later.
e. documentUnloading — This option will make sure to send the event to the server even though the user is navigating from the current page but the server will still ignore the response. renderDecisions — This is to avoid the flicker if we have select this option. Then SDK will take responsibility to get the personalization and pre-hide the content to prevent flicker.
f. Once all the fields are entered and selected the relevant value, makes sure to save it.
(I hope you might be wondering where is send beacon and clear variable, so this is the one change from the alloy.js)
Publish the workflow accordingly
a. The publish workflow does not have any change in the process. Same as what we follow to add our resource to the respective environment.
b. As said earlier, when we build an Experience Platform Launch library to a dev environment, the launch library automatically uses the dev environment from our data stream configuration.
Debug our implementation for AEP Web SDK
1. Let us take our ancient method itself to debug the edge call, so just go to the network tab from the inspect element and search for the “edge” keyword.
a. We can see some of the XDM objects being fired with their respective value from the XDM object on this network call.
b. URL and name of the page are being fired from “webPageDetails” object.
c. Device, Browser, and Implementation Details are atomically getting value into the SDK event.
d. Remember, we have assigned page value to prop 2 and 28. Refer to the screenshot below where the event fired with value fetched from the data element. This will just pass the value to the edge server and not to the analytics data collection.
2. We can also debug in another way just by toggling the below three commands on the browser console. By default, it is turned off and you have to enable it just by toggling the below command.
a. Configure command (for all the users)
alloy(“configure”, {
“edgeConfigId”: “ebebf826-a01f-4458–8cec-ef61de241c93”,
“orgId”:”ADB3LETTERSANDNUMBERS@AdobeOrg”,
“debugEnabled”: tru
});
b. Debug command (only for the implemented user)
alloy(“setDebug”, {
“enabled”: true
});
c. Query string parameter
http://localhost:4503/content/we-retail/us/en/about-us.html?alloy_debug=true
Note — We can also use “Adobe Analytics Experience Platform Debugger” extension to see the XDM event call for the debugging purpose.
Getting data to adobe analytics for AEP Web SDK
The above approach is just to see the data coming from XDM object and XDM event. Nevertheless, it will not store any data to adobe analytics until if we say openly to analytics via processing rule method. Since all these elements are, consider as a context variables that will not read by analytics. Therefore, the processing rule will help us here to overwrite and store the respective XDM object.
a. Go to the processing rule section of the respective report suite and create a rule to overwrite and store the XDM object value.
b. Make sure you have your prop path handy from the schema. Refer to the screenshot for reference to pick the prop path. Ideally, it should be “_experience.analytics.customDimensions.props.prop28” as per the schema structure.
c. Select the related prop from the “overwrite value of” and enter the path for the prop with a prefix of “a.x.” Therefore, as per my understanding then the adobe analytics will not considered as context variable and pick the value from XDM object.
d. Save your processing rule once you have done your overwrite rule.
Measuring the actual data using the real-time reports from adobe analytics is quite a long process. Instead, load your few pages from your site and check the report directly in the adobe analytics workspace after some time. Please check the below report where I have loaded a few of my pages to see the prop2 and prop28 custom dimension values.
Adobe also planning to have a separate interface for the processing rule. We should be thankful to adobe for having and considering it as a separate interface to make our job easy.
Obviously, there are lot more to come from ADOBE!!!
************************Happy Exploring************************