Mixpanel Tags in Integrations
Last updated: September 26, 2022
Implementation
There are three levels of tags you can add to integrations. Whichever method you use, you must add tags as a comma-separated list to send multiple tags. The tags you list will be normalized to camelCase. Spaces before and after the commas are ignored. For example:
my first tag, my-SeCond t_ag,ta g numero3
Becomes 3 tags in Mixpanel:
* myFirstTag
* mySecondTAg
* taGNumero3
The purpose of the normalization is to reduce the risk of typos distinguishing two tags that were meant to be the same.
Button Tags
As you may have guessed, button tags are for classifying button integrations. All Mixpanel events sent from the Lightframe/fallback page opened by the button will include the tags in the button-tags property.
Button tags must be added in two places in a button integration. The “Tags” field in the embed generator will take care of this for you. First, in the URL:
https://fareharbor.com/embeds/book/islandtours/?button-tags=thisTag,thatOtherTag
Second, in the JSON argument passed to FH.open():
FH.open({
shortname: 'islandtours',
view: 'items',
buttonTags: 'thisTag,thatOtherTag'
})
If using Autolightframing, you don’t need to worry about argument to FH.open(), since your link won’t have an onclick.
A completed button integration would look like:
<!-- FareHarbor book button for all items -->
<a href="https://fareharbor.com/embeds/book/islandtours/?button-tags=thisTag,thatOtherTag" onclick="return !(window.FH && FH.open({ shortname: 'islandtours', view: 'items', buttonTags: 'thisTag,thatOtherTag' }));">Book online now!</a>
Page & Site Tags
Page tags are meant to be an easy way to add tags to every FareHarbor integration on a given page. All Mixpanel events sent from any calendar, item grid, or Lightframe/fallback on/opened from the page will include the tags in the page-tags property.
To add page tags, simply add the following meta to the page’s head. (Though technically incorrect, you could probably get away with adding this to the body instead, though make sure you do it before the code for any integration.)
<head>
...
<meta name="fh-page-tags" content="thisTag, thatOtherTag">
</head>
Site tags work in exactly the same way as page tags, except the name of the meta is fh-site-tags:
<meta name="fh-site-tags" content="thisSiteTag, thatOtherSiteTag">
The purpose of site tags, in contrast to page tags, is to distinguish between tags that are true for the whole site vs. those that apply to a given page. Site tags might be inserted globally in a header.php file, whereas page tags probably shouldn’t be.