Unified DataLayer

A multi-framework utility package for managing XP Data Layer events, with built-in support for React, Svelte, and Angular (Coming Soon).

Features

• Framework-specific implementations for React, Svelte, and Angular
• Vanilla JavaScript support for any other framework
• Simple, intuitive API with predefined methods for common tracking needs
• Smart event nullification to maintain clean state between events
• TypeScript support with full type definitions
• Configurable site information

Installation

Using Bun:

bun add unified-datalayer

Using npm:

npm install unified-datalayer

Using yarn:

yarn add unified-datalayer

Basic Setup

Include the Adobe Data Layer script in your HTML:

For further instructions on this implementation visit adobe-client-data-layer

<script src="adobe-client-data-layer.min.js" async defer></script>

Then initialize the data layer in your application:

import { DataLayer } from 'unified-datalayer';

// Initialize with required site information
DataLayer.init({
  siteInfo: {
    name: "my-site",
    experience: "desktop",
    currency: "USD",
    division: "myCompany",
    domain: window.location.host,
    env: "prod",
    version: "2.0.0"
  }
});

Framework-Specific Usage

React

// Coming Soon

Svelte

// Coming Soon

Angular

// Coming Soon

Vanilla JavaScript

import { DataLayer } from 'unified-datalayer';

// Define the DataLayer Class (Optional for easier reuse)
const dl = new DataLayer();

// Initialize
dl.init({
  siteInfo: {
    name: "my-site",
    experience: "desktop",
    currency: "USD",
    division: "myCompany",
    domain: window.location.host,
    env: "prod",
    version: "2.0.0"
  }
});

// Track home page
dl.page.home();

// Track product view
dl.pdp.view({
  id: '123',
  name: 'Example Product',
  price: 99.99
});

// Add event listeners
document.querySelector('#add-to-cart').addEventListener('click', () => {
  dl.cart.add({
    id: '123',
    name: 'Example Product',
    price: 99.99
  });
});

API Reference

DataLayer Methods

• DataLayer.home.view(customData?): Track home page view
• DataLayer.plp.view(listName?, customData?): Track product listing view
• DataLayer.pdp.view(productData, customData?): Track product detail view
• DataLayer.cart.add(productData, quantity?, customData?): Track add to cart
• DataLayer.checkout.step1(option?, customData?): Track checkout step
• DataLayer.account.loginStart(customData?): Track user login
• DataLayer.custom(eventName, eventData?): Track custom event

Development

Prerequisites

• Bun installed on your machine

Setup

# Clone the repository
git clone https://github.com/JordanRobo/xp-datalayer-manager.git
cd xp-datalayer-manager

# Install dependencies
bun install

# Run tests
bun test

# Build the package
bun run build

License

MIT