Build the sample application to mimic login activity
- Topics:
- Profiles
CREATED FOR:
- Beginner
- User
This sample application, built and deployed on a Node.js server, demonstrates how to send a CRM ID to Adobe Experience Platform (AEP) when a user logs in. The application simulates a login flow where user credentials are validated on the server side. Upon successful login, the user’s CRM ID is retrieved and pushed to the adobeDataLayer, triggering a corresponding rule in Adobe Experience Platform Tags (formerly Adobe Launch).
The attachLoginHandler function attaches a submit event listener to a login form. On form submission, it prevents the default action, validates the credentials against a predefined user’s object, and retrieves the CRM ID if valid. The function pushes a userloggedin event with the CRM ID and authentication state to the adobeDataLayer, and Adobe Experience Platform Tags picks it up to send the data to Adobe Experience Platform (AEP).
function attachLoginHandler() {
const form = document.getElementById("loginForm");
if (!form) return;
form.addEventListener("submit", function(e) {
e.preventDefault();
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
if (users[username] && users[username].password === password) {
const crmid = users[username].crmid;
window.adobeDataLayer = window.adobeDataLayer || [];
debugger;
window.adobeDataLayer.push({
event: "userloggedin",
user: {
crmid: crmid,
authenticatedState: "authenticated"
}
});
}
});
}
The Adobe Experience Platform tags script is included in the HTML page’s <head>
Section using a <script>
tag, typically like this:
<script src="https://assets.adobedtm.com/b5eu4857867/4e4d84957/launch-b69e276bb9b5-development.min.js" async crossorigin="anonymous"></script>
The AEP Tags script was obtained by publishing a Web SDK-enabled property created in the earlier step and copying the embed code from the Environments tab.