Tracking Iframes

Google Tag Manager

To add snippets of code to iframes you should use Google Tag Manager.

Google Tag Manager (GTM) is a free tool offered by Google. It can be used to add and update website tags (for conversion tracking, site analytics, remarketing, and more, not limited to the Google suite) in one place without having to change the actual code on your website. This makes it easy to gather meaningful data about users visiting your website.

Google Tag Manager is a widely used tool in the marketing industry and there are a number of first and third party resources on what you can achieve with GTM. The tool has been designed so that you can use it without needing access to your website code, allowing marketers to use it without needing a web developer after the initial set up.

This article provides a guide on how you can integrate GTM with your website and Spektrix to gather analytics on the entire patron journey from first visit to checkout. Though the guidance below does not assume knowledge of GTM, you may want to consult these resources and work with an analytics expert for a full picture of how your organization can use and make the most of GTM.

Browse the Partner Directory to find Analytics experts.

How does GTM work

Google Tag Manager helps you manage the many tags, or snippets of code, that are related to your marketing campaign events. Google Tag Manager gives you the ability to add tracking tags to your site to measure the audience, or to personalize, retarget, or conduct search engine marketing initiatives.

Google Tag Manager directly transfers data and events to Google Analytics, Enhanced Ecommerce and other third-party analytics solutions, to produce a clear picture of how well your site, products, and promotions are performing.

Before Google Tag Manager, each bit of tracking on a website required adding new code into the website itself. With GTM, one piece of code, the container, automatically holds all your tags. By adding this container code to each page where you want tags (including your Spektrix iFrames) you’ll be able to add and configure tags for your whole site in one place: the GTM interface.

If this is brand new for you, you might want to reference Google’s glossary (link) to better understand the terms used throughout this document.

How to add your Google Tag Manager container on the Spektrix iframes

From a top level, you’ll need to do the following:

1. Set up GTM and Google Analytics accounts
2. Add the container code to the Spektrix pages

GTM-KL9GK3V & G-F7V05TJ56H

In addition to your Google Analytics ID, you may notice UA-9818873-4, which will be gradually phased out, a GTM container with ID GTM-KL9GK3V and a GA4 property with ID G-F7V05TJ56H. The GTM container and GA4 property is added by Spektrix and is used only for the GA4 integration. This tracking is used to support various business and software functions, including informing about queue management, activity levels that clients are experiencing, and managing large onsales events.

It shouldn't have any impact upon any Analytics tracking you are planning on doing. The GTM container is configured in a way that consent is required for the tag to fire. You can use your consent management platform to configure and manage consent.

Step 1: Set up GTM and Google Analytics accounts

Set up a Google Tag Manager account You should have a Google Tag Manager account to continue this process. To get started, you can follow Google’s installation guide (link) to create the accounts you’ll need. It is possible you already have a Google Tag Manager account.

Step 2: Add the container code to the Spektrix pages

Follow this process until you get your GTM container code, which will look like this:

If you need to find this again, once you’ve created an account you can find this code snippet by clicking on the Container ID within the Workspace section of the GTM website.

This code snippet should be copied onto each page of your website that you want to insert tags into, copying the first part of code into the header of the page and the second part after the opening <body> code as instructed. It is possible this is already done on your website.

You’ll also want to add this code to your Spektrix iframes. To do this, log into your Spektrix system and go to Website Admin > Domain Specific Config. Paste the first part of the GTM code into the section called Specify HTML Headers and the second part into the Specify HTML Immediately After The Opening Tag section. These are the only places you need to add the code in Spektrix.

How to add Google Analytics (GA4) tracking using Google Tag Manager

Besides the steps outlined above on how to set up Google Tag Manager, from a top level, you’ll need to do the following:

1. Set up triggers on GTM
2. Set up the Google Tag on GTM
3. Set up transaction tags on GTM
4. Test and publish
5. Set up referral exclusions

Step 1: Set up triggers

Once you’ve set up Google Tag Manager, you can add triggers to collect analytics.

To track transactions, you to need create a Spektrix Transaction custom event trigger. You will use this trigger whenever you want to fire a tag when a purchase has been made.

• Click Triggers in the left-hand menu, then the New button.
• Name the trigger Spektrix Transaction
• Select Custom Event as the Trigger type
• Enter Spektrix Transaction as the event name
• Select All Custom Events for the trigger to fire on.
• Click Save to save this trigger.

For more details on making triggers, consult the GTM documentation (link).

Step 2: Set up the Google Tag

Track pageviews on Google Analytics with the Google Tag

• Click Tags in the left-hand menu, then the New button. Name the tag Google Tag.
• Set the tag to be a Google Analytics > Google Tag
• In the Tag Configuration section, add your Google Analytics 4 measurement ID under Tag ID.
• Set the Trigger of the tag to be Initialization - All Pages.
• Click the Create Tag button to save the tag.

You should now see this tag listed in the Tags section. For more details on making tags, consult the GTM documentation (link).

