If you are using WooCommerce to sell your products and Manychat to drive traffic to your WooCommerce store, you might be a little frustrated that there is no direct integration between Manychat and WooCommerce.
However you would be pleased to know that Manychat actually works with any sales platform. You just have to know how to integrate it.
Today I am going to show you how to integrate the Manychat Pixel with WooCommerce orders.
What is the Manychat Pixel?
The Manychat Pixel helps you measure leads and sales that come from Manychat flows.
It is a piece of code that you can put on any page of your site, or even site-wide in the header or footer. Once the code is on your site, any clicks from a Manychat flow onto your site with the Manychat Pixel will automatically detect the Pixel.
Once the Pixel is detected, any conversion can be attributed to a Manychat Flow.
The Manychat Pixel is very similar to the Facebook Pixel where it helps you track conversions from Manychat whereas the Facebook Pixel helps you track conversions from Facebook ads.
Get Your Manychat Pixel Code Ready
To get your Manychat Pixel code, go to your Manychat dashboard and select Settings > Pixel > Copy Code to Clipboard:
Let’s use this opportunity to install this code on your WordPress or WooCommerce website.
You want this code in the <head> section of your website. If you don’t know what the <head> section is, don’t worry. I will walk you through how to input this piece of code step by step.
First, in order to easily put code into your website, let’s use a plugin.
In your WordPress Dashboard, go to Plugins > Add New.
Search for PixelYourSite, which is a way to install tracking codes and pixels on your website.
If you don’t have it already. Install it and then Activate it. Once you do, you will see
Set Up Conversion Events
The next thing you want to do is set up your conversion event. Your conversion event can be anything from a contact form submission, a lead generated, or even a purchase!
For the sake of this being a WooCommerce tutorial, I will show you how to create a conversion event for a WooCommerce purchase.
Go to Settings > Conversion Events > +New Conversion Event:
Once you click on +New Conversion Event, a popup window will appear and prompt you to add an Event Title, Event Description and if the Event generates revenue:
You want to give your Event Title a name that is very specific to the conversion. In my case, I am using my Manychat flow to distribute a coupon and my specific event will be when the customer purchases from the website after clicking on my WooCommerce link in the Manychat flow.
So, I will name my Event Title the name of the coupon: “Coupon Conversion Example”
When you have this coupon name, you need to make sure that you type it exactly as the name appears where or whenever you want to activate it.
One thing you might want to do after creating your Conversion Event to is create a rule that automatically tags the person as someone who converted. In my case, I want to automatically add a tag to someone for using the coupon.
To do that, you can use a Manychat Rule.
Set Up A Manychat Rule
To set up a rule, click on Automation > Rules > +Custom Rule:
Once you click on +Custom Rule, you will get to a brand new page where you can set up a rule. A rule is made up of two parts: a trigger action which activates the rule and a resulting action that happens when the rule is activated. It is just like cause a effect.
To automatically tag someone after they activate your Conversion Event, Click on Trigger:
Then select Conversion Event from the list of triggers:
Once you do, you can click on the space where it says “Enter event name” and a list of your Conversion Events will show up.
Select the one that you just created. When you select it, you are basically telling this Manychat Rule to activate when someone activates your Conversion Event on your website.
You can see below that I chose my Coupon Conversion Example conversion event. Next, let’s click on the +Action button so that we can let Manychat automate something for us when someone activates the Conversion Event:
When you click + Action, a list of actions will appear. If you want to do what I am going to do, which is to apply a tag to the person who activates the Conversion Event, then select “Add A Tag.”
I selected the above tag to be applied. After you are done, you can change the tickbox from Draft to Active, then Save.
Your Manychat Rule should apply a tag to anyone who activates the Conversion Event from your Manychat flow.
Install Your Conversion Event On Your WooCommerce Website
The next thing we need to do is to create our own Conversion snippet and put it on the correct page of WooCommerce so that anyone who purchases on WooCommerce will activate the conversion event.
There are two types of conversion snippets: a conversion snippet that doesn’t generate revenue and a conversion snippet that does generate revenue.
If you want to use the conversion snippet that doesn’t generate revenue, it would look like this:
<!– This syntax will fire event after visitor clicks the button –>
<button onclick=”window.MC_PIXEL.fireLogConversionEvent(‘buy_button_clicked’)”>
If you want to use the conversion snippet that does generate revenue, it would look like this:
<!– This syntax will fire event after page is loaded completely –> <body onload=”window.MC_PIXEL.fireLogMoneyEvent(‘my_book_purchased’, 10.7, ‘EUR’)”> … </body>
My conversion generates revenue since people will be purchasing from my WooCommerce site, so I will use the conversion snippet template provided above that also records revenue.
However, I will format it to have my Conversion Event Title, the revenue generated from WooCommerce purchases, and to be USD currency.
For my WooCommerce site, my conversion snippet looks like this:
<!– This syntax will fire event after page is loaded completely –><body onload=”window.MC_PIXEL.fireLogMoneyEvent(‘Coupon Conversion Example’, <?php echo $order->get_total(); ?>, ‘USD’)”>…</body>
You can see that I replaced the Conversion Title with my own, then I put:
<?php echo $order->get_total(); ?>
As the revenue generated. This is a piece of code that pulls the purchase amount from the order. I also changed the EUR currency to USD since this store uses USD currency.
So how can you put this on the correct page on WooCommerce so that revenue records in your Manychat flow?
Well, you need to install this snippet on the WooCommerce thank you page because that is the one page people visit after completing a purchase.
In order to do that, we are going to use a plugin:
In your WordPress dashboard, go to Plugins > Add New. Search for Code Snippets. If you don’t have it already, Install it and then Activate it.
Once it is activated you can see it on the left side panel of your WordPress dashboard. Click on Snippets > Add New.
You can name your snippet as {Your Conversion Name} Manychat Pixel.
Then you can add this code into the Code section:
/**
* Add custom tracking code to the thank-you page
*/
add_action( ‘woocommerce_thankyou’, ‘my_custom_tracking’ );
function my_custom_tracking( $order_id ) {
// Lets grab the order
$order = wc_get_order( $order_id );
/**
* Put your tracking code here
* You can get the order total etc e.g. $order->get_total();
*/
// This is the order total
$order->get_total();
// This is how to grab line items from the order
$line_items = $order->get_items();
// This loops over line items
foreach ( $line_items as $item ) {
// This will be a product
$product = $order->get_product_from_item( $item );
// This is the products SKU
$sku = $product->get_sku();
// This is the qty purchased
$qty = $item[‘qty’];
// Line item total cost including taxes and rounded
$total = $order->get_line_total( $item, true, true );
// Line item subtotal (before discounts)
$subtotal = $order->get_line_subtotal( $item, true, true );
?>
<!– This syntax will fire event after page is loaded completely –><body onload=”window.MC_PIXEL.fireLogMoneyEvent(’50OFFE Online Order’, <?php echo $order->get_total(); ?>, ‘USD’)”>…</body>
<?php
}
}
However you will want to replace the Manychat conversion event with your own conversion snippet.
Once you do that, save the Code Snippet by selecting “Only run on site front-end” and then “Save changes.”
We are at the point now where if someone clicks on your website link from a Manychat flow and they end up purchasing from your WooCommerce site, the revenue will show in your Manychat flow like so:
The last thing you need to do to make this happen is to put a link to your website in your Manychat flow:
Add a link to your website in your manychat flow
Adding a link to your website from any of your Manychat Flows should be very simple.
Go ahead and click into any of your flows that you want to add your website link to. Once you do, you can add a button to any of your messages within your flow like so:
Once you have that implemented to the same website that you just installed your Manychat Pixel and your Manychat Conversion Snippet to, then your flow will start attributing conversions and revenue to the flow.
In Conclusion
So that is how you track conversions and revenue from Manychat to your WooCommerce store.
The one thing I have left to figure out is how I can get the WooCommerce purchase amount into Google Sheets while also matching the Manychat ID of the user.
Would you like me to update if I ever found out?
Comment below so I can update this blog post with new information.
