@tell-rs/nextjs 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -5
- package/dist/index.cjs +8 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -5
- package/dist/index.d.ts +5 -5
- package/dist/index.js +8 -5
- package/dist/index.js.map +1 -1
- package/package.json +14 -4
package/README.md
CHANGED
|
@@ -22,17 +22,17 @@ bun add @tell-rs/nextjs @tell-rs/browser
|
|
|
22
22
|
|
|
23
23
|
## Quick Start
|
|
24
24
|
|
|
25
|
-
Add `
|
|
25
|
+
Add `Tell` to your root layout:
|
|
26
26
|
|
|
27
27
|
```tsx
|
|
28
28
|
// app/layout.tsx
|
|
29
|
-
import {
|
|
29
|
+
import { Tell } from "@tell-rs/nextjs";
|
|
30
30
|
|
|
31
31
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
32
32
|
return (
|
|
33
33
|
<html>
|
|
34
34
|
<body>
|
|
35
|
-
<
|
|
35
|
+
<Tell apiKey="your-api-key" />
|
|
36
36
|
{children}
|
|
37
37
|
</body>
|
|
38
38
|
</html>
|
|
@@ -44,7 +44,7 @@ That's it. Page views are tracked automatically on every route change.
|
|
|
44
44
|
|
|
45
45
|
## API
|
|
46
46
|
|
|
47
|
-
### `<
|
|
47
|
+
### `<Tell>`
|
|
48
48
|
|
|
49
49
|
| Prop | Type | Default | Description |
|
|
50
50
|
|------|------|---------|-------------|
|
|
@@ -82,7 +82,7 @@ import { useTrack } from "@tell-rs/react";
|
|
|
82
82
|
|
|
83
83
|
## How It Works
|
|
84
84
|
|
|
85
|
-
`
|
|
85
|
+
`Tell` is a `"use client"` component that:
|
|
86
86
|
|
|
87
87
|
1. Calls `tell.configure()` once on mount
|
|
88
88
|
2. Watches `usePathname()` and `useSearchParams()` from `next/navigation`
|
package/dist/index.cjs
CHANGED
|
@@ -31,7 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
31
31
|
// src/index.tsx
|
|
32
32
|
var index_exports = {};
|
|
33
33
|
__export(index_exports, {
|
|
34
|
-
|
|
34
|
+
Tell: () => Tell,
|
|
35
35
|
tell: () => import_browser2.tell
|
|
36
36
|
});
|
|
37
37
|
module.exports = __toCommonJS(index_exports);
|
|
@@ -39,7 +39,7 @@ var import_react = require("react");
|
|
|
39
39
|
var import_navigation = require("next/navigation");
|
|
40
40
|
var import_browser = __toESM(require("@tell-rs/browser"), 1);
|
|
41
41
|
var import_browser2 = require("@tell-rs/browser");
|
|
42
|
-
function
|
|
42
|
+
function Tell({
|
|
43
43
|
apiKey,
|
|
44
44
|
options,
|
|
45
45
|
trackPageViews = true,
|
|
@@ -49,6 +49,9 @@ function TellAnalytics({
|
|
|
49
49
|
const initialized = (0, import_react.useRef)(false);
|
|
50
50
|
const pathname = (0, import_navigation.usePathname)();
|
|
51
51
|
const searchParams = (0, import_navigation.useSearchParams)();
|
|
52
|
+
const search = searchParams?.toString() ?? "";
|
|
53
|
+
const pageViewPropsRef = (0, import_react.useRef)(pageViewProperties);
|
|
54
|
+
pageViewPropsRef.current = pageViewProperties;
|
|
52
55
|
(0, import_react.useEffect)(() => {
|
|
53
56
|
if (!initialized.current) {
|
|
54
57
|
import_browser.default.configure(apiKey, options);
|
|
@@ -60,13 +63,13 @@ function TellAnalytics({
|
|
|
60
63
|
}, []);
|
|
61
64
|
(0, import_react.useEffect)(() => {
|
|
62
65
|
if (!trackPageViews || !initialized.current) return;
|
|
63
|
-
const url =
|
|
66
|
+
const url = search ? `${pathname}?${search}` : pathname;
|
|
64
67
|
import_browser.default.track("Page Viewed", {
|
|
65
68
|
url,
|
|
66
69
|
path: pathname,
|
|
67
|
-
...
|
|
70
|
+
...pageViewPropsRef.current
|
|
68
71
|
});
|
|
69
|
-
}, [pathname,
|
|
72
|
+
}, [pathname, search, trackPageViews]);
|
|
70
73
|
return children ?? null;
|
|
71
74
|
}
|
|
72
75
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, type ReactNode } from \"react\";\nimport { usePathname, useSearchParams } from \"next/navigation\";\nimport tell from \"@tell-rs/browser\";\nimport type { TellBrowserConfig, Properties } from \"@tell-rs/browser\";\n\nexport { tell } from \"@tell-rs/browser\";\nexport type { TellBrowserConfig, Properties } from \"@tell-rs/browser\";\n\nexport interface
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, type ReactNode } from \"react\";\nimport { usePathname, useSearchParams } from \"next/navigation\";\nimport tell from \"@tell-rs/browser\";\nimport type { TellBrowserConfig, Properties } from \"@tell-rs/browser\";\n\nexport { tell } from \"@tell-rs/browser\";\nexport type { TellBrowserConfig, Properties } from \"@tell-rs/browser\";\n\nexport interface TellProps {\n apiKey: string;\n options?: TellBrowserConfig;\n /** Track page views automatically on route change. Default: true */\n trackPageViews?: boolean;\n /** Extra properties to include with every page view event. */\n pageViewProperties?: Properties;\n children?: ReactNode;\n}\n\n/**\n * Drop-in Next.js analytics component.\n * Place in your root layout to auto-configure Tell and track page views.\n *\n * ```tsx\n * // app/layout.tsx\n * import { Tell } from \"@tell-rs/nextjs\";\n *\n * export default function RootLayout({ children }) {\n * return (\n * <html>\n * <body>\n * <Tell apiKey=\"...\" />\n * {children}\n * </body>\n * </html>\n * );\n * }\n * ```\n */\nexport function Tell({\n apiKey,\n options,\n trackPageViews = true,\n pageViewProperties,\n children,\n}: TellProps) {\n const initialized = useRef(false);\n const pathname = usePathname();\n const searchParams = useSearchParams();\n const search = searchParams?.toString() ?? \"\";\n const pageViewPropsRef = useRef(pageViewProperties);\n pageViewPropsRef.current = pageViewProperties;\n\n // Initialize once\n useEffect(() => {\n if (!initialized.current) {\n tell.configure(apiKey, options);\n initialized.current = true;\n }\n return () => {\n tell.close();\n };\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n // Track page views on route changes\n useEffect(() => {\n if (!trackPageViews || !initialized.current) return;\n\n const url = search ? `${pathname}?${search}` : pathname;\n\n tell.track(\"Page Viewed\", {\n url,\n path: pathname,\n ...pageViewPropsRef.current,\n });\n }, [pathname, search, trackPageViews]);\n\n return children ?? null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAkD;AAClD,wBAA6C;AAC7C,qBAAiB;AAGjB,IAAAA,kBAAqB;AAiCd,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AACF,GAAc;AACZ,QAAM,kBAAc,qBAAO,KAAK;AAChC,QAAM,eAAW,+BAAY;AAC7B,QAAM,mBAAe,mCAAgB;AACrC,QAAM,SAAS,cAAc,SAAS,KAAK;AAC3C,QAAM,uBAAmB,qBAAO,kBAAkB;AAClD,mBAAiB,UAAU;AAG3B,8BAAU,MAAM;AACd,QAAI,CAAC,YAAY,SAAS;AACxB,qBAAAC,QAAK,UAAU,QAAQ,OAAO;AAC9B,kBAAY,UAAU;AAAA,IACxB;AACA,WAAO,MAAM;AACX,qBAAAA,QAAK,MAAM;AAAA,IACb;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,8BAAU,MAAM;AACd,QAAI,CAAC,kBAAkB,CAAC,YAAY,QAAS;AAE7C,UAAM,MAAM,SAAS,GAAG,QAAQ,IAAI,MAAM,KAAK;AAE/C,mBAAAA,QAAK,MAAM,eAAe;AAAA,MACxB;AAAA,MACA,MAAM;AAAA,MACN,GAAG,iBAAiB;AAAA,IACtB,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,QAAQ,cAAc,CAAC;AAErC,SAAO,YAAY;AACrB;","names":["import_browser","tell"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
|
|
|
3
3
|
import { TellBrowserConfig, Properties } from '@tell-rs/browser';
|
|
4
4
|
export { Properties, TellBrowserConfig, tell } from '@tell-rs/browser';
|
|
5
5
|
|
|
6
|
-
interface
|
|
6
|
+
interface TellProps {
|
|
7
7
|
apiKey: string;
|
|
8
8
|
options?: TellBrowserConfig;
|
|
9
9
|
/** Track page views automatically on route change. Default: true */
|
|
@@ -18,13 +18,13 @@ interface TellAnalyticsProps {
|
|
|
18
18
|
*
|
|
19
19
|
* ```tsx
|
|
20
20
|
* // app/layout.tsx
|
|
21
|
-
* import {
|
|
21
|
+
* import { Tell } from "@tell-rs/nextjs";
|
|
22
22
|
*
|
|
23
23
|
* export default function RootLayout({ children }) {
|
|
24
24
|
* return (
|
|
25
25
|
* <html>
|
|
26
26
|
* <body>
|
|
27
|
-
* <
|
|
27
|
+
* <Tell apiKey="..." />
|
|
28
28
|
* {children}
|
|
29
29
|
* </body>
|
|
30
30
|
* </html>
|
|
@@ -32,6 +32,6 @@ interface TellAnalyticsProps {
|
|
|
32
32
|
* }
|
|
33
33
|
* ```
|
|
34
34
|
*/
|
|
35
|
-
declare function
|
|
35
|
+
declare function Tell({ apiKey, options, trackPageViews, pageViewProperties, children, }: TellProps): string | number | bigint | boolean | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
|
|
36
36
|
|
|
37
|
-
export {
|
|
37
|
+
export { Tell, type TellProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
|
|
|
3
3
|
import { TellBrowserConfig, Properties } from '@tell-rs/browser';
|
|
4
4
|
export { Properties, TellBrowserConfig, tell } from '@tell-rs/browser';
|
|
5
5
|
|
|
6
|
-
interface
|
|
6
|
+
interface TellProps {
|
|
7
7
|
apiKey: string;
|
|
8
8
|
options?: TellBrowserConfig;
|
|
9
9
|
/** Track page views automatically on route change. Default: true */
|
|
@@ -18,13 +18,13 @@ interface TellAnalyticsProps {
|
|
|
18
18
|
*
|
|
19
19
|
* ```tsx
|
|
20
20
|
* // app/layout.tsx
|
|
21
|
-
* import {
|
|
21
|
+
* import { Tell } from "@tell-rs/nextjs";
|
|
22
22
|
*
|
|
23
23
|
* export default function RootLayout({ children }) {
|
|
24
24
|
* return (
|
|
25
25
|
* <html>
|
|
26
26
|
* <body>
|
|
27
|
-
* <
|
|
27
|
+
* <Tell apiKey="..." />
|
|
28
28
|
* {children}
|
|
29
29
|
* </body>
|
|
30
30
|
* </html>
|
|
@@ -32,6 +32,6 @@ interface TellAnalyticsProps {
|
|
|
32
32
|
* }
|
|
33
33
|
* ```
|
|
34
34
|
*/
|
|
35
|
-
declare function
|
|
35
|
+
declare function Tell({ apiKey, options, trackPageViews, pageViewProperties, children, }: TellProps): string | number | bigint | boolean | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
|
|
36
36
|
|
|
37
|
-
export {
|
|
37
|
+
export { Tell, type TellProps };
|
package/dist/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { useEffect, useRef } from "react";
|
|
|
5
5
|
import { usePathname, useSearchParams } from "next/navigation";
|
|
6
6
|
import tell from "@tell-rs/browser";
|
|
7
7
|
import { tell as tell2 } from "@tell-rs/browser";
|
|
8
|
-
function
|
|
8
|
+
function Tell({
|
|
9
9
|
apiKey,
|
|
10
10
|
options,
|
|
11
11
|
trackPageViews = true,
|
|
@@ -15,6 +15,9 @@ function TellAnalytics({
|
|
|
15
15
|
const initialized = useRef(false);
|
|
16
16
|
const pathname = usePathname();
|
|
17
17
|
const searchParams = useSearchParams();
|
|
18
|
+
const search = searchParams?.toString() ?? "";
|
|
19
|
+
const pageViewPropsRef = useRef(pageViewProperties);
|
|
20
|
+
pageViewPropsRef.current = pageViewProperties;
|
|
18
21
|
useEffect(() => {
|
|
19
22
|
if (!initialized.current) {
|
|
20
23
|
tell.configure(apiKey, options);
|
|
@@ -26,17 +29,17 @@ function TellAnalytics({
|
|
|
26
29
|
}, []);
|
|
27
30
|
useEffect(() => {
|
|
28
31
|
if (!trackPageViews || !initialized.current) return;
|
|
29
|
-
const url =
|
|
32
|
+
const url = search ? `${pathname}?${search}` : pathname;
|
|
30
33
|
tell.track("Page Viewed", {
|
|
31
34
|
url,
|
|
32
35
|
path: pathname,
|
|
33
|
-
...
|
|
36
|
+
...pageViewPropsRef.current
|
|
34
37
|
});
|
|
35
|
-
}, [pathname,
|
|
38
|
+
}, [pathname, search, trackPageViews]);
|
|
36
39
|
return children ?? null;
|
|
37
40
|
}
|
|
38
41
|
export {
|
|
39
|
-
|
|
42
|
+
Tell,
|
|
40
43
|
tell2 as tell
|
|
41
44
|
};
|
|
42
45
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, type ReactNode } from \"react\";\nimport { usePathname, useSearchParams } from \"next/navigation\";\nimport tell from \"@tell-rs/browser\";\nimport type { TellBrowserConfig, Properties } from \"@tell-rs/browser\";\n\nexport { tell } from \"@tell-rs/browser\";\nexport type { TellBrowserConfig, Properties } from \"@tell-rs/browser\";\n\nexport interface
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, type ReactNode } from \"react\";\nimport { usePathname, useSearchParams } from \"next/navigation\";\nimport tell from \"@tell-rs/browser\";\nimport type { TellBrowserConfig, Properties } from \"@tell-rs/browser\";\n\nexport { tell } from \"@tell-rs/browser\";\nexport type { TellBrowserConfig, Properties } from \"@tell-rs/browser\";\n\nexport interface TellProps {\n apiKey: string;\n options?: TellBrowserConfig;\n /** Track page views automatically on route change. Default: true */\n trackPageViews?: boolean;\n /** Extra properties to include with every page view event. */\n pageViewProperties?: Properties;\n children?: ReactNode;\n}\n\n/**\n * Drop-in Next.js analytics component.\n * Place in your root layout to auto-configure Tell and track page views.\n *\n * ```tsx\n * // app/layout.tsx\n * import { Tell } from \"@tell-rs/nextjs\";\n *\n * export default function RootLayout({ children }) {\n * return (\n * <html>\n * <body>\n * <Tell apiKey=\"...\" />\n * {children}\n * </body>\n * </html>\n * );\n * }\n * ```\n */\nexport function Tell({\n apiKey,\n options,\n trackPageViews = true,\n pageViewProperties,\n children,\n}: TellProps) {\n const initialized = useRef(false);\n const pathname = usePathname();\n const searchParams = useSearchParams();\n const search = searchParams?.toString() ?? \"\";\n const pageViewPropsRef = useRef(pageViewProperties);\n pageViewPropsRef.current = pageViewProperties;\n\n // Initialize once\n useEffect(() => {\n if (!initialized.current) {\n tell.configure(apiKey, options);\n initialized.current = true;\n }\n return () => {\n tell.close();\n };\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n // Track page views on route changes\n useEffect(() => {\n if (!trackPageViews || !initialized.current) return;\n\n const url = search ? `${pathname}?${search}` : pathname;\n\n tell.track(\"Page Viewed\", {\n url,\n path: pathname,\n ...pageViewPropsRef.current,\n });\n }, [pathname, search, trackPageViews]);\n\n return children ?? null;\n}\n"],"mappings":";;;AAEA,SAAS,WAAW,cAA8B;AAClD,SAAS,aAAa,uBAAuB;AAC7C,OAAO,UAAU;AAGjB,SAAS,QAAAA,aAAY;AAiCd,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AACF,GAAc;AACZ,QAAM,cAAc,OAAO,KAAK;AAChC,QAAM,WAAW,YAAY;AAC7B,QAAM,eAAe,gBAAgB;AACrC,QAAM,SAAS,cAAc,SAAS,KAAK;AAC3C,QAAM,mBAAmB,OAAO,kBAAkB;AAClD,mBAAiB,UAAU;AAG3B,YAAU,MAAM;AACd,QAAI,CAAC,YAAY,SAAS;AACxB,WAAK,UAAU,QAAQ,OAAO;AAC9B,kBAAY,UAAU;AAAA,IACxB;AACA,WAAO,MAAM;AACX,WAAK,MAAM;AAAA,IACb;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,YAAU,MAAM;AACd,QAAI,CAAC,kBAAkB,CAAC,YAAY,QAAS;AAE7C,UAAM,MAAM,SAAS,GAAG,QAAQ,IAAI,MAAM,KAAK;AAE/C,SAAK,MAAM,eAAe;AAAA,MACxB;AAAA,MACA,MAAM;AAAA,MACN,GAAG,iBAAiB;AAAA,IACtB,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,QAAQ,cAAc,CAAC;AAErC,SAAO,YAAY;AACrB;","names":["tell"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tell-rs/nextjs",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Tell SDK Next.js integration — automatic page tracking",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -13,10 +13,12 @@
|
|
|
13
13
|
"require": "./dist/index.cjs"
|
|
14
14
|
}
|
|
15
15
|
},
|
|
16
|
-
"files": [
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
17
19
|
"scripts": {
|
|
18
20
|
"build": "tsup",
|
|
19
|
-
"test": "
|
|
21
|
+
"test": "node --import tsx --import 'data:text/javascript,import { register } from \"node:module\"; import { pathToFileURL } from \"node:url\"; register(\"./test/loader.mjs\", pathToFileURL(\"./\"));' --test test/*.test.tsx",
|
|
20
22
|
"typecheck": "tsc --noEmit",
|
|
21
23
|
"clean": "rm -rf dist"
|
|
22
24
|
},
|
|
@@ -27,10 +29,13 @@
|
|
|
27
29
|
},
|
|
28
30
|
"devDependencies": {
|
|
29
31
|
"@types/react": "^19.0.0",
|
|
32
|
+
"@types/react-dom": "^19.0.0",
|
|
30
33
|
"next": "^15.0.0",
|
|
31
34
|
"react": "^19.0.0",
|
|
35
|
+
"react-dom": "^19.0.0",
|
|
32
36
|
"@tell-rs/browser": "*",
|
|
33
37
|
"tsup": "^8.0.0",
|
|
38
|
+
"tsx": "^4.0.0",
|
|
34
39
|
"typescript": "^5.5.0"
|
|
35
40
|
},
|
|
36
41
|
"repository": {
|
|
@@ -39,7 +44,12 @@
|
|
|
39
44
|
"directory": "packages/nextjs"
|
|
40
45
|
},
|
|
41
46
|
"homepage": "https://tell.rs",
|
|
42
|
-
"keywords": [
|
|
47
|
+
"keywords": [
|
|
48
|
+
"analytics",
|
|
49
|
+
"nextjs",
|
|
50
|
+
"next",
|
|
51
|
+
"tell"
|
|
52
|
+
],
|
|
43
53
|
"license": "MIT",
|
|
44
54
|
"author": "Arcade Labs Inc."
|
|
45
55
|
}
|