How To Use the ManyChat Pixel

In this tutorial, I will explain how you can use the ManyChat Pixel on your website to track conversions and send them back to ManyChat.

I will show you:

• How you can add the ManyChat Pixel to your website
• How to Track a Conversion Event on your website
• How to Measure a Money Event on your website
• How to Create an Automatic Rule based on a Conversion Event

Let’s dive in!

What is the ManyChat Pixel?

The ManyChat Pixel is a piece of code that you can add to your website to measure conversions.

For example, when someone comes from your chatbot, goes to your website and visits a page, you can measure this.

And this will be sent back to ManyChat, so you can see it in the ManyChat analytics.

 

How to install the ManyChat Pixel on your website

If you are logged into ManyChat, go to Settings –> Pixel, here is where you find the code of your ManyChat Pixel:

Now, we need to add this code to your website. I will show you how you can do this on a WordPress website.

By the way, if you are not familiar with adding code to your website, I highly recommend hiring a developer to do this. On Fiverr, you already have developers that can do this for as little as $5.

So, if you go to the back-end of your WordPress website, you need to click on Plugins, search for “Install Headers and Footers” and click on Install now and Activate:

Then, if you go to Settings –> Insert Headers and Footers, we need to paste our ManyChat Pixel code under the “Scripts in Header” section:

The only thing left is to click on Save.

And that’s how you add the ManyChat Pixel to your website.

Now let’s cover what types of events we can track with it.

 

What types of events can you track with the ManyChat Pixel?

With the ManyChat Pixel, you can measure two kinds of events:

1. Conversion events
2. Money events

Conversion events are used when someone clicks a button or visits a page. So this is only the name of the conversion, nothing else.

Money events are used when money is involved, for example, when someone purchased a product from your store.

 

How to Track a Conversion Event with the ManyChat Pixel

Let’s see how we can track the click on a button with a Conversion Event.

So, I just created a post in ManyChat with the following code in it:

<a href="#" onclick="window.MC_PIXEL.fireLogConversionEvent('Click on a button')">Button</a>

What this will do, is every time a user clicks this button, the ManyChat Pixel will fire the event “Click on a button” in your ManyChat dashboard.

And this eventually will go back to your ManyChat dashboard, where you can find it under Home –> Metrics –> Conversion events:

By the way, the Conversion Event will just automatically appear in your ManyChat Analytics. You don’t have to manually create this conversion event under Settings.

 

How to Track a Money Event with the ManyChat Pixel

With the Money Event, we can track the actual event but also how much money we got from that event.

Now, let’s track a Money Event with the ManyChat Pixel.

The most interesting event we can track in a webshop is when someone bought a product from your webshop.

So let’s do this in WooCommerce. I already created a dummy WooCommerce webshop with some products in it.

What you need to do, is go to Appearance –> Theme Editor –> functions.php and add the following code:

// Add scripts to wp_head()
function child_theme_header_script() {
if( is_wc_endpoint_url( "order-received" ) ) {
$order_id = wc_get_order_id_by_order_key( $_GET['key'] );
$order = wc_get_order( $order_id );
$total = $order->get_total();
?>

<script>
window.addEventListener('load', function () {
window.MC_PIXEL.fireLogMoneyEvent('Order', <? echo $total; ?>, 'USD')
});
</script>

<?
}
}
add_action( 'wp_head' , 'child_theme_header_script' );

NOTE: If you are not familiar with adding code to your WordPress theme, I highly recommend hiring a developer for this (it will only take him a matter of minutes)

What this code will do, is every time the Thank You page is loaded, the event ‘Order’ will be triggered, which consists of the amount of money (of your order) and a currency.

By the way, you can change the currency to other currencies, such as ‘EUR’ for Euro.

And when this event is triggered, you can find it in your ManyChat analytics under Home –> Metrics:

 

Create an automatic rule with the ManyChat Pixel

When you’ve set up one or multiple events, we can use them in a ManyChat rule.

A rule in ManyChat consists of a trigger and an action. ManyChat just will wait for a certain trigger (for example, a specific date) and then do something (the action).

Now, we can set the trigger to the Money Event and automatically send a message when the event is triggered. You only need to go to Automation –> Rules, set the Trigger to “Log Conversion Event” and the Action to “Start a flow”:

This rule means that if someone ordered a product at your store, the ManyChat flow “Ebook: Signup flow” will be sent to that user.

Moreover, you can do a whole lot of other things with ManyChat rules, such as subscribing a user to a sequence, triggering Zaps and notifying admins.

P.S. If you use a rule that sends a message to your user, make sure the user is inside the 24-hour window.

 

Pixel only works with buttons

There is one important thing left: the ManyChat Pixel only works with buttons.

So, it only works when someone clicks on a button in your ManyChat chatbot. It does not work if you add a URL to your website in plain text.

 

Now It’s Your Turn

And that’s how you track website events with the ManyChat Pixel.

Now I have a question for you: Do you already track conversions coming from your ManyChat chatbot?

Let me know by leaving a comment below!