Advantages of Headless Ecommerce

Headless Ecommerce allows merchants to easily customize the frontend pages on an SSR (Server-Side Rendering) framework while using Shopify only as a backend service. Its advantages include:

1. Personalized User Interface: Merchants have full control over the creative design of the store pages and can deliver content flexibly across various platforms, such as websites, applications, and IoT devices.
2. Improved Website Performance: Typically, headless solutions are several times faster than Shopify's native platform.
3. Enhanced SEO Customization: Headless solutions offer better flexibility for SEO optimization, allowing for more tailored approaches.

Challenges in User Event Tracking and Marketing Analysis for Headless Ecommerce

Since headless solutions utilize highly customizable and flexible technologies, Shopify's native event tracking cannot provide adequate personalized support. Many developers lack sufficient experience in handling Martech (marketing technology), which can lead to issues in event tracking. This can result in inaccurate or incomplete transmission of user behavior data from the website to media platforms like Meta, leading to decreased ad effectiveness. Additionally, the inability to accurately track user behavior on the website can lead to confusion in marketing analysis. Most user behavior tracking products available in the Shopify App Store are not compatible with headless setups.

Convbox's Out-of-the-Box Solution for Headless Ecommerce

To address these challenges, Convbox offers an out-of-the-box solution for headless ecommerce, allowing you to quickly deploy a best practice setup for user event tracking and marketing analytics with minimal coding. For details on how Convbox's solution works, please refer to the help documentation.

Setting Up Convbox's Shopify Headless Solution

Step 1: Install the Convbox Tracking (Omnitrack) App

1. Visit the Shopify App Store and install the public Convbox Tracking (Omnitrack) app.
2. The Convbox Analysis attribution product is currently available as a private app. Please contact your Convbox account manager to assist with the trial application and subscription.
3. Complete the basic setup of Convbox as detailed in the Convbox installation guide. Please note that in Step 12: Disabling Facebook Pixel, you need to set the Pixel status to "Offline."

Step 2: Embed Convbox's JS-SDK for Headless Ecommerce in Your Frontend

Based on the general headless solution provided by Convbox, contact your technical team to embed the SDK code into your website. Provide your Gmail address to the Convbox account manager to access the general solution for headless setups:
https://docs.google.com/document/d/1X26c8qRCLbQbKoevGq-aGrOuUxyKx7HiQy8-Z_R1XYo/edit?usp=sharing

Step 3: Remove Residual Code from Previously Used Tracking Apps

After completing the above steps, you need to remove any residual code from other tracking apps used prior to installing Convbox. This prevents multiple apps from sending duplicate website events to marketing platforms. For example, if you have Facebook tracking code, ensure you remove all previous instances as shown in the image below.

Step 4: Check and Remove Events Set in Facebook Events Manager

It is possible that events were set up in Facebook Events Manager using Facebook's "Event Setup" feature, which can cause these events to duplicate the website events sent to Facebook . Therefore, it is necessary to check if such events exist and remove them if they do.

Steps to Check and Operate:

1.Visit Facebook Events Manager, find the Pixel installed on your website, click on Settings, and then find the Open Event Setup Tool button. Click this button.



2.In the popup, enter your website's address and then click the Open Website button.



3.After opening the website, the Meta Event Setup Tool popup will typically appear in the top left corner of the page. You can browse through each page of the website to check if any events are displayed. If there are, they need to be removed. For example, if you see an Add to Cart event on the product detail page, you need to click the Delete button.



4.After clicking the Delete button, if no events are found on other pages, you can click the Finish setup button and follow the subsequent prompts to confirm the successful deletion of the event.

Step5: Activate Facebook Pixel on Convbox to Collect User Events and Send Back to Facebook

After completing all the previous setup steps, you need to activate the Facebook Pixel in Convbox.

1.Go to Convbox and navigate to the Pixels page. Locate the Pixel. When you hover your mouse over the Pixel ID, an edit button will appear on the right side. Click it to enter the editing page.



2.On the editing page, click the "Go Live" button. In the confirmation pop-up, click "Yes, Go Live" to activate Convbox's feature to collect user events and send them back to Facebook.

Congratulations!

The setup is complete!

Updated on: 19/12/2024