diff --git a/core-web/libs/sdk/analytics/.babelrc b/core-web/libs/sdk/analytics/.babelrc
new file mode 100644
index 000000000000..f7b3a9bece5a
--- /dev/null
+++ b/core-web/libs/sdk/analytics/.babelrc
@@ -0,0 +1,12 @@
+{
+ "presets": [
+ [
+ "@nx/react/babel",
+ {
+ "runtime": "automatic",
+ "useBuiltIns": "usage"
+ }
+ ]
+ ],
+ "plugins": []
+}
diff --git a/core-web/libs/sdk/analytics/.eslintrc.json b/core-web/libs/sdk/analytics/.eslintrc.json
index 4cfe38bd218c..ef536cdfaf37 100644
--- a/core-web/libs/sdk/analytics/.eslintrc.json
+++ b/core-web/libs/sdk/analytics/.eslintrc.json
@@ -13,13 +13,6 @@
{
"files": ["*.js", "*.jsx"],
"rules": {}
- },
- {
- "files": ["*.json"],
- "parser": "jsonc-eslint-parser",
- "rules": {
- "@nx/dependency-checks": "error"
- }
}
]
}
diff --git a/core-web/libs/sdk/analytics/.swcrc b/core-web/libs/sdk/analytics/.swcrc
deleted file mode 100644
index f416bd669484..000000000000
--- a/core-web/libs/sdk/analytics/.swcrc
+++ /dev/null
@@ -1,29 +0,0 @@
-{
- "jsc": {
- "target": "es2017",
- "parser": {
- "syntax": "typescript",
- "decorators": true,
- "dynamicImport": true
- },
- "transform": {
- "decoratorMetadata": true,
- "legacyDecorator": true
- },
- "keepClassNames": true,
- "externalHelpers": true,
- "loose": true
- },
- "module": {
- "type": "es6"
- },
- "sourceMaps": true,
- "exclude": [
- "jest.config.ts",
- ".*\\.spec.tsx?$",
- ".*\\.test.tsx?$",
- "./src/jest-setup.ts$",
- "./**/jest-setup.ts$",
- ".*.js$"
- ]
-}
\ No newline at end of file
diff --git a/core-web/libs/sdk/analytics/README.md b/core-web/libs/sdk/analytics/README.md
index 5338b9d2af67..d62334579aec 100644
--- a/core-web/libs/sdk/analytics/README.md
+++ b/core-web/libs/sdk/analytics/README.md
@@ -1,39 +1,115 @@
# @dotcms/analytics
-`@dotcms/analytics` is the official dotCMS JavaScript library for Content Analytics that helps track events and analytics in your webapps. Currently available as an IIFE (Immediately Invoked Function Expression) module for direct browser usage.
+`@dotcms/analytics` is the official dotCMS JavaScript library for Content Analytics that helps track events and analytics in your webapps. Available for both browser and React applications.
## Features
- **Simple Browser Integration**: Easy to implement via script tags using IIFE implementation
+- **React Support**: Built-in React components and hooks for seamless integration
- **Event Tracking**: Simple API to track custom events with additional properties
- **Automatic PageView**: Option to automatically track page views
- **Debug Mode**: Optional debug logging for development
## Installation
-Include the script in your HTML page:
+```bash
+npm install @dotcms/analytics
+```
+
+Or include the script in your HTML page:
```html
-
+
```
-## Configuration
+## React Integration
-The script can be configured using data attributes:
+### Provider Setup
+
+First, import the provider:
+
+```tsx
+import { DotContentAnalyticsProvider } from '@dotcms/analytics/react';
+```
+
+Wrap your application with the `DotContentAnalyticsProvider`:
+
+```tsx
+// Example configuration
+const analyticsConfig = {
+ apiKey: 'your-api-key-from-dotcms-analytics-app',
+ server: 'https://your-dotcms-instance.com',
+ debug: false // Not required
+};
+
+function App() {
+ return (
+
+
+
+ );
+}
+```
+
+### Tracking Custom Events
+
+Use the `useContentAnalytics` hook to track custom events:
+
+```tsx
+import { useContentAnalytics } from '@dotcms/analytics/react';
+
+function Activity({ title, urlTitle }) {
+ const { track } = useContentAnalytics();
+
+ // First parameter: custom event name to identify the action
+ // Second parameter: object with properties you want to track
+
+ return ;
+}
+```
+
+### Manual Page View Tracking
+
+To manually track page views, first disable automatic tracking in your config:
+
+```tsx
+const analyticsConfig = {
+ apiKey: 'your-api-key-from-dotcms-analytics-app',
+ server: 'https://your-dotcms-instance.com',
+ autoPageView: false // Disable automatic tracking
+};
+```
+
+Then use the `useContentAnalytics` hook in your layout component:
+
+```tsx
+import { useContentAnalytics } from '@dotcms/analytics/react';
-- **data-analytics-server**: URL of the server where events will be sent. If not provided, it defaults to the current location (window.location.href).
-- **data-analytics-debug**: Presence of this attribute enables debug logging (no value needed)
-- **data-analytics-auto-page-view**: Presence of this attribute enables automatic page view tracking (no value needed)
-- **data-analytics-key**: Required. API key for authentication with the analytics server. This key is provided by the DotCMS Analytics app.
+function Layout({ children }) {
+ const { pageView } = useContentAnalytics();
-## Usage
+ useEffect(() => {
+ pageView({
+ // Add any custom properties you want to track
+ myCustomValue: '2'
+ });
+ }, []);
-### Automatic PageView Tracking
+ return
{children}
;
+}
+```
+
+## Browser Configuration
+
+The script can be configured using data attributes:
-When `data-analytics-auto-page-view` is enabled, the library will automatically send a page view event to dotCMS when the page loads. If this attribute is not present, you'll need to manually track page views and other events using the tracking API.
+- **data-analytics-server**: URL of the server where events will be sent. If not provided, the current domain will be used
+- **data-analytics-debug**: Enables debug logging
+- **data-analytics-auto-page-view**: Recommended for IIFE implementation. Enables automatic page view tracking
+- **data-analytics-key**: **(Required)** API key for authentication
```html
-
+