bumpy-student-89073
06/18/2022, 1:18 PMfresh-football-47124
mixpanel.init('6a37b4557......[replace]', {
debug: true,
loaded: function(mx) {
growthbook.setAttributes({
...growthbook.getAttributes(),
id: mx.get_distinct_id()
});
}
});
bumpy-student-89073
06/18/2022, 1:21 PMmixpanel-browser
package) in the _app.js
file.fresh-football-47124
bumpy-student-89073
06/18/2022, 1:24 PM_app.js
...
const growthbook = new GrowthBook({
attributes: { id: visitor_id },
features: await getFeatures(),
trackingCallback: (experiment, result) => {
mixpanel.track("$experiment_started", {
"Experiment name": experiment.key,
"Variant name": result.variationId
});
}
});
fresh-football-47124
bumpy-student-89073
06/18/2022, 1:28 PMconst growthbook = new GrowthBook({
attributes: { id: visitor_id },
features: await getFeatures(),
trackingCallback: (experiment, result) => {
mixpanel.track("$experiment_started", {
"Experiment name": experiment.key,
"Variant name": result.variationId
});
}
});
gives me an error...
TypeError: Cannot read properties of undefined (reading 'disable_all_events')
at MixpanelLib._event_is_disabled (webpack-internal:///(middleware)/./node_modules/mixpanel-browser/dist/mixpanel.cjs.js:5561:21)
at MixpanelLib.eval (webpack-internal:///(middleware)/./node_modules/mixpanel-browser/dist/mixpanel.cjs.js:4776:14)
at MixpanelLib.eval [as track] (webpack-internal:///(middleware)/./node_modules/mixpanel-browser/dist/mixpanel.cjs.js:2789:27)
at Object.trackingCallback (webpack-internal:///(middleware)/./pages/_middleware.ts:45:69)
at GrowthBook.track (webpack-internal:///(middleware)/./node_modules/@growthbook/growthbook/dist/esm/GrowthBook.js:498:20)
at GrowthBook._run (webpack-internal:///(middleware)/./node_modules/@growthbook/growthbook/dist/esm/GrowthBook.js:473:10)
at GrowthBook.run (webpack-internal:///(middleware)/./node_modules/@growthbook/growthbook/dist/esm/GrowthBook.js:126:25)
at GrowthBook.evalFeature (webpack-internal:///(middleware)/./node_modules/@growthbook/growthbook/dist/esm/GrowthBook.js:311:26)
at GrowthBook.feature (webpack-internal:///(middleware)/./node_modules/@growthbook/growthbook/dist/esm/GrowthBook.js:220:17)
at Object.middleware [as handler] (webpack-internal:///(middleware)/./pages/_middleware.ts:53:20)
mixpanel
object doesn't make sense in the context of a middleware?fresh-football-47124
const growthbook = new GrowthBook({
trackingCallback: (experiment, result) => {
mixpanel.track("Experiment Viewed",
{
'Experiment Id': experiment.key,
'Variant Id' : result.variationId
}
);
}
});
mixpanel.init('60c30...b4557', {
debug: true,
loaded: function(mx) {
growthbook.setAttributes({
...growthbook.getAttributes(),
id: mx.get_distinct_id()
});
}
});
const FEATURES_ENDPOINT = "<http://localhost:3100/api/features/key_dev_e...5365>";
function MyApp({ Component, pageProps }: AppProps) {
useEffect(() => {
// Load feature definitions from API
fetch(FEATURES_ENDPOINT)
.then((res) => res.json())
.then((json) => {
growthbook.setFeatures(json.features);
});
// TODO: replace with real targeting attributes
growthbook.setAttributes({
"id": "432",
"deviceId": "foo",
"company": "foo",
"loggedIn": true,
"employee": true,
"country": "foo",
"browser": "foo",
"url": "foo"
})
}, [])
return (
<GrowthBookProvider growthbook={growthbook}>
<Component {...pageProps} />
</GrowthBookProvider>
)
}
But I haven't tested using the middlewarebumpy-student-89073
06/18/2022, 1:37 PMYou're using a Node.js module (events) which is not supported in the Edge Runtime.
future-teacher-7046
bumpy-student-89073
06/18/2022, 1:49 PM// Get existing visitor cookie or create a new one
let visitor_id = req.cookies[COOKIE] || crypto.randomUUID()
const growthbook = new GrowthBook({
attributes: { id: visitor_id },
features: await getFeatures()
});
and then in _app.js
new GrowthBook({
attributes: { id: mixpanel_id },
trackingCallback: (experiment, result) => {
mixNode.track("$experiment_started", {
"Experiment name": experiment.key,
"Variant name": result.variationId
});
}
});
future-teacher-7046
bumpy-student-89073
06/18/2022, 1:51 PMOne option is to use your own visitor id cookie for assigning variations. Then pass the result to the front end in a cookie and track it in Mixpanel when the page loads.Do you have an example of this?
future-teacher-7046
res.cookie("GB_EXPERIMENTS", JSON.stringify([{key: "my-experiment", variationId: 1}])
Then in your _app.js
track in mixpanel:
useEffect(() => {
const experiments = document.cookie["GB_EXPERIMENTS")
if (!experiments) return;
const parsed = JSON.parse(experiments);
if (!parsed) return;
parsed.forEach(res => {
mixpanel.track("$experiment_started", {
"Experiment name": res.key,
"Variant name": res.variationId
})
})
}, [])
bumpy-student-89073
06/18/2022, 2:32 PM