Step 3: Set up Transaction tags

Track transactions on Google Analytics with a Transaction Tag

• Click Tags in the left-hand menu, then the New button. Name the tag Google Analytics 4 Purchase.
• Set the tag to be a Google Analytics > Google Analytics: GA4 Event tag.
• In the Tag Configuration section, add your Google Analytics 4 measurement ID under Tag ID.
• In the Event Name input add purchase. Note that this word is written in lower case.
• Expand the Event Parameters section, click Add Row and enter the Parameter Name and Value for below:
  • Parameter Name = currency, Value = this should be the currency your process orders in 3-letter ISO 4217 format i.e. GBP for Pound Sterling
• Expand the More Settings section, then the Ecommerce section, check the checkbox for “Send Ecommerce data” and ensure the Data source is set to “Data Layer”
• Click on the Trigger section and select the Spektrix Transaction custom event trigger.
• Click the Save button on that screen, then click the Create Tag button.

You should now see both tags showing in the Tags section.

For more details on making tags, consult the GTM documentation (link).

Step 4: Test and publish

Once you are happy with the changes to your Google Tag Manager, you can publish them by clicking the Publish button at the top right of the screen. It’s also possible to preview your site here before publishing, by clicking the drop-down arrow next to Publish and selecting the Preview button.

tip

For testing purposes, note that you can refresh a Confirmation page within 20 minutes to check whether changes you’ve made to your Google Tag Manager setup have had the desired effect (there’s no need to repurchase an entire transaction).

Step 5: Set up referral exclusions

In order to see referrals correctly in Google Analytics you need to set up Referral Exclusions in your Google Analytics 4 account. You can do that in Google Analytics (not GTM) by following the steps provided by Google. The domains you set up exclusions for should be:

• any domains you are tracking (such as myvenue.com)
• spektrix.com (because of the payment iframe pay.spektrix.com)

Cross domain tracking is not an issue, as the domain of the iframes is the same as that of the parent website.

How to install the Meta pixel

The following steps take place on Google Tag Manager. You must have completed steps outlined in the section 'How to add your Google Tag Manager container on the Spektrix Iframes'.

On Google Tag Manager, go to Templates, search for ‘Facebook Pixel’ by facebookarchive, click ‘add to workspace’.

To track pageviews (useful for retargeting)

• Create a new Tag, calling it something like Meta Pixel - Pageviews.
• Select the ‘Facebook Pixel’ tag in Tag Configuration under ‘Custom’.
• Add your facebook pixel ID.
• For Event Name, select Standard > Pageviews. This is likely to be the preselected option.
• Set your trigger to fire on all pages.
• Save

To track purchases

Step 1: create the variable

• Create a new Variable named dlv - ecommerce.value.
• Set it to be a Data Layer Variable. Set the Data Layer Variable name to be ecommerce.value.
• Save Step 2: create the tag
• Create a new Tag, calling it something like ‘Meta Pixel - Purchase’.
• Select the ‘Facebook Pixel’ tag in Tag Configuration under ‘Custom’.
• Add your facebook pixel ID.
• For Event Name, select Standard > Purchase.
• Expand the Object Parameters section, click Add Row twice and enter the Parameter Name and Value for below:
  • Parameter Name = currency, Value = this should be the currency your process orders in 3-letter ISO 4217 format i.e. GBP for Pound Sterling
  • Parameter Name = value , Value = this should be the name of the variable you set up earlier in step 1. For example, {{dlv - ecommerce value}}
• Set the trigger to be the custom event ‘purchase’. If you have not set this up yet, follow the steps outlined above. You don’t need to create this trigger again if you are already using it in GA4.
• Save

Add other third-party analytics to your website

You are able to use Google Tag Manager to manage any tags for your website, including pixels from digital advertising platforms.

1. Set up GTM account
2. Link GTM to Spektrix and add the container code to your pages
3. Add triggers and tags
4. Test and publish

Steps 1, 2 and 4 are the same as outlined above for Google Analytics.

For step 3, you set up the tags as required by the platform you are using. For example, to set up the Meta Pixel, follow Meta's instructions. You can use the Spektrix Transaction trigger to fire the new tag when a transaction happens.

Track specific items in the datalayer

Sometimes you may want to track Transactions or Pageviews for specific items only. 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 who is bringing a show to your venue may want to run Meta adverts for the specific Event they bring to your venue and want to track conversions of tickets to that Event only from the advert.

In order to achieve this, they may add their own GTM container to your system (see Step 2 above) which would make them responsible for the setup and upkeep of their container. Or they may use your container in which case you would need to do the work, but also have more control over what they are seeing. Either way, in order to track specific items within a transaction with potentially multiple items, it is likely this will involve setting up Data Layer Variables and Data Layer Triggers.

As a reminder, the data layer is a section of code that holds information on all of the items in a purchase. You can find out more about the Spektrix data layer, including the complete list of keys, here.

Use the GA4 dataLayer for plugging variables into Meta or other platforms as after July 2023 will we gradually only support that version of our data layer.

