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
-
Click Search Gallery
-
Find Facebook Pixel by facebookarchive
- Click Add to workspace
Setup Pageview Tracking
- 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)
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.
- Create a new Tag called
Meta Pixel - Pageviews
. - In Tag Configuration, choose the tag Facebook Pixel which will be found under Custom
- Add your Meta Pixel ID.
- For Event Name, select Standard > PageView.
- Under Triggering, select the trigger All Pages
- Click Save
A properly setup Meta Pixel Pageview Tag should look like this:
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.
- On the left-hand side of the Google Tag Manager Workspace, navigate to Variables
- Under User-Defined Variables, create a new Variable named
dlv - ecommerce.value
- In Variable Configuration select
Data Layer Variable
under Page Variables - Set the Data Layer Variable name to be
ecommerce.value
. This needs to be the exact name of the variable, and is case sensitive. - Click Save
A properly setup Meta Pixel Order Value Variable should look like this:
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.
- Under Variables > User-Defined Variables, create a new Variable named
JS - Fire Meta Purchase
- In Variable Configuration, select
Custom JavaScript
under Page Variables. - 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;
}
}
- Click Save
Step 3: Create the Purchase Trigger
- Create a new Trigger called
Spektrix Transaction
. - Select Custom Event as the Trigger type.
- Enter
Spektrix Transaction
as the event name. This needs to be the exact name of the event, and is case sensitive. - Select Some Custom Events for the trigger to fire on.
- Set the conditions for the trigger
{{JS - Fire Meta Purchase}} equals true
- Save.
A properly setup Meta Pixel Purchase Trigger should look like this:
Step 4: Create the Purchase Tag
- Create a new Tag
Meta Pixel - Purchase
- In Tag Configuration, choose tag type ‘Facebook Pixel’ under ‘Custom’.
- Add your Meta pixel ID.
- For Event Name, select Standard > Purchase.
- Expand the Object Properties section, click ‘Add Row’ twice and enter:
Property Name | Value |
---|---|
currency | The currency your process orders in 3-letter ISO 4217 format, e.g., GBP , USD , CAD , EUR , AUD |
value | The name of the variable you set up earlier in Step 1, e.g., {{dlv - ecommerce value}} |
- Set the trigger to be the custom event
Spektrix Transaction - Meta
. - Save
A properly setup Meta Pixel Purchase Tag should look like this:
Setup Purchase Tracking for Specific Items
- 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)
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.
- On the left-hand side of the Google Tag Manager Workspace, navigate to Variables
- Under User-Defined Variables, create a new Variable named
dlv - ecommerce.value
- In Variable Configuration select
Data Layer Variable
under Page Variables - Set the Data Layer Variable name to be
ecommerce.value
. This needs to be the exact name of the variable, and is case sensitive. - Click Save
A properly setup Meta Pixel Order Value Variable should look like this:
Step 2: Create the Items Array Variable
This Variable will access the individual items in the Data Layer.
- Create a new Variable named
ee items
. - In Variable Configuration select
Data Layer Variable
. - Set the Data Layer Variable name to be
ecommerce.items
. - Save
A properly setup Meta Pixel Items Array Variable should look like this:
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.
- Create a new Variable named
ee item_id
. - In Variable Configuration select
Custom JavaScript
. - 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;
}
- Save
Step 4: Create an Item Specific Trigger
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.
- 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:
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
.
- Using the numeric ID, determine the Trigger Value using the below formats:
Item Type | Format to Use in Trigger | Example Item ID | Example Trigger Value |
---|---|---|---|
Event Ticket | T[eventID]I | Event ID = 82811 | T82811I |
Merchandise | M[itemID]- | Merchandise ID = 200 | M200- |
Donation | D[itemID], | Donation ID = 7808 | D7808, |
- Create a new Trigger named
Spektrix Transaction - {item/event}
e.g.,Spektrix Transaction - Aladdin
. - In Trigger Configuration select
Custom Event
. - Enter
Spektrix Transaction
as the event name. - Select Some Custom Events.
- Set criteria to be
ee item_id > contains > [formatted item ID]
e.g.,T82811I
- 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
- Create a new Tag
Meta Pixel - Purchase - {item}
e.g.,Meta Pixel - Purchase - Aladdin
. - In Tag Configuration, choose tag type
Facebook Pixel
. - Add the Meta Pixel ID.
- For Event Name, select Standard > Purchase.
- Expand Object Properties, click Add Row twice and enter:
Property Name | Value |
---|---|
currency | The currency your process orders in 3-letter ISO 4217 format, i.e. GBP , USD , CAD , EUR , AUD |
value | {{dlv - ecommerce value}} |
- Set the trigger to be
Spektrix Transaction - {item}
. - Save
A properly set up Meta Pixel Item Specific Purchage Tag should look like: