TrackingAcademyContact

WooCommerce Facebook Pixel: Initiate Checkout Ecommerce using DataLayer & Google Tag Manager

by ShahzadaAliHassan - 7th June 2024
Facebook Pixel
Google Tag Manager
WooCommerce
Ecommerce Tracking
Initiate Checkout

Welcome back! If you're new here, my name is Hassan, and I've helped over 1,000 clients and 25 different agencies configure Facebook Pixel on their WooCommerce stores using Google Tag Manager.

In this guide, I'm going to show you how to configure the Facebook Pixel's Initiate Checkout event on a WooCommerce store using Google Tag Manager. This is crucial for tracking when a user moves from the cart page to the checkout page and starts filling out their information.

Why Track the Initiate Checkout Event?

Tracking the Initiate Checkout event helps you see how many users are viewing your products and then proceeding to the checkout step. This is vital for understanding customer behavior and optimizing your Facebook Ads for better targeting and retargeting.

Who is This Guide For?

  1. Small Business Owners: Want to track the initial checkout event on their ads manager.
  2. Digital Marketers: Need to configure this event for their clients.
  3. Freelancers: Working on projects for clients on platforms like Upwork and Fiverr.

What This Guide Covers

  1. Setting up Google Tag Manager on all your website pages.
  2. Configuring the Facebook Pixel configuration tag.
  3. Adding the necessary data layers.
  4. Creating the Initiate Checkout event.

Prerequisites

Section 1: Adding Google Tag Manager Container to Your Website

Step 1: Install and Activate GTM for WordPress Plugin

  1. Log in to your WordPress Dashboard.
  2. Navigate to Plugins > Add New.
  3. Search for "GTM4WP" (Google Tag Manager for WordPress by Thomas Geiger).
  4. Click Install Now and then Activate the plugin.
  5. Refresh the page after activation to see the new settings option.

Step 2: Configure the GTM Container ID

  1. Go to Settings > Google Tag Manager.
  2. Enter your Google Tag Manager Container ID.
    • You can find this ID by logging into Google Tag Manager and copying the container ID from your workspace.
  3. Save Changes.
  4. Ensure the container code is active by refreshing the settings page and checking the status.

Step 3: Verify GTM Container Installation

  1. Click on the Preview button in your Google Tag Manager workspace.
  2. Open your website and ensure the GTM container is firing on all pages.
  3. Use the Tag Assistant extension to verify that the GTM container is working correctly.

Section 2: Configuring Facebook Pixel Tag

Step 1: Install Facebook Pixel Tag Template

  1. Go to Templates in your Google Tag Manager workspace.
  2. Click on Search Gallery.
  3. Search for "Facebook Pixel" and select the template created by Facebook.
  4. Add it to your workspace.

Step 2: Create the Facebook Pixel Configuration Tag

  1. Go to Tags > New.
  2. Select the Facebook Pixel template.
  3. Enter your Facebook Pixel ID.
    • You can find this in your Facebook Events Manager under Data Sources.
  4. Set the Trigger to "All Pages".
  5. Save and name your tag "Facebook Pixel Configuration".

Step 3: Verify Facebook Pixel Tag

  1. Click on the Preview button in Google Tag Manager.
  2. Open your website and ensure the Facebook Pixel is firing.
  3. Use the Facebook Pixel Helper extension to verify that the PageView event is firing correctly.
  4. Check in the Facebook Events Manager under the Test Events tab to ensure data is being received.

Section 3: Configuring the Data Layer

Step 1: Enable E-commerce Tracking

  1. Go to WooCommerce > Settings.
  2. Navigate to the Integration tab.
  3. Enable "Track E-commerce events".
  4. Save Changes.

Step 2: Verify Data Layer Configuration

  1. Go to your website's cart page.
  2. Open the Developer Tools in your browser (usually F12 or right-click > Inspect).
  3. Check the data layer to ensure e-commerce events like begin_checkout are firing.

Section 4: Creating the Initiate Checkout Event

Step 1: Create Data Layer Variables

  1. Go to Variables in Google Tag Manager.
  2. Create New User-Defined Variables for the following:
    • ecommerce.value (name it dlv - ecommerce.value)
    • ecommerce.currency (name it dlv - ecommerce.currency)
    • ecommerce.items (name it dlv - ecommerce.items)

Step 2: Create Facebook Parameter Generator Variables

  1. Go to Templates in Google Tag Manager.
  2. Search Gallery for "Facebook Parameter Generator".
  3. Add it to your workspace.

Step 3: Map Data Layer Variables to Facebook Parameters

  1. Create New Variables using the Facebook Parameter Generator template.
  2. Map the data layer variables (ecommerce.items, ecommerce.value, ecommerce.currency) to the corresponding Facebook parameters.

Step 4: Create the Initiate Checkout Tag

  1. Go to Tags > New.
  2. Select the Facebook Pixel template.
  3. Set the Event Name to "InitiateCheckout".
  4. Add the mapped variables (Value, Currency, Contents, Content IDs, Content Name, Num Items) to the tag configuration.
  5. Set the Trigger to a Custom Event with the name begin_checkout.
  6. Save and name your tag "Facebook Pixel - Initiate Checkout".

Step 5: Verify Initiate Checkout Event

  1. Click on the Preview button in Google Tag Manager.
  2. Go to your website's cart page and proceed to the checkout page.
  3. Use the Facebook Pixel Helper extension to ensure the InitiateCheckout event is firing.
  4. Check the Facebook Events Manager under the Test Events tab to confirm the event data is being received correctly.

Final Steps: Publish and Export Configuration

  1. Submit and Publish Changes in Google Tag Manager.
  2. Export the Container Configuration:
    • Go to Admin > Export Container.
    • Save the JSON file.

Bonus section

If you prefer not to manually configure everything, you can download the pre-configured container JSON file provided in the video description and import it into your Google Tag Manager workspace.

Import the Container:

  1. Go to Admin > Import Container.
  2. Select the JSON file.
  3. Choose to merge or overwrite the existing container.

Conclusion

By following these steps, you'll have successfully configured the Facebook Pixel Initiate Checkout event on your WooCommerce store. This setup allows you to track and optimize user behavior effectively, enhancing your ad targeting and retargeting efforts.

Next Steps: If you want to learn how to track the Add Payment Info event, click on the next video [here].

Thank you for watching! If you have any questions or need further assistance, feel free to leave a comment or reach out through my website. Happy tracking!