Overview #
ManyChat Pixel allows you to record website events. You can copy some code strings to your website, set the events you want to track, and then store all the analysis in ManyChat.
How it works #
ManyChat performs several steps to make Pixel work properly-it needs to collect data from external sources.
- Create a button with an "open site" option to direct your subscribers to external resources.
- From now on, every subscriber clicking this button will implicitly get an additional URL parameter named "mcp_token" (e.g.
https://mysite.com/?utm_source=manychat&utm_medium=cpa&mcp_token=12312314232yg123jh1g3j1g23u12y3). MCP_token stores encrypted metadata to identify the subscriber and its subsequent operations on your website.
- From now on, every subscriber clicking this button will implicitly get an additional URL parameter named "mcp_token" (e.g.
- Install ManyChat Pixel (guide below). Now, because every page
<head>...</head>The block is usually shared between all pages, so you can install the script once on each website-although you are not sure, you can install the script on every page that triggers the event. - Add the logging function to your website and pass it valid expected parameters (guidelines below).
important! ! ! In order for the Pixel to start normally for the first time, you need the user to go from Messenger to the website where the Pixel is located. After completion, the user's session will be saved for 28 days. During this session, no matter when the user visits the Pixel website, no matter where he/she comes from, an even number will be triggered.
Install ManyChat Pixel #
step 1
Go to Automation → Pixel. You should see a piece of code:
Step 2
Copy the ManyChat Pixel code and add it to your website as shown below:
<head>...<!-- ManyChat --><script src="//widget.manychat.com/100949504624148.js" async="async"></script></head>important hint: This part of the content is not available-you should copy one from the ManyChat account.
Set up events on your website #
ManyChat Pixel supports two types of events: Conversion events and Money events. To "trigger" an event, you should use the correct built-in function and pass its expected parameters.
window.MC_PIXEL.fireLogMoneyEvent()Accepts 3 parameters: event name, event weight and currency (you can ignore this parameter-then ManyChat will'USD'Used as the default value). The functions to be used will look like this:window.MC_PIXEL.fireLogMoneyEvent('my_book_purchase', 10.7, 'EUR'). Therefore, you will tell ManyChat to record that your subscriber just bought something for 10.7 euros. You can use an existing event name or type in a new event name-in this case, ManyChat will create a new event name.window.MC_PIXEL.fireLogConversionEvent()The only parameter accepted: the event name. The functions to be used will look like this:window.MC_PIXEL.fireLogConversionEvent('buy_button_clicked'). In this way, ManyChat will know that something has happened on your website-for example, a visitor has clicked certain buttons or links. You can use an existing event name or type in a new event name-in this case, ManyChat will create a new event name.
example
Add some events to record! There are two common methods for recording events: when a visitor loads a page (such as "successful payment page") or clicks a button/link (such as "read more" or "buy").
Page load log event complete
<!-- This syntax will fire event after page is loaded completely --><body onload="window.MC_PIXEL.fireLogMoneyEvent('my_book_purchased', 10.7, 'EUR')">...</body>
Log events, when visitors click certain buttons or links
<!-- This syntax will fire event after visitor clicks the button --><button onclick="window.MC_PIXEL.fireLogConversionEvent('buy_button_clicked')">...</button><!-- This syntax will fire event after visitor clicks the link --><a href="#" onclick="window.MC_PIXEL.fireLogConversionEvent('buy_button_clicked')">...</a>
Log several events
<!-- Sometimes you may need to log several events, when something happens (e.g. send events to several 3d party systems). Then you should create new functionto incapsulate several methods and use it --><body> <!-- This script will create function "myLogger()" which will make 3 things when called: 1. Fire event in ManyChat 2. Write word "test" in console (look in DevTools-Console) 3. Show a modal window with 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>comment #
The brief description above-all the information you need to get started quickly. Of course, there are many ways to use our Pixel (or better known as SDK)-for example, you can call this function from your own function to convert the data, and then trigger it in ManyChat. However, this story is another topic.
