πConversions
We now allow protocols to track conversions in order to clearly measure and showcase the ROI of Herd. In order to do so, we need to understand what a conversion means to you.
Track conversions by calling a JS function
In order to track conversions in your site you can call this function set by the Herd pixel, e.g. each time any of your key buttons is pressed. Here is an example:
window.herd.trackConversion("my-swap-button")
For Typescript-based websites, we need to tell the compiler that we have set Herd in window object, plase add somewhere:
export {};
declare global {
interface Window {
herd: {
trackConversion: (elementId?: string) => void;
};
}
}
We will start tracking all conversions done in your site and adding information to Herd's admin so you can contiuosly improve your campaigns based on real data, aligned to your goals.
Using Framer
Create an Override file called HerdConversions or whatever you prefer and add this code:
import { Override } from "framer"
declare global {
interface Window {
herd: {
trackConversion: (elementId?: string) => void
}
}
}
export const handleConversion: Override = (props) => ({
onClick: (event) => {
console.debug("Saving conversion to Herd")
try {
// Call Herd's trackConversion function
if (
window.herd &&
typeof window.herd.trackConversion === "function"
) {
window.herd.trackConversion("YOUR-ID-TO-RECOGNIZE-LATER")
} else {
console.debug("Herd Pixel is not installed.")
}
} catch (error) {
console.error(error)
}
// Invoke any existing onClick handler passed via props
if (props.onClick) {
props.onClick(event)
}
},
})
Select the button to be tracked, and in the sidebar add the override:
Publish changes and done π
Last updated