Adding Meta Pixel support to the Embedded Storefront

Using the Moonbase Embedded Storefront is a great way to integrate all the e-commerce features you need into your website, and to take full advantage of its capabilities, you should enrich your own analytics with actions taken by your customers.

This tutorial assumes you are using the Meta Pixel script to integrate your Meta Business Suite analytics capabilities into your website.

Event handling

Analytics are all about capturing events based on customer actions, and in the case of the Embedded Storefront, you can easily attach event listeners to the module:

Moonbase.on('checkout-completed', event => console.log('Purchase completed:', event.order))

If you are importing the embedded storefront using a script tag, be sure to add this event listener registration after the configuration call.

The events emitted contain rich details about the context of the purchase and customer, but is not in the exact same format as Meta expects it to be. So to make it work with the Meta Pixel, we need a small step to transform the data.

Setting up the listeners

We recommend setting up at least the following three event listeners:

added-to-cart
checkout-initiated
checkout-completed

These capture the most important touch-points of your customer journey, and will grant you a lot of insights into the efficacy of your marketing.

You can set them up like this:

<script type="module" src="https://assets.moonbase.sh/storefront/moonbase.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
        Moonbase.setup('https://demo.moonbase.sh')

        Moonbase.on('added-to-cart', event => {
            console.log('added-to-cart:', event)
            fbq('track', 'AddToCart', {
                currency: event.currency,
                value: event.item.price[event.currency] * event.item.quantity,
                content_ids: [event.item.product ? event.item.product.id : event.item.bundle.id],
                content_name: event.item.product ? event.item.product.name : event.item.bundle.name,
                content_type: 'product',
            })
        })

        Moonbase.on('checkout-initiated', event => {
            console.log('checkout-initiated:', event)
            fbq('track', 'InitiateCheckout', {
                currency: event.order.currency,
                value: event.order.total.due.amount,
                num_items: event.order.items.length,
                content_ids: event.order.items.map(item => item.product ? item.product.id : item.bundle.id),
                contents: event.order.items.map(item => ({
                    id: item.product ? item.product.id : item.bundle.id,
                    name: item.product ? item.product.name : item.bundle.name,
                    discount: item.appliedDiscount ? item.appliedDiscount.total[event.order.currency] : undefined,
                    price: item.price[event.order.currency],
                    quantity: item.quantity,
                }))
            })
        })

        Moonbase.on('checkout-completed', event => {
            console.log('checkout-completed:', event)
            fbq('track', 'Purchase', {
                currency: event.order.currency,
                value: event.order.total.due.amount,
                num_items: event.order.items.length,
                content_ids: event.order.items.map(item => item.product ? item.product.id : item.bundle.id),
                contents: event.order.items.map(item => ({
                    id: item.product ? item.product.id : item.bundle.id,
                    name: item.product ? item.product.name : item.bundle.name,
                    discount: item.appliedDiscount ? item.appliedDiscount.total[event.order.currency] : undefined,
                    price: item.total.due.amount,
                    quantity: item.quantity,
                }))
            })
        })
    })
</script>

In the case you are using the module in a JavaScript application, you can simply call the event listener registration directly without adding a script tag.

Back to articles

Thursday, February 20, 2025

Adding Meta Pixel support to the Embedded Storefront

Event handling

Setting up the listeners

Start selling through Moonbase