Setting Up Meta Pixel for BOSS IT Online Ordering

This document provides a comprehensive guide for QSRS who need to set up Meta Pixel for tracking online ordering. It includes what to provide to the software provider, examples of Meta Pixel tags, and an explanation of how Meta Pixel and tags work.

What is Meta Pixel?

Meta Pixel (formerly Facebook Pixel) is a piece of code that you place on your website to collect data that helps you track conversions from Meta ads, optimise ads, build targeted audiences for future ads, and remarket to people who have already taken some kind of action on your website.

What is a Tag?

A tag is a snippet of JavaScript code included on your website to send information about user interactions to third parties, like Meta. These interactions (or events) can include actions like viewing a page, clicking a button, or completing a purchase.

What to Provide to BOSS IT

To ensure the successful integration of Meta Pixel with your BOSS IT online ordering system, you'll need to provide us with specific information and access. Here's what you need to do:

1. Create and Configure Meta Pixel

  1. Log in to Meta Business Suite:

  2. Navigate to Events Manager:

    • From the main menu, select "Events Manager".
  3. Create a Pixel:

    • Click "Connect Data Sources", select "Web", then choose "Meta Pixel" and click "Connect".
  4. Configure Pixel:

    • Enter a name for the Pixel that reflects your business and store locations.
    • Example: FastFoodDelight_MainPixel
    • Click "Continue".

2. Obtain Pixel Code

  1. Get the Pixel Code:
    • In Events Manager, select the Pixel you created. Go to the "Set Up" tab and choose "Install Pixel". Copy the provided base code.

3. Provide Information to Your Software Provider

  1. Pixel ID:

    • Send the Pixel ID to your software provider. The Pixel ID is a string of numbers located within the code snippet:
      html
      Copy code
      fbq('init', 'YOUR_PIXEL_ID');
  2. Store Identifiers:

    • Provide a list of store identifiers (e.g., store names, IDs, or regions) to track events by store location.
  3. Key Events to Track:

    • Identify and communicate the key events you want to track. Examples include Add to Cart, Purchase, and Complete Registration.

We have provided a sample email below for you to amend for your specific requirements 

 

 

Example Meta Pixel Tags

Below are examples of Meta Pixel tags that you can use to track various events on your online ordering site:

  1. PageView: Tracks when a page is viewed.

    html
    Copy code
    fbq('track', 'PageView');
  2. ViewContent: Tracks when a piece of content, such as a product page, is viewed.

    html
    Copy code
    fbq('track', 'ViewContent');
  3. Search: Tracks when a search is performed.

    html
    Copy code
    fbq('track', 'Search');
  4. AddToCart: Tracks when an item is added to a shopping cart.

    html
    Copy code
    fbq('track', 'AddToCart', {
    content_name: 'Product Name',
    content_category: 'Category Name',
    content_ids: ['1234'],
    content_type: 'product',
    value: 9.99,
    currency: 'USD',
    store_id: 'NYC_Store'
    });
  5. InitiateCheckout: Tracks when the checkout process is started.

    html
    Copy code
    fbq('track', 'InitiateCheckout', {
    store_id: 'NYC_Store'
    });
  6. AddPaymentInfo: Tracks when payment information is added during the checkout process.

    html
    Copy code
    fbq('track', 'AddPaymentInfo', {
    store_id: 'NYC_Store'
    });
  7. Purchase: Tracks when a purchase is completed.

    html
    Copy code
    fbq('track', 'Purchase', {
    value: 19.99,
    currency: 'USD',
    content_ids: ['1234'],
    content_type: 'product',
    num_items: 1,
    store_id: 'NYC_Store'
    });
  8. CompleteRegistration: Tracks when a registration form is completed.

    html
    Copy code
    fbq('track', 'CompleteRegistration', {
    store_id: 'NYC_Store'
    });

Helpful Information

How Meta Pixel Works

