skip to Main Content

ManyChat Pixel: 4 Awesome Use Cases

Max van Collenburg By Max van Collenburg

At the end of January in 2020 ManyChat released something really cool: the ManyChat Pixel 🙌

With the 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.

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.

ManyChat Pixel Script

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

But..

..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.

You can do that with a smart tool like Google Tag Manager, or by just simply only adding the pixel javascript to pages where you actually are going to use 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')

Easy, right?

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')">
<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>

That’s it!

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:

Add purchase tag to contact

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:

Check if subscriber did not purchase course with a condition at the beginning of your flow in ManyChat

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:

Trigger a rule based on a conversion event

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.

Creating rules

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.

ManyChat Pixel: add a tag when money event is triggered

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:

ManyChat Pixel: start flow when page is visited

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.

30 minute smart delay

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.

Condition to check purchase tag

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.

Check messaging window segment

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.

Check with a condition in ManyChat if there was no recent interaction

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:

Go back to smart delay in ManyChat flow

But if there was no very recent interaction, we continue to a text block & send our abandonment cart message:

Abandonment cart message by using the manychat pixel

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

That’s it!

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.

This Post Has 6 Comments
  1. Hey max, as you knows majority of your subscribers are visual learners.

    I would rather you create 2 min beautiful video rather than text; my brain doesn’t connect with text but rather images well 🙂

    Love your work mate!

    cheers

    1. Max van Collenburg says:

      Hey Leonard! I’m working on a video tutorial about the ManyChat Pixel 🤗

  2. Danny Young says:

    Hey Max, awesome article. My question is – if I am running a funnel to launch a product, and I have traffic coming into the funnel from different places (Facebook ads, email list, ManyChat) – will the pixel only track data from people who have clicked from ManyChat?

    Or if they come from the email list, but they are also a ManyChat subscriber, I guess it will track this back into ManyChat as well?

    What I’d like to do is report with certainty to a client that X number of purchases have come directly from the ManyChat bot.

    Hope that makes sense, and keep up the awesome work!

    1. Max van Collenburg says:

      Hey Danny! Good question!

      I think a subscriber must have clicked a link to the website at least once, so ManyChat can place a cookie in their browser to recognize them in the future.

      So after they visited the website through your bot at least once, ManyChat will recognize them when they click a link inside an email next time (if it’s the same device).

      I hope that helps! 🙂

  3. Andrey Krastev says:

    Hi Max! How I can use track pixel to click a link? Where to insert code for tracking?

    1. Max van Collenburg says:

      Hey Andrey! You have to use this code to trigger events when someone clicks a link on your website.

Leave a Reply

Your email address will not be published. Required fields are marked *