In the next steps you can set up a Data Layer Variable with all of the item_id fields using a concatenation JavaScript. Once you’ve set up a variable concatenated into a single string you can use it to make Data Layer Triggers based on specific transaction items to look for specific pieces of information within that string.

Data Layer Variables

Simple data layer Variables

In order to use simple Data Layer variables, such as transaction_id or value, first you need to set them up as variables in your GTM account.

For example, to set up transaction_id you would do as follows:

• In your GTM account, click Variables from the left-hand menu.
• Click New from within the User-defined Variables section.
• Give the variable a name - in this case transaction_id.
• Select Data Layer Variable as the Type.
• In the Configure Variable section enter ecommerce.transaction_id. This needs to be the exact name of the variable, and is case sensitive.
• Make sure the Data Layer Version is set to Version 2.
• Click Create Variable.
• You should now see this variable in the list of User-Defined Variables.
• Repeat the process for all of the simple Data Layer variables that you want to create.

Data Layer variables for items

Data Layer variables for transactionProducts (Universal Analytics) / items (Google Analytics 4) are likely to be the ones you need to use the most, as they identify specific items in the transaction.

As an order in Spektrix can contain multiple Events, and other items such as Merchandise and Donations, the information appears in an array - this means that it’s repeated for every item in the transaction. As such, the process for creating a variable to look at order items requires a different setup from above.

To demonstrate, consult the Data Layer example here.

Set up a variable with all of the item_id fields concatenated into a single string, and then set a trigger to look for specific pieces of information within that string. Here’s what it would look like if you concatenated the item_id fields from all of the items in this example: T82811I872-20P400-O4,M14810-P200,D7808,G,F-TicketDelivery,F-MerchandiseDelivery,F-Transaction

When creating a trigger to look for just one part of the variable, you’ll need to make sure you only pick out the part you’re looking for. For tickets, you’ll need to search for the item_id ID followed by "I". For memberships and merchandise you’ll need to search for the item_id ID followed by a hyphen, as that’s what’s used to separate out the ID from the next section of the concatenated variable.

For example if you wanted to look for just the Aladdin event you would want to use T82811I as your search string. Searching for just T82811 could potentially also find an ID of T828112 if it existed.

If you wanted to look for A birthday present merch item you would use M14810- as your search string. Searching for just M14810 could find an ID of M148102 if it existed.

The only item you wouldn’t use a hyphen for is a donation - you need to use a comma for this. So in the same example you would use D7808, as your search string.

To create a DataLayer variable for items, follow the steps above with a few exceptions:

• Give your variable the name ee items - The name needs to be this exactly, as we’re going to refer to it later on.
• In the Configure Variable section set the Data Layer Variable Name to ecommerce.items. This is case sensitive, so make sure to use this exact name.

Once this is done, you now need to make a second Custom Javascript variable to do the concatenation, referencing the ee transaction products variable.

• Click Variables from the left-hand menu.
• Click New from within the User-defined Variables section.
• Give the variable the name ee item_id - Again, this needs to be the exact name.
• Select Custom JavaScript as the Type.
• 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;
}

• Click Create Variable.
• You should now see this variable in the list of User-Defined Variables.

Data Layer Triggers

Once you’ve set up a variable using the concatenation JavaScript above, you can use it to make triggers based on specific transaction items. For example, if you’re running Meta adverts for a specific Event and want to track conversions only of tickets to that Event from that advert.

In order to do this you will need to know the ID of the product you’re looking for - you can find this in the API, or alternatively get in touch with the Support team.

To set up a trigger using your items variable:

• Click Triggers from the left-hand menu.
• Click the New button.
• Give the trigger a name, such as PurchasedAladdinTickets.
• Select Custom Event as the Trigger type.
• Enter “Spektrix Transaction” as the event name. Make sure the URL is exactly as written, as it’s case sensitive.
• Add a new variable by clicking the grey + icon.
• Select Some Custom Events for the trigger to fire on.
• Set the criteria to be ee item_id > contains > [eventID]. So if you Event ID is T82811 then it should be ee item_id > contains > T82811I
• Click Create Trigger.
• You should now see this trigger listed in the Triggers section.

This trigger can then be used to fire a tag when a customer purchases tickets to Aladdin any time the Confirmation page is viewed and there’s one or more tickets for Aladdin in the order.

Website Admin

It is possible to add code directly to the iframes in Website Admin.

However, this isn't best practice and instead you'll find it's worth the effort of setting up GTM to allow you to easily manage things going forward.

Additionally, the Website Admin fields for confirmation page can only add code to the confirmation page of classic checkout. They are not compatible with express checkout so they would not track conversions done via the express checkout.

Google Support Articles

For more information around Google Tag Manager, Google have produced support articles that can be found here.

https://marketingplatform.google.com/about/tag-manager/

https://support.google.com/tagmanager/answer/6102821?hl=en

https://developers.google.com/tag-manager/devguide