Manychat Pixel allows you to log events from your website. You can copy a few strings of code to your website, set up events that you want to track, and thus store all analytics in Manychat.
How it works
Manychat performs several steps to make Pixel work — they are required to collect data from external resources.
First, create a button with an Open website option to direct your contacts to an external resource.
Every contact who clicks this button will implicitly get an additional URL parameter called "mcp_token" (e.g., https://mysite.com/?utm_source=manychat&utm_medium=cpa&mcp_token=12312314232yg123jh1g3j1g23u12y3). MCP_token stores encrypted meta-data to identify this contact and their later actions on your website.
Then, Install Manychat Pixel (guide below). Nowadays, you can install the script once per website because the ... block is usually shared between all pages—though if you aren't sure, you can install the script on each page you are firing events from.
Finally, add log functions to your website and pass them valid expected parameters (guide below).
⚠️ In order for the Pixel to fire off properly for the first time, you need the user to go from Messenger or any other channel to the website where Pixel is located. After it is done, that user's session will be saved for 28 days. During that session, the event will be triggered whenever this user visits the Pixel website, regardless of where they came from.
Installing Manychat Pixel
First and foremost, note that this feature is only available to Pro accounts. Make sure to get a Pro subscription before attempting to install it. Here is how to do it.
Step 1. Go to Settings → Pixel. You should see a block of code:
Step 2. Copy Manychat Pixel code and add it to your website like this:
<head>
...
<!-- Manychat -->
<script src="//widget.manychat.com/100949504624148.js" async="async"></script>
</head>
⚠️ Important: this exact piece will not work — you should copy one from your Manychat account.
Setting up events on your website
Manychat Pixel supports two types of events: Conversion event and Money event. To fire an event you should use the correct built-in function and pass in its expected parameters.
- window.MC_PIXEL.fireLogMoneyEvent() accepts three parameters: event name, event weight and currency (you can omit this parameter— then Manychat will use 'USD' as default). Ready to use function will look like this: window.MC_PIXEL.fireLogMoneyEvent('my_book_purchase', 10.7, 'EUR'). Thus you will tell Manychat to log that your contact has just bought something for 10.7 euros. You can use an already existing Event name or type a new one—in that case, Manychat will create a new one.
- window.MC_PIXEL.fireLogConversionEvent() accepts one and only parameter: event name. Ready to use function will look like this: window.MC_PIXEL.fireLogConversionEvent('buy_button_clicked'). Thus Manychat will understand that something has happened on your website—e.g., a visitor clicked on some button or link. You can use an already existing Event name or type a new one—in that case, Manychat will create a new one.
Examples
Add some events to the log. There are two popular ways to log an event: when a visitor loads a page (e.g., "Successful payment page") or clicks a button/link (e.g., "Read more"or "Buy").
Logging event on page load complete
<!-- This syntax will fire an event after the page is loaded completely -->
<body onload="window.MC_PIXEL.fireLogMoneyEvent('my_book_purchased', 10.7, 'EUR')"> ... </body>
Logging event when a visitor clicks a button or link
<!-- This syntax will fire an event after a visitor clicks the button -->
<button onclick="window.MC_PIXEL.fireLogConversionEvent('buy_button_clicked')">
...
</button>
<!-- This syntax will fire an event after a visitor clicks the link -->
<a href="#" onclick="window.MC_PIXEL.fireLogConversionEvent('buy_button_clicked')">
...
</a>
Logging several events
<!-- Sometimes, you may need to log several events when something happens
(e.g., send events to several 3rd party systems). Then you should create a new function
to encapsulate several methods and use it -->
<body>
<!-- This script will create function "myLogger()"
which will make 3 things when called:
-
Fire event in Manychat
-
Write the word "test" in the console (look in DevTools → Console)
-
Show a modal window with the word "test"
Of course, you can alter this code to fire several events-->
<script>
function myLogger() {
window.MC_PIXEL.fireLogConversionEvent('buy_button_clicked');
console.log('test');
alert('test');
}
</script>
<!-- Here you declare calling "myLogger()" function when button is clicked -->
<button onclick="myLogger()">
...
</button>
</body>