{"id":26611001,"url":"https://github.com/jordanrobo/xp-datalayer-manager","last_synced_at":"2025-03-24T02:24:52.331Z","repository":{"id":284056327,"uuid":"952833131","full_name":"JordanRobo/xp-datalayer-manager","owner":"JordanRobo","description":"A multi-framework utility package for managing XP Data Layer events, with built-in support for React, Svelte, and Angular.","archived":false,"fork":false,"pushed_at":"2025-03-23T22:14:27.000Z","size":20,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T23:23:16.491Z","etag":null,"topics":["adobe","analytics","angular","data-layer","react","svelte"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JordanRobo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-22T01:06:37.000Z","updated_at":"2025-03-23T22:14:30.000Z","dependencies_parsed_at":"2025-03-23T23:23:20.524Z","dependency_job_id":"df7333ac-36ad-4016-9b93-fe77868c0766","html_url":"https://github.com/JordanRobo/xp-datalayer-manager","commit_stats":null,"previous_names":["jordanrobo/xp-datalayer-manager"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JordanRobo%2Fxp-datalayer-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JordanRobo%2Fxp-datalayer-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JordanRobo%2Fxp-datalayer-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JordanRobo%2Fxp-datalayer-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JordanRobo","download_url":"https://codeload.github.com/JordanRobo/xp-datalayer-manager/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245196901,"owners_count":20576104,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adobe","analytics","angular","data-layer","react","svelte"],"created_at":"2025-03-24T02:24:50.150Z","updated_at":"2025-03-24T02:24:52.310Z","avatar_url":"https://github.com/JordanRobo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# XP Data Layer Manager\n\nA multi-framework utility package for managing XP Data Layer events, with built-in support for React, Svelte, and Angular.\n\n## Features\n\n- Framework-specific implementations for React, Svelte, and Angular\n- Vanilla JavaScript support for any other framework\n- Simple, intuitive API with predefined methods for common tracking needs\n- Smart event nullification to maintain clean state between events\n- TypeScript support with full type definitions\n- Configurable site information\n\n## Installation\n\nUsing Bun:\n\n```bash\nbun add xp-datalayer-manager\n```\n\nUsing npm:\n\n```bash\nnpm install xp-datalayer-manager\n```\n\nUsing yarn:\n\n```bash\nyarn add xp-datalayer-manager\n```\n\n## Basic Setup\n\nInclude the Adobe Data Layer script in your HTML:\n\n\u003e For further instructions on this implementation visit [adobe-client-data-layer](https://github.com/adobe/adobe-client-data-layer)\n\n```html\n\u003cscript src=\"adobe-client-data-layer.min.js\" async defer\u003e\u003c/script\u003e\n```\n\nThen initialize the data layer in your application:\n\n```javascript\nimport { initializeDataLayer } from 'xp-datalayer-manager';\n\n// Initialize with custom site information\ninitializeDataLayer({\n  siteInfo: {\n    name: \"my-site\",\n    experience: \"desktop\",\n    currency: \"USD\",\n    division: \"myCompany\",\n    domain: window.location.host,\n    env: \"prod\",\n    version: \"2.0.0\"\n  }\n});\n```\n\n## Framework-Specific Usage\n\n### React\n\n```jsx\n// Import from the React-specific entry point\nimport {\n  initializeDataLayer,\n  useHomeView,\n  useProductView,\n  useEventTracker\n} from 'xp-datalayer-manager/react';\n\n// Initialize\ninitializeDataLayer();\n\n// Home Page Component\nfunction HomePage() {\n  // Track home page view with a hook\n  useHomeView();\n\n  return \u003ch1\u003eHome Page\u003c/h1\u003e;\n}\n\n// Product Page Component\nfunction ProductPage({ product }) {\n  // Track product view when product changes\n  useProductView(product, {}, [product.id]);\n\n  // Track event handler\n  const trackAddToCart = useEventTracker(\n    (product, quantity = 1) =\u003e DLManager.addToCart(product, quantity)\n  );\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{product.name}\u003c/h1\u003e\n      \u003cbutton onClick={() =\u003e trackAddToCart(product)}\u003e\n        Add to Cart\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Svelte\n\n```html\n\u003cscript\u003e\n  import {\n    initializeDataLayer,\n    SvelteDLManager,\n    trackClick,\n    trackPageView\n  } from 'xp-datalayer-manager/svelte';\n\n  import { onMount } from 'svelte';\n\n  onMount(() =\u003e {\n    initializeDataLayer();\n  });\n\n  const product = { id: '123', name: 'Example Product', price: 99.99 };\n\u003c/script\u003e\n\n\u003c!-- Track page view with action directive --\u003e\n\u003cdiv use:trackPageView={{ type: 'product', action: 'detail-view' }}\u003e\n  \u003ch1\u003e{product.name}\u003c/h1\u003e\n\n  \u003c!-- Track click with action directive --\u003e\n  \u003cbutton use:trackClick={() =\u003e SvelteDLManager.addToCart(product)}\u003e\n    Add to Cart\n  \u003c/button\u003e\n\u003c/div\u003e\n\n\u003c!-- Or trigger tracking manually --\u003e\n{SvelteDLManager.productView(product)}\n```\n\n### Angular\n\n```typescript\n// app.module.ts\nimport { NgModule } from '@angular/core';\nimport { DLManagerModule } from 'xp-datalayer-manager/angular';\n\n@NgModule({\n  imports: [\n    DLManagerModule\n  ]\n})\nexport class AppModule { }\n\n// app.component.ts\nimport { Component, OnInit } from '@angular/core';\nimport {\n  DLManagerService,\n  initializeDataLayer\n} from 'xp-datalayer-manager/angular';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003c!-- Track with directive --\u003e\n    \u003cdiv trackView=\"home\"\u003e\n      \u003ch1\u003eHome Page\u003c/h1\u003e\n    \u003c/div\u003e\n\n    \u003c!-- Track product with directive --\u003e\n    \u003cdiv *ngIf=\"product\" [trackProduct]=\"product\"\u003e\n      \u003ch1\u003e{{ product.name }}\u003c/h1\u003e\n      \u003cbutton (click)=\"addToCart()\"\u003eAdd to Cart\u003c/button\u003e\n    \u003c/div\u003e\n  `\n})\nexport class AppComponent implements OnInit {\n  product = { id: '123', name: 'Example Product', price: 99.99 };\n\n  constructor(private dlManager: DLManagerService) {}\n\n  ngOnInit() {\n    initializeDataLayer();\n  }\n\n  addToCart() {\n    this.dlManager.manager.addToCart(this.product);\n  }\n}\n```\n\n### Vanilla JavaScript\n\n```javascript\nimport { initializeDataLayer, DLManager } from 'xp-datalayer-manager';\n\n// Initialize\ninitializeDataLayer();\n\n// Track home page\nDLManager.homeView();\n\n// Track product view\nDLManager.productView({\n  id: '123',\n  name: 'Example Product',\n  price: 99.99\n});\n\n// Add event listeners\ndocument.querySelector('#add-to-cart').addEventListener('click', () =\u003e {\n  DLManager.addToCart({\n    id: '123',\n    name: 'Example Product',\n    price: 99.99\n  });\n});\n```\n\n## API Reference\n\n### Core Methods\n\n- `initializeDataLayer(options?)`: Initialize the data layer\n- `pushDataLayerEvent(eventName, eventData?)`: Push an event manually\n- `resetFirstEventFlag()`: Reset the first event flag\n- `getDataLayerManager()`: Get the manager instance\n- `cleanValue(value)`: Utility to format strings for the data layer\n\n### DLManager Methods\n\n- `DLManager.homeView(customData?)`: Track home page view\n- `DLManager.productListingView(listName?, customData?)`: Track product listing view\n- `DLManager.productView(productData, customData?)`: Track product detail view\n- `DLManager.addToCart(productData, quantity?, customData?)`: Track add to cart\n- `DLManager.checkoutStep(step, option?, customData?)`: Track checkout step\n- `DLManager.userLogin(method, customData?)`: Track user login\n- `DLManager.pageView(pageType, action?, customData?)`: Track generic page view\n- `DLManager.formSubmit(formName, formData?, customData?)`: Track form submission\n- `DLManager.search(searchTerm, resultsCount, customData?)`: Track search\n- `DLManager.custom(eventName, eventData?)`: Track custom event\n\n### React Hooks\n\n- `useHomeView(customData?, dependencies?)`: Track home page view\n- `useProductListingView(listName?, customData?, dependencies?)`: Track product listing\n- `useProductView(productData, customData?, dependencies?)`: Track product view\n- `usePageView(pageType, action?, customData?, dependencies?)`: Track generic page view\n- `useEventTracker(trackingFunction)`: Create a tracking event handler\n\n### Svelte Utilities\n\n- `SvelteDLManager.*`: Same methods as DLManager with Svelte integration\n- `trackClick(callback)`: Svelte action for tracking clicks\n- `trackPageView(params)`: Svelte action for tracking page views\n- `trackFormSubmit(params)`: Svelte action for tracking form submissions\n- `dataLayerEvents`: Svelte store with event history\n- `currentPage`: Svelte store with current page info\n- `currentProduct`: Svelte store with current product info\n\n### Angular Utilities\n\n- `DLManagerService`: Angular service for tracking\n- `TrackViewDirective`: Angular directive for tracking page views (`trackView`)\n- `TrackProductDirective`: Angular directive for tracking product views (`trackProduct`)\n- `TrackEventDirective`: Angular directive for tracking events (`trackEvent`)\n\n## Development\n\n### Prerequisites\n\n- [Bun](https://bun.sh/) installed on your machine\n\n### Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/JordanRobo/xp-datalayer-manager.git\ncd xp-datalayer-manager\n\n# Install dependencies\nbun install\n\n# Run tests\nbun test\n\n# Build the package\nbun run build\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjordanrobo%2Fxp-datalayer-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjordanrobo%2Fxp-datalayer-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjordanrobo%2Fxp-datalayer-manager/lists"}