a looooot
This commit is contained in:
Carl-Gerhard Lindesvärd
12
apps/test/src/app/app-dir/page.component.tsx
Normal file
12
apps/test/src/app/app-dir/page.component.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
'use client';
|
||||
|
||||
export default function TestPage({ triggerEvent }: { triggerEvent: any }) {
|
||||
return (
|
||||
<>
|
||||
<button onClick={() => triggerEvent()}>Event (server action)</button>
|
||||
<button data-event="yolo" data-yolo="123" data-hihi="taaa-daaaaa">
|
||||
Event (data-attributes)
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
55
apps/test/src/app/app-dir/page.tsx
Normal file
55
apps/test/src/app/app-dir/page.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { OpenpanelProvider, SetProfileId, trackEvent } from '@mixan-test/next';
|
||||
import { Mixan as Openpanel } from '@mixan-test/sdk';
|
||||
|
||||
const opServer = new Openpanel({
|
||||
clientId: '4c9a28cb-73c3-429f-beaf-4b3fe91352ea',
|
||||
clientSecret: '2701ada9-fcbf-414a-ac94-9511949ee44d',
|
||||
url: 'https://api.openpanel.dev',
|
||||
});
|
||||
|
||||
export default function Page() {
|
||||
// Track event in server actions
|
||||
async function create() {
|
||||
'use server';
|
||||
opServer.event('some-event', {
|
||||
profileId: '1234',
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* In layout.tsx (app dir) or _app.tsx (pages) */}
|
||||
<OpenpanelProvider
|
||||
clientId="0acce97f-1126-4439-b7ee-5d384e2fc94b"
|
||||
url="https://api.openpanel.dev"
|
||||
trackScreenViews
|
||||
trackAttributes
|
||||
trackOutgoingLinks
|
||||
/>
|
||||
|
||||
{/* Provide user id in React Server Components */}
|
||||
<SetProfileId value="1234" />
|
||||
|
||||
<button
|
||||
onClick={() =>
|
||||
trackEvent('some-event', {
|
||||
bar: 'bar',
|
||||
foo: 'foo',
|
||||
revenue: 1000,
|
||||
})
|
||||
}
|
||||
>
|
||||
Track event with method
|
||||
</button>
|
||||
|
||||
<button
|
||||
data-event="some-event"
|
||||
data-bar="bar"
|
||||
data-foo="foo"
|
||||
data-revenue="1000"
|
||||
>
|
||||
Track event with attributes
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
22
apps/test/src/app/layout.tsx
Normal file
22
apps/test/src/app/layout.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import { OpenpanelProvider } from '@mixan-test/next';
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
<body>
|
||||
<OpenpanelProvider
|
||||
clientId="0acce97f-1126-4439-b7ee-5d384e2fc94b"
|
||||
url="http://localhost:3333"
|
||||
trackScreenViews
|
||||
trackAttributes
|
||||
trackOutgoingLinks
|
||||
/>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -1,15 +1,15 @@
|
||||
import { useEffect } from 'react';
|
||||
// import { mixan } from '@/analytics';
|
||||
import { OpenpanelProvider } from '@mixan-test/next';
|
||||
import type { AppProps } from 'next/app';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
export default function MyApp({ Component, pageProps }: AppProps) {
|
||||
const router = useRouter();
|
||||
// useEffect(() => {
|
||||
// mixan.screenView();
|
||||
// return router.events.on('routeChangeComplete', () => {
|
||||
// mixan.screenView();
|
||||
// });
|
||||
// }, []);
|
||||
return <Component {...pageProps} />;
|
||||
return (
|
||||
<>
|
||||
<OpenpanelProvider
|
||||
clientId="0acce97f-1126-4439-b7ee-5d384e2fc94b"
|
||||
url="http://localhost:3333"
|
||||
trackScreenViews
|
||||
/>
|
||||
<Component {...pageProps} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
import { Head, Html, Main, NextScript } from 'next/document';
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html>
|
||||
<Head>
|
||||
<script
|
||||
async
|
||||
src="/op.js"
|
||||
data-url="http://localhost:3333"
|
||||
data-client-id="0acce97f-1126-4439-b7ee-5d384e2fc94b"
|
||||
data-track-screen-views="1"
|
||||
data-track-outgoing-links="1"
|
||||
/>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +1,68 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
clear,
|
||||
decrement,
|
||||
increment,
|
||||
setProfile,
|
||||
trackEvent,
|
||||
} from '@mixan-test/next';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function Test() {
|
||||
const [id, setId] = useState('');
|
||||
const [auth, setAuth] = useState<string | null>(null);
|
||||
|
||||
function handleLogin() {
|
||||
if (id) {
|
||||
localStorage.setItem('auth', id);
|
||||
setAuth(id);
|
||||
}
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
localStorage.removeItem('auth');
|
||||
setAuth(null);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setAuth(localStorage.getItem('auth') ?? null);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('auth', auth);
|
||||
|
||||
if (auth) {
|
||||
console.log('set profile?', auth);
|
||||
|
||||
setProfile({
|
||||
profileId: auth,
|
||||
});
|
||||
} else {
|
||||
clear();
|
||||
}
|
||||
}, [auth]);
|
||||
|
||||
if (auth === null) {
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Login with user id"
|
||||
onChange={(e) => setId(e.target.value)}
|
||||
/>
|
||||
<button onClick={handleLogin}>Login</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Link href="/">Home</Link>
|
||||
<button
|
||||
onClick={() => {
|
||||
// @ts-expect-error
|
||||
window.openpanel.setUser({
|
||||
first_name: 'John',
|
||||
last_name: 'Doe',
|
||||
email: 'john.doe@gmail.com',
|
||||
id: '1234',
|
||||
setProfile({
|
||||
firstName: 'Maja',
|
||||
lastName: 'Klara',
|
||||
profileId: auth,
|
||||
});
|
||||
}}
|
||||
>
|
||||
@@ -19,16 +70,14 @@ export default function Test() {
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
// @ts-expect-error
|
||||
window.openpanel.increment('app_open', 1);
|
||||
increment('app_open', 1);
|
||||
}}
|
||||
>
|
||||
Increment
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
// @ts-expect-error
|
||||
window.openpanel.decrement('app_open', 1);
|
||||
decrement('app_open', 1);
|
||||
}}
|
||||
>
|
||||
Decrement
|
||||
@@ -43,8 +92,7 @@ export default function Test() {
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
// @ts-ignore
|
||||
window.openpanel.event('custom_click', {
|
||||
trackEvent('custom_click', {
|
||||
custom_string: 'test',
|
||||
custom_number: 1,
|
||||
});
|
||||
@@ -52,14 +100,7 @@ export default function Test() {
|
||||
>
|
||||
Trigger event
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
// @ts-expect-error
|
||||
window.openpanel.clear();
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
<button onClick={handleLogout}>Logout</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user