With the ManyChat Pixel, you can track events on your website.
In this guide, I’ll tell you how to use it.
And I’ll share some smart use cases.
- What is the ManyChat Pixel?
- How do you use the ManyChat Pixel?
- Use case #1: tracking events for your analytics
- Use case #2: tracking purchases
- Use case #3: page tracking
- Use case #4: abandonment cart
Let’s dive in!
What is the ManyChat Pixel?
The ManyChat Pixel is a little script that you can add to your website to log events from your website.
So now, you can automatically add events as soon as someone clicks a button, clicks a link, completes a purchase, or visits a page.
And based on those events, you can trigger automation rules that, for example, add tags or start flows.
Cool, right? 🙌
How do you use the ManyChat Pixel?
In ManyChat their help section you can already find quite a lot about how you can use the ManyChat Pixel.
But the language they’re using is pretty techy.
So here’s my non-techy explanation, because I know you’re also not a programmer 🙃
How to install the pixel script
So first, you have to go over to automation » pixel.
There, you’ll find a script that you have to copy.
Then, they ask you to add the script to the <head> of your website.
The <head> is basically the top part of your website pages, which is on every page the same.
So if you add it to your <head>, the script will automatically load on all your pages.
In WordPress, you can do this by going to Appearance » Theme Editor » header.php
..you have to keep in mind that the ManyChat Pixel will add about 8 requests to your page.
This means that every time a page on your website loads, it will ask for data from 8 different external resources.
And that slows down your website 🐌
That’s why I would suggest that you only use the ManyChat Pixel on pages where you need it.
Tip: Google Tag Manager is an awesome tool to collect allll your different tracking pixels. It takes maybe 2 hours to figure out, but I highly recommend it. And it’s free too.
I won’t go to deep into that now.
But site speed is important to keep in mind.
How to trigger events
It’s possible to trigger two different kinds of events:
- Conversion event: can be used for button clicks, link clicks, page visits, etc. I think this is the most flexible one.
- Money event: usually you would use this to log when your subscriber purchases something.
And to log these events, we need to add some code to parts of our website.
There are two different codes for the two different events.
You’ll need window.MC_PIXEL.fireLogMoneyEvent(‘name here’, 10.7, ‘EUR’) to log money events.
Looks a bit techy, but you only have to change the name, the amount and the currency.
So if I would sell a course about baking bread called Tasty Bread 101 for 50 dollars and 20 cents, it would look like this:
window.MC_PIXEL.fireLogMoneyEvent('Sale: Tasty Bread 101', 50.2, 'USD')
And to log conversion events, you’ll need window.MC_PIXEL.fireLogConversionEvent(‘name here’)
So if someone would visit a checkout page for Tasty Bread 101, it would look like this:
window.MC_PIXEL.fireLogConversionEvent('Page Visit: checkout tasty bread 101')
You just make sure you use the LogMoneyEvent or LogConversionEvent, and then you add the right parameters.
So for the money event, you need to add the name, amount & currency.
And for the conversion event, you only need to add a name.
The events, after you triggered them for the first time, will be automatically created under Settings » Conversion Events in ManyChat.
Just keep in mind that you can’t change the name, so make sure to name them properly.
(and otherwise, you have to delete & recreate them)
So now you know what kind of code you need.
But how do you actually trigger the money or conversion event?
Well, I’m not a programmer, but it’s actually pretty easy.
You need to add the code to a button, link or body part of your HTML.
If you would want to log the event when a button is clicked, you would need this code that uses onclick.
<button onclick="window.MC_PIXEL.fireLogConversionEvent('Button click: name here')">
Or when someone clicks a link, we would also use onclick.
<a href="#" onclick="window.MC_PIXEL.fireLogConversionEvent('Link click: name here')">
And to register a page visit, you need this piece of script that uses onload.
<div onload="window.MC_PIXEL.fireLogConversionEvent('Visit - Checkout: Tasty Bread 101')"></div>
And you can use the same for Money Events.
Use case #1: tracking events for your analytics
While analytics in ManyChat is a bit basic, it still gives you a great insight of what subscribers are doing on your website.
You can find your analytics when you go to Dashboard » Analytics.
At the top, you’ll find your revenue, which you can fill with data by using the Money Event.
And below that, you can select a conversion event you want to see the numbers for.
It depends a bit on your funnel what kind of things you want to see here, but here are a few ideas:
- How many subscribers purchased a certain product
- How many subscribers abandonment the cart for a certain product
- How many subscribers visited an important page on your website
- How many subscribers submitted a form on your website
Tons of possibilities, you just need to see what’s handy for you 🙃
And it’s important to mention that you can also trigger conversion events from inside your flows with an action.
Use case #2: tracking purchases
It’s handy to track what your subscribers are purchasing for a couple of reasons.
First, you can actually see what kind of impact Messenger Marketing has in your business compared to email.
Because when you use the Money Events we talked about earlier, you can see exactly in your analytics what kind of revenue you’re generating.
Another reason is that if you know someone purchased a product, you want to prevent sending them any more promotions or other content about it.
Adding codes to our website
The simplest way I’ve found to track purchases on my website is by logging the conversion event as soon as someone visits the purchase confirmation page.
So if I would want to log a conversion event inside ManyChat as soon as someone purchased my Bots That Convert course, I would add this script:
<div onload="window.MC_PIXEL.fireLogMoneyEvent('Sale - Bots That Convert', 1200, 'USD')"></div>
This will add the Sale – Bots That Convert event to ManyChat.
And when that event gets logged, we want to trigger a rule that adds the tag [Sales] Purchase: bots that convert so we know if someone already purchased it.
Creating a rule
To create a rule, go to Automation » Rules.
And then you should create a new one that looks something like this:
So as soon as someone purchases the course, the tag automatically gets added.
And then we can make sure we don’t send messages to this person anymore about that product 🙃
You can do that by using simple conditions like this at the beginning of your flow:
Cool, hu? 🙃
Use case #3: page tracking
This is something I’m really excited about.
With the ManyChat Pixel, we know exactly when the subscriber visits an important page.
All you have to do, is add this script to the page you want to track:
<div onload="window.MC_PIXEL.fireLogConversionEvent('Visit - Checkout: Page Name Here')"></div>
And then, based on that, you can trigger rules to add tags or send flows:
This really unlocks an unlimited amount of posibilities.
You could tag what kind of articles people are reading on your website, so you know what interests or struggles they have.
Or you could send a message to people who abandonment the cart, which I’ll explain in the next use case.
Use case #4: abandonment cart
For this, we’re going to use page tracking.
Basically, we’re going to set up an event when someone visits your checkout page.
And another event for your success page.
Note: This method is great if you sell digital products as they most often have different checkout & success pages, but you probably need a different approach for big webshops that use one checkout page & one success page.
Adding codes to your website
So first, I’ll add this code to my checkout page for Bots That Convert:
<div onload="window.MC_PIXEL.fireLogConversionEvent('Visit - Checkout: Bots That Convert')"></div>
And this to my unique purchase confirmation page for Bots That Convert:
<div onload="window.MC_PIXEL.fireLogMoneyEvent('Sale - Bots That Convert', 1200, 'USD')"></div>
So now, when someone visits the checkout page, the event Visit – Checkout: Bots That Convert will be logged.
And when they complete the checkout, the event Sale: Bots That Convert [Expert] will be logged.
So when the first event is logged, but the second one is not, we know that the subscriber abandonment the cart.
Those subscribers, we want to send a message in Messenger to ask if they maybe have any questions.
That means we need to create a Flow in ManyChat and create two rules that automatically add tags when these events are logged.
First, we create a rule that automatically adds a tag to subscribers that purchased the course.
To create a new rule, go to Automation » Rules.
We’ll be using this tag later in our flow to check if we should send a message or not.
Then, we create a new flow.
Just add a text block with something random in it, we’ll edit this later.
Then, we create another rule that triggers this flow when the visit event is logged:
It’s important to set it to “Perform these actions once per user“
Otherwise, the flow will trigger multiple times if someone visits the page multiple times 😅
Now, we create our flow.
Abandonment cart flow creation
We first to wait for 30 minutes with a smart delay to give the subscriber some time to checkout.
And after those 30 minutes, we check if the subscriber has the purchase tag that would be automatically added with the rule we created earlier if the subscriber visited the purchase confirmation page.
If the subscriber has the tag, we simply stop the flow.
If the subscriber does not have the tag, we know the subscriber abandonment the cart & we want to continue the flow.
We first go to another condition, in which we check if the subscriber engaged within the last 24 hours to comply to the Facebook Platform Policies.
If there was no interaction in the last 24 hours, we stop the flow because we’re not allowed to send a message in Messenger.
If you like, you could send an email or SMS instead.
But to keep this guide simple, we stick to Messenger only.
If there was interaction in the last 24 hours, check with another condition if they didn’t engage with our bot in the last 15 minutes to prevent disrupting any current conversations.
If there was very recent interaction, we want to wait for another 30 minutes.
So we simply go back to the 30-minute smart delay we created earlier:
But if there was no very recent interaction, we continue to a text block & send our abandonment cart message:
So we know, that only people get this message who;
- Visited the checkout page.
- But did not purchase.
- Interacted within the 24-hour messaging window.
- Are not currently talking to the bot or someone from support.
And that’s how you can make the abandonment cart work by using the ManyChat Pixel.
It seems a bit complicated, but it’s pretty fast to setup.
Over to you
Now I would like to hear from you.
What are you going to use the ManyChat Pixel for?
Or do you maybe have any questions about the pixel?
Whatever it is, let me know in the comments below.