For our project ,Page View are implemented on Client side, the page url is containing the utm parameters as well some parameters like camp_id and hcpid so how could we fetch the value of camp_id and hcpid value from the url if the page view is implemented on client side
Hi Sonia, Please stand by as I search the Mixpanel knowledge base for an AI-powered answer. I normally take about 15 seconds or so. In case AI cannot answer your question, feel free to reach out to Mixpanel support at mixpanel.com/get-support. If you have follow-up questions for this thread, please tag me again with your question: @kapa.ai <follow-up question> đź‘‹
Feel free to ask a follow-up question once I've answered by mentioning me with @kapa.ai
To fetch custom parameters like camp_id and hcpid from the URL when implementing page views on the client side using Mixpanel, you can use JavaScript to extract these values and include them as properties when tracking the page view event. Here's how you can do this: 1. First, ensure that you have Mixpanel's JavaScript SDK initialized on your page.2. Then, you can use JavaScript to parse the URL and extract the custom parameters. Here's an example of how to do this: LBKS// Function to get URL parameters function getUrlParameter(name) { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); var results = regex.exec(location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); }LBKS// Get the custom parameters var campId = getUrlParameter('camp_id'); var hcpid = getUrlParameter('hcpid');LBKS// Track the page view with custom parameters mixpanel.track("$mp_web_page_view", { "camp_id": campId, "hcpid": hcpid });LBKSThis code snippet does the following:
1. Defines a function getUrlParameter to extract parameters from the URL.
2. Uses this function to get the values of camp_id and hcpid.
3. Tracks a page view event with Mixpanel, including these custom parameters.Note that Mixpanel's JavaScript SDK automatically captures UTM parameters by default, so you don't need to manually include those.For more information on tracking page views and custom properties with Mixpanel's JavaScript SDK, you can refer to the Mixpanel JavaScript SDK documentation.Remember to adjust the event name if you're using a custom name for page views instead of the default $mp_web_page_view.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.
Do we need to capture these as super property or event property
Let me check the knowledge base for you again. One moment! đź“š
Based on the context of your question and the previous conversation, it appears you're asking whether you should capture the custom URL parameters (camp_id and hcpid) as super properties or event properties in Mixpanel. Let's consider the best approach: 1. Event Properties:
If these parameters (camp_id and hcpid) are specific to each page view and may change between different pages or visits, it's best to capture them as event properties. This is what was suggested in the previous answer, where they were included directly in the track call for the page view event.2. Super Properties:
Super properties are useful for information that remains constant across multiple events or for an extended period. According to the Mixpanel JavaScript SDK documentation: "Super properties are properties that are automatically attached to all events you send to Mixpanel. They're useful for properties that you want to include with every event, such as user preferences or attributes that don't change very often."Given that camp_id and hcpid are likely to change between different page views or user sessions, they are generally not good candidates for super properties.Therefore, I recommend capturing these parameters as event properties rather than super properties. This approach allows you to accurately associate each specific camp_id and hcpid with the corresponding page view, providing more precise and flexible data for your analysis.If you find that these parameters actually remain constant for a user across multiple page views or sessions, and you want to include them in all events, then you could consider registering them as super properties. However, based on the typical use of such URL parameters, event properties are likely the more appropriate choice.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.
Let me check the knowledge base for you again. One moment! đź“š
To adjust the code according to UTM parameters captured as super properties, we need to consider that Mixpanel's JavaScript SDK automatically captures UTM parameters by default. However, the behavior of UTM parameter persistence has changed in recent versions. Let's modify the code to account for this:
javascript
// Function to get URL parameters
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
// Get the custom parameters
var campId = getUrlParameter('camp_id');
var hcpid = getUrlParameter('hcpid');
// Get UTM parameters
var utmSource = getUrlParameter('utm_source');
var utmMedium = getUrlParameter('utm_medium');
var utmCampaign = getUrlParameter('utm_campaign');
var utmTerm = getUrlParameter('utm_term');
var utmContent = getUrlParameter('utm_content');
// Register UTM parameters as super properties
mixpanel.register({
'utm_source': utmSource,
'utm_medium': utmMedium,
'utm_campaign': utmCampaign,
'utm_term': utmTerm,
'utm_content': utmContent
});
// Track the page view with custom parameters
mixpanel.track("$mp_web_page_view", {
"camp_id": campId,
"hcpid": hcpid
});
This adjusted code does the following: 1. It still uses the getUrlParameter function to extract parameters from the URL. 2. It gets the values of camp_id and hcpid as before. 3. It now also extracts the UTM parameters from the URL. 4. It registers the UTM parameters as super properties using mixpanel.register(). This means these UTM parameters will be included in all subsequent events. 5. It tracks the page view event with the custom parameters camp_id and hcpid as event properties. However, it's important to note that according to the [Mixpanel JavaScript SDK documentation](https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#track-utm-tags): "UTM parameters are by default persisted across events as Super Properties. To opt in to the recommended modern behavior most compatible with our attribution models, use the SDK initialization option {stop_utm_persistence: true} to disable UTM param persistence." If you want to follow this recommended behavior, you should initialize Mixpanel like this:
javascript
mixpanel.init('YOUR_PROJECT_TOKEN', {
stop_utm_persistence: true
});
This will prevent UTM parameters from being automatically persisted as super properties. In this case, you would need to decide how you want to handle UTM parameters - whether to include them as event properties for each page view, or to manage their persistence yourself based on your specific requirements. Remember to adjust this code according to your specific needs and how you want to handle UTM parameters in your Mixpanel implementation.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.