Skip to main content

Track Pageviews and Purchases in Meta Pixel

The following steps take place in Google Tag Manager and will result in installing a Meta Pixel on Spektrix iframes. Unless otherwise stated, naming conventions of Tags, Triggers, and Variables are up to you; however, for the sake of troubleshooting, we recommend to initially use our suggestions.

Add the Pixel Template

The implementation of Meta Pixel requires the addition of a Google Tag Manager template to your Google Tag Manager workspace.

  • Go to Templates on the left-hand side of your workspace

GTM Templates

  • Click Search Gallery

  • Find Facebook Pixel by facebookarchive

GTM facebookarchive

  • Click Add to workspace

Setup Pageview Tracking

Prerequisites
  • A Google Tag Manager account
  • Your GTM container added to the Spektrix iframes (see “Add a GTM Container to Spektrix iframes”)
  • The Facebook Pixel Template added to your Google Tag Manager workspace
  • Your Meta Pixel ID (from your Meta Business account)
Checklist

By the end of the set up you should have:

  • a Pageview Tag
  • a Data Layer Variable called dlv - ecommerce.value
  • a Variable to avoid Duplicate Transactions called JS - Fire Meta Purchase
  • a Purchase Trigger
  • a Purchase Tag

In order to track pageviews in Meta's platform, we will setup a Meta Pixel Tag.

  1. Create a new Tag called Meta Pixel - Pageviews.
  2. In Tag Configuration, choose the tag Facebook Pixel which will be found under Custom
  3. Add your Meta Pixel ID.
  4. For Event Name, select Standard > PageView.
  5. Under Triggering, select the trigger All Pages
  6. Click Save

A properly setup Meta Pixel Pageview Tag should look like this:

GTM pageviews

Setup Purchase Tracking

The Data Layer provided when a Transaction is confirmed is optimized for use with Google Analytics 4 and not for Meta. In order to make the data compatible with Meta's platform, a more complex Google Tag Manager setup utilizing Variables is required.

Step 1: Create the Order Value Variable

This Variable will pass the Order total to Meta.

  1. On the left-hand side of the Google Tag Manager Workspace, navigate to Variables
  2. Under User-Defined Variables, create a new Variable named dlv - ecommerce.value
  3. In Variable Configuration select Data Layer Variable under Page Variables
  4. Set the Data Layer Variable name to be ecommerce.value. This needs to be the exact name of the variable, and is case sensitive.
  5. Click Save

A properly setup Meta Pixel Order Value Variable should look like this:

GTM ecommerce value

Step 2: Create the Variable to Prevent Duplicate Transactions

Google Analytics will de-duplicate Order information by default but Meta will not. Setting up this Varaible will prevent passing duplicate transactional information to Meta.

  1. Under Variables > User-Defined Variables, create a new Variable named JS - Fire Meta Purchase
  2. In Variable Configuration, select Custom JavaScript under Page Variables.
  3. Paste in the following code:
function() {
var txnId = {{dlv - ecommerce.transaction_id}};
if (!txnId) return false;

var key = 'spektrix_txn_' + txnId;
if (localStorage.getItem(key)) {
return false;
} else {
localStorage.setItem(key, 'true');
return true;
}
}
  1. Click Save

Step 3: Create the Purchase Trigger

  1. Create a new Trigger called Spektrix Transaction.
  2. Select Custom Event as the Trigger type.
  3. Enter Spektrix Transaction as the event name. This needs to be the exact name of the event, and is case sensitive.
  4. Select Some Custom Events for the trigger to fire on.
  5. Set the conditions for the trigger {{JS - Fire Meta Purchase}} equals true
  6. Save.

A properly setup Meta Pixel Purchase Trigger should look like this:

GTM transaction meta

Step 4: Create the Purchase Tag

  1. Create a new Tag Meta Pixel - Purchase
  2. In Tag Configuration, choose tag type ‘Facebook Pixel’ under ‘Custom’.
  3. Add your Meta pixel ID.
  4. For Event Name, select Standard > Purchase.
  5. Expand the Object Properties section, click ‘Add Row’ twice and enter:
Property NameValue
currencyThe currency your process orders in 3-letter ISO 4217 format, e.g., GBP, USD, CAD, EUR, AUD
valueThe name of the variable you set up earlier in Step 1, e.g., {{dlv - ecommerce value}}
  1. Set the trigger to be the custom event Spektrix Transaction - Meta.
  2. Save

A properly setup Meta Pixel Purchase Tag should look like this:

GTM transaction meta

Setup Purchase Tracking for Specific Items

Prerequisites
  • A Google Tag Manager account
  • Your GTM container added to the Spektrix iframes (see “Add a GTM Container to Spektrix iframes”)
  • The Facebook Pixel Template added to your Google Tag Manager workspace
  • A Meta Pixel ID (from an external Meta Business account)