Meta Pixel works by loading a small JavaScript library that, when executed, collects information about the visitor and their actions on your website. This information is then sent to Meta, where it is used to track conversions and optimise ad targeting.

Benefits of Using Meta Pixel

  1. Track Conversions: See how users interact with your website after viewing your Meta ads.
  2. Optimise Ad Delivery: Use data collected from the Pixel to show your ads to the people who are most likely to take the desired action.
  3. Create Custom Audiences: Build audiences of people who have interacted with your website for retargeting.
  4. Gain Insights: Access detailed analytics about how users are interacting with your website.

Implementation Tips

  • Consistency: Use consistent naming conventions for events and parameters to make data analysis easier.
  • Testing: Use the Meta Pixel Helper Chrome extension to test and verify your Pixel implementation.
  • Documentation: Keep detailed documentation of the Pixel IDs and event tracking setup for future reference.

Conclusion

By following the steps outlined in this document, QSR franchise owners can successfully set up Meta Pixel on the BOSS IT online ordering systems. This will enable detailed tracking of user interactions, leading to better insights and more effective advertising strategies. For any issues or further assistance, refer to Meta’s official documentation or contact support.

 

 

 

Email Template to Developer for Meta Pixel Integration. Please amend to your own unique details. 


Subject: Meta Pixel Integration for FastFoodDelight Online Ordering

Dear BOSS IT,

We are looking to integrate the Meta Pixel on our online ordering website for better tracking and optimisation of our marketing efforts. Below are the details you will need for the integration:

Meta Pixel Details

Pixel Name: FastFoodDelight_MainPixel 
Pixel ID: 123456789012345

Store Identifiers

We would like to track user interactions across our different store locations. Here are the store identifiers:

  • NYC Store: NYC_Store
  • LA Store: LA_Store
  • Chicago Store: Chicago_Store
  • Miami Store: Miami_Store

Key Events to Track

Please implement the following events with the respective custom parameters to track user actions:

  1. PageView

    html
    Copy code
    fbq('track', 'PageView', { store_id: 'STORE_ID' });
  2. ViewContent

    html
    Copy code
    fbq('track', 'ViewContent', { store_id: 'STORE_ID' });
  3. Search

    html
    Copy code
    fbq('track', 'Search', { store_id: 'STORE_ID' });
  4. AddToCart

    html
    Copy code
    fbq('track', 'AddToCart', {
    content_name: 'Product Name',
    content_category: 'Category Name',
    content_ids: ['1234'],
    content_type: 'product',
    value: 9.99,
    currency: 'USD',
    store_id: 'STORE_ID'
    });
  5. InitiateCheckout

    html
    Copy code
    fbq('track', 'InitiateCheckout', { store_id: 'STORE_ID' });
  6. AddPaymentInfo

    html
    Copy code
    fbq('track', 'AddPaymentInfo', { store_id: 'STORE_ID' });
  7. Purchase

    html
    Copy code
    fbq('track', 'Purchase', {
    value: 19.99,
    currency: 'USD',
    content_ids: ['1234'],
    content_type: 'product',
    num_items: 1,
    store_id: 'STORE_ID'
    });
  8. CompleteRegistration

    html
    Copy code
    fbq('track', 'CompleteRegistration', { store_id: 'STORE_ID' });

Additional Instructions

  • Please replace STORE_ID with the appropriate store identifier for each event based on the user's location or interaction context.
  • Ensure that the Meta Pixel code is placed in the <head> section of the HTML on all pages of our online ordering site.
  • Verify the implementation using the Meta Pixel Helper Chrome extension to ensure all events are firing correctly.

Example Meta Pixel Base Code

Here is the base Meta Pixel code to be included in the <head> section of our website:

html
Copy code
<head>
<!-- Other head content -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '123456789012345');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=123456789012345&ev=PageView&noscript=1"
/></noscript>
</head>

Thank you for your assistance with this integration. Please let me know if you need any further information or clarification.

Best regards,