@bbcd0/analytics
v1.2.2
Published
This package shared analytics utils to be used in all projects across bbcd0.
Readme
@bbcd0/analytics
Shared analytics utilities for bbcd0 projects. Built on top of RudderStack Analytics.
Installation
npm install @bbcd0/analyticsRequirements
- React >= 19.2.0
- React DOM >= 19.2.0
Usage
1. Next.js Connection Script
If you are using Next.js, add the following script to your app's root layout using the Script component from next/script:
import Script from "next/script";
<Script id="bufferEvents" strategy="beforeInteractive">
{`
(function() {
"use strict";
window.RudderSnippetVersion = "3.2.0";
var identifier = "analytics";
if (!window[identifier]) {
window[identifier] = [];
}
var rudderanalytics = window[identifier];
if (Array.isArray(rudderanalytics)) {
if (rudderanalytics.snippetExecuted === true && window.console && console.error) {
console.error("RudderStack JavaScript SDK snippet included more than once.");
} else {
rudderanalytics.snippetExecuted = true;
window.rudderAnalyticsBuildType = "legacy";
var sdkBaseUrl = "https://cdn.rudderlabs.com";
var sdkVersion = "v3";
var sdkFileName = "rsa.min.js";
var scriptLoadingMode = "async";
var methods = [ "setDefaultInstanceKey", "load", "ready", "page", "track", "identify", "alias", "group", "reset", "setAnonymousId", "startSession", "endSession", "consent", "addCustomIntegration" ];
for (var i = 0; i < methods.length; i++) {
var method = methods[i];
rudderanalytics[method] = function(methodName) {
return function() {
if (Array.isArray(window[identifier])) {
rudderanalytics.push([ methodName ].concat(Array.prototype.slice.call(arguments)));
} else {
var _methodName;
(_methodName = window[identifier][methodName]) === null || _methodName === undefined || _methodName.apply(window[identifier], arguments);
}
};
}(method);
}
}
}
})();
`}
</Script>;2. Vite Connection Script
If you are using Vite, add the following script to your index.html file inside the <head> tag:
<script>
(function () {
"use strict";
window.RudderSnippetVersion = "3.2.0";
var identifier = "analytics";
if (!window[identifier]) {
window[identifier] = [];
}
var rudderanalytics = window[identifier];
if (Array.isArray(rudderanalytics)) {
if (rudderanalytics.snippetExecuted === true && window.console && console.error) {
console.error("RudderStack JavaScript SDK snippet included more than once.");
} else {
rudderanalytics.snippetExecuted = true;
window.rudderAnalyticsBuildType = "legacy";
var sdkBaseUrl = "https://cdn.rudderlabs.com";
var sdkVersion = "v3";
var sdkFileName = "rsa.min.js";
var scriptLoadingMode = "async";
var methods = [
"setDefaultInstanceKey",
"load",
"ready",
"page",
"track",
"identify",
"alias",
"group",
"reset",
"setAnonymousId",
"startSession",
"endSession",
"consent",
"addCustomIntegration",
];
for (var i = 0; i < methods.length; i++) {
var method = methods[i];
rudderanalytics[method] = (function (methodName) {
return function () {
if (Array.isArray(window[identifier])) {
rudderanalytics.push([methodName].concat(Array.prototype.slice.call(arguments)));
} else {
var _methodName;
(_methodName = window[identifier][methodName]) === null ||
_methodName === undefined ||
_methodName.apply(window[identifier], arguments);
}
};
})(method);
}
}
}
})();
</script>3. Wrap your app with AnalyticsContext
Provide your RudderStack credentials:
import { AnalyticsContext } from "@bbcd0/analytics";
export default function App() {
return (
<AnalyticsContext
value={{
writeKey: "YOUR_WRITE_KEY",
dataPlaneUrl: "YOUR_DATA_PLANE_URL",
source: {
id: "YOUR_SOURCE_ID",
name: "YOUR_SOURCE_NAME",
workspaceId: "YOUR_WORKSPACE_ID",
},
}}
>
<YourApp />
</AnalyticsContext>
);
}4. Use the useAnalytics hook
import { useAnalytics } from "@bbcd0/analytics";
function MyComponent() {
const analytics = useAnalytics();
const handleClick = () => {
analytics?.track("Button Clicked", {
buttonId: "my-button",
});
};
return <button onClick={handleClick}>Click me</button>;
}Configuration
| Prop | Type | Required | Description |
| -------------------------- | --------- | -------- | ----------------------------------------------------------------------------------------- |
| value | object | Yes | Object containing all configuration options |
| value.writeKey | string | Yes | Your RudderStack write key |
| value.dataPlaneUrl | string | Yes | Your RudderStack data plane URL |
| value.source | object | Yes | Source configuration object |
| value.source.id | string | Yes | RudderStack source ID |
| value.source.name | string | Yes | RudderStack source name |
| value.source.workspaceId | string | Yes | RudderStack workspace ID |
| value.enabled | boolean | No | Explicitly enable/disable analytics. Defaults to true in production, false otherwise. |
Development vs Production
Analytics are automatically disabled in non-production environments. To override this:
<AnalyticsContext
value={{
writeKey: "YOUR_WRITE_KEY",
dataPlaneUrl: "YOUR_DATA_PLANE_URL",
source: {
id: "YOUR_SOURCE_ID",
name: "YOUR_SOURCE_NAME",
workspaceId: "YOUR_WORKSPACE_ID",
},
enabled: true, // Force enable in development
}}
>
<YourApp />
</AnalyticsContext>