Checklist

By the end of the set up you should have:

  • a Data Layer Variable dlv - ecommerce.value
  • a Data Layer Variable ee items
  • a Data Layer Variable ee item_id
  • an Item Specific Purchase Trigger (for every new item you want to track)
  • an Item Specific Purchase Tag (for every new Meta Pixel provided)

On occasion, you might need to track information on Orders that only contain specific items (and their corresponding information). This tends to be needed if an external company you are working with wants to track the specific items relevant to them. For example, an external producer may want to run Meta adverts for their specific Event and to track conversions from their advert.

The steps below explain what you need to set up in Google Tag Manager so that a Meta Pixel only tracks Transactions that contain Tickets to their Event.

We will begin by creating three User Defined Variables in your Google Tag Manager workspace. Once the Variables are setup, they can be reused in the future if/when you need to send information to a new external Meta Pixel. If the Variables below already exist from previous work in Google Tag Manager, you can skip to Step 4 to setup the Trigger(s).

Step 1: Create the Order Value Variable

This Variable will pass the Order total to Meta.

  1. On the left-hand side of the Google Tag Manager Workspace, navigate to Variables
  2. Under User-Defined Variables, create a new Variable named dlv - ecommerce.value
  3. In Variable Configuration select Data Layer Variable under Page Variables
  4. Set the Data Layer Variable name to be ecommerce.value. This needs to be the exact name of the variable, and is case sensitive.
  5. Click Save

A properly setup Meta Pixel Order Value Variable should look like this:

GTM ecommerce value

Step 2: Create the Items Array Variable

This Variable will access the individual items in the Data Layer.

  1. Create a new Variable named ee items.
  2. In Variable Configuration select Data Layer Variable.
  3. Set the Data Layer Variable name to be ecommerce.items.
  4. Save

A properly setup Meta Pixel Items Array Variable should look like this:

GTM ee items variable

Step 3: Create the Concatenated Item IDs variable

This Variable pulls all the Item IDs from a completed Order, which will allow you to identify the specific items you are looking for.

  1. Create a new Variable named ee item_id.
  2. In Variable Configuration select Custom JavaScript.
  3. Paste in the following code:
function() {
var item_idString = {{ee items}}[0].item_id;
var numItems = {{ee items}}.length;
for(var i=1; i<numItems; i++) {
var nextItemName = {{ee items}}[i].item_id;
item_idString = item_idString + ',' + nextItemName;
}
return item_idString;
}
  1. Save

Step 4: Create an Item Specific Trigger

info

Steps 4 and 5 may be repeated as many times as is required to pass data on different specified items

Set up triggers so that your Purchase Tags only fire when the Transaction contains Tickets for the specific Event.

  1. Identify the specific Item ID in the format required for the Trigger

If you want to track a specific Event, you can find the Event ID in Spektrix by navigating to Admin Interface > Events > [your event] > Basic Details > Event ID:

GTM example of event ID

Alternatively, if you do not have access to the Admin Interface, or would like to track items that are not Event Tickets, use the Spektrix API or the API Lookup tool. When looking the ID up via these methods, they will be much longer than normal: you will only need the numbers from the beginning of the string. For example, if the ID is 50601ARPGPBJPBBJPGRVPTHVCMTBCKDRT you only need 50601.

  1. Using the numeric ID, determine the Trigger Value using the below formats:
Item TypeFormat to Use in TriggerExample Item IDExample Trigger Value
Event TicketT[eventID]IEvent ID = 82811T82811I
MerchandiseM[itemID]-Merchandise ID = 200M200-
DonationD[itemID],Donation ID = 7808D7808,
  1. Create a new Trigger named Spektrix Transaction - {item/event} e.g., Spektrix Transaction - Aladdin.
  2. In Trigger Configuration select Custom Event.
  3. Enter Spektrix Transaction as the event name.
  4. Select Some Custom Events.
  5. Set criteria to be ee item_id > contains > [formatted item ID] e.g., T82811I
  6. Save

This trigger can then be used to fire a tag when and only when a confirmed Order contains Tickets to the specified Event.

Step 5: Create an Item Specific Purchase Tag

  1. Create a new Tag Meta Pixel - Purchase - {item} e.g., Meta Pixel - Purchase - Aladdin.
  2. In Tag Configuration, choose tag type Facebook Pixel.
  3. Add the Meta Pixel ID.
  4. For Event Name, select Standard > Purchase.
  5. Expand Object Properties, click Add Row twice and enter:
Property NameValue
currencyThe currency your process orders in 3-letter ISO 4217 format, i.e. GBP, USD, CAD, EUR, AUD
value{{dlv - ecommerce value}}
  1. Set the trigger to be Spektrix Transaction - {item}.
  2. Save

A properly set up Meta Pixel Item Specific Purchage Tag should look like:

GTM meta pixel purchase item tag