Date of slack thread: 7/16/24
Anonymous: Hello, I’m currently using Statsig to test two landing pages on WordPress. I’ve included the JS client in the HTML theme of WordPress and utilized the HTTP API in the server code to enable seamless redirection between the control and variant pages. This approach avoids the issue of the control page briefly appearing before redirecting to the variant when using the JS client. I’m wondering how Statsig measures user interactions on the redirected page, specifically the variant. Is this process automatic?
Daniel (Statsig): Hey John, happy to help. I would advise against using the HTTP API for this kind of work, but instead use a Statsig Server SDK. That said, as long as the user properties you are experimenting on are consistent, the group the user ends up in will be consistent.
Daniel (Statsig): You can check the experiment for a user using the Statsig-node SDK (Or whatever language your backend runs in), then on the js client side, if the user properties are the same, you can log events and have them attributed to the experiment.
Server:
const redirectUrl = Statsig.getExperiment({userID: 'a-user'}, 'my_landing_page_exp').getValue("landing_url");
Client:
Statsig.initialize("client-...", {userID: 'a-user'});
Statsig.logEvent("my_custom_event", 123);
Anonymous: Thanks for the reply. I was force to use the HTTP API, because i find to hard to include a PHP dependencies in a limited access Wordpress hosting account.
Anonymous: I see so its automatic, server code for redirecting between control and variant. And the common js sdk in the wordpress theme will handle the user interactions?
Daniel (Statsig): Ok, it will still work, its just going to introduce latency on the request to HTTP API.
Daniel (Statsig): If you include the web-analytics (https://www.npmjs.com/package/@statsig/web-analytics) package in your wordpress website, we can track all user interaction yes. The important thing is to have the user properties line up.
Daniel (Statsig): Here is the docs related to web-analytics if you go that route: https://docs.statsig.com/webanalytics/overview
Anonymous: Including this
<script src="https://cdn.jsdelivr.net/npm/@statsig/js-client@latest/build/statsig-js-client+session-replay+web-analytics.min.js?apikey=[YOUR_CLIENT_KEY]"></script>
will track the user interactions in the Experiments I’m running like dau, daily_stickiness, etc?
Daniel (Statsig): It will track those things, yes, but it won’t attribute it to the experiment correctly unless the user properties match.
To wire it all up, you would need to do something like:
<script src="https://cdn.jsdelivr.net/npm/@statsig/js-client@latest/build/statsig-js-client+session-replay+web-analytics.min.js"></script>
<script>
const { StatsigClient, runStatsigAutoCapture, runStatsigSessionReplay } = window.Statsig;
const userID = getUserIdFromCookie(); // <- set by your server
const client = new StatsigClient(
YOUR CLIENT_KEY,
{ userID: userID }
);
runStatsigAutoCapture(client);
runStatsigSessionReplay(client);
client.initializeAsync().catch((err) => console.error(err));
</script>
Daniel (Statsig): When you say “user interactions” are you referring to click counts and such, or are you looking to actually playback a users session?
Anonymous: Yes click counts, or hover over a contact numbers.
Anonymous: What if its a public page without a user id?
Daniel (Statsig): Ok, click counts will come from the call to runStatsigAutoCapture
. If you want hover, you will need to write that up yourself and log the event
Something like mouseover: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event
addEventListener("mouseover", (event) => myStatsigClient.logEvent("on_hover", elementID));
Anonymous: Thank you so much. This really helps.
Daniel (Statsig): If it is a public page, you can use a “StableID”, also stored in a cookie. On the server side, you read if the cookie exists, if it doesn’t, you then generate a new one. On the client side, you read the cookie and store it on the user object as before.
const stableID = getUserIdFromCookie(); // <- set by your server
const client = new StatsigClient(
YOUR_CLIENT_KEY,
{ customIDs: {stableID: stableID }
);
Daniel (Statsig): No worries. Let me know if you need more clarification on any of this.
Anonymous: Thanks
Anonymous: <@U02P9J1F4TH> we are implementing something similar with cloudflare workers and the node-js sdk. We had opted for a custom deviceId to tie all everything together which we always pass through in the user customIDs property (we have 3 sdks in play node-js on our worker, the new js sdk client side and the php sdk server side). Should we be using the stableID instead, creating it if it’s not set yet. Our worker is the first point of contact so would always be set there.
Cooper Reid (Statsig): Sorry for hoppin in late here — https://docs.statsig.com/guides/sidecar-experiments/setup|Sidecar is very good for this use-case. You can build redirect experiments using a Chrome extension, and it will automatically import and initialize our Web Analytics package (so you wont need to write any code for behavior tracking, and it will use the same user for assignment and tracking purposes automatically).
Cooper Reid (Statsig): Same concept — Single line script install in your Wordpress page header and your off to the races, no code.
Cooper Reid (Statsig): You can also pass a server-generated userID/userInfo to Sidecar using https://docs.statsig.com/guides/sidecar-experiments/measuring-experiments#setting-user-identity-and-attributes|this.
Anonymous: Thanks