Using Google Tag Manager and Facebook Pixel
NOTE: InkSoft does not provide technical support for third party products, including Google Tag Manager. Instructions and training for Google Tag Manager can be found here, and Facebook Pixel instructions can be found here. Please consult these guides BEFORE enabling.
Before we get started, if you haven't connected your Google Tag Manager account with your InkSoft account, please refer to our guide "Setting Up Google Tag Manager" here before continuing.
Google Tag Manager allows you to quickly and easily update tags and code snippets on your website, such as those intended for traffic analysis and marketing optimization. You can add and update AdWords, Google Analytics, Facebook Pixels, and 3rd party or custom tags from the Google Tag Manager user interface instead of editing site code. This reduces errors, frees you from having to involve a web developer, and allows you to quickly deploy new features or content onto your site.Triggers
Triggers are used to instruct the assigned tag when to fire. The next few steps below will show a couple simple examples of triggers that you can use with your InkSoft store.Example 1: Normal Page View (Store Front)
The example below shows a basic page view trigger for tracking store front traffic. Any tag that uses this trigger, then, will fire once for each page view in a store front page (meaning, any page before checkout begins). The set up could be simpler by just selecting "All Page Views," but by using "Some Page Views," we can provide specific conditions on when to fire the Tags. Making this specification can help prevent overlapping tags, which is ideal when you only want a certain Tags to fire on specific pages.
In this case, the tag will be fired when the user is on any page of the store except for pages that contain "Checkout" and "ThankYou" in the URL.
Here are some examples of the InkSoft URL structures that would fire according to what's set in the example below:
- Home: storedomain.com/StoreDirectory
- Product or Art Category Pages:storedomain.com/StoreDirectory/Category/CategoryID
- Product Detail Pages: storedomain.com/StoreDirectory/Productname/SKU/ID
- Art Detail Pages(if enabled): storedomain.com/StoreDirectory/Design/DesignID/DesignName
- The Cart: storedomain.com/StoreDirectory/Cart
Note: If you are using the fundraiser theme Order Up or Apollo, use "Confirmation" instead of "ThankYou" for the condition.
Example 2: Checkout Process
To track when the user initiates the checkout process, will need a trigger that will fire when the user clicks "Checkout." In this example, we use the Click-All Elementstrigger type, and specify the Checkout button class btn-primary btn as the trigger to fire on. Additionally, we'll need to provide conditions to make sure the tag fires only on the page that begins the checkout process, since the button class may be used throughout your website and on multiple checkout pages. This will help ensure accuracy on conversion/dropoff reports.
The example below shows the use of the Page URL condition working with the Click Classes condition to fire when the user begins the checkout process. Starter Webstores and Fundraiser Stores function differently, but the Click Classes condition is the constant that is used in both store types. Then, depending on the store type, you'll need to use different Page URL conditions.
Here is break down of which URL conditions you will need for your store type:
- Starter Webstore (Red): The Starter Webstore only needs the first Page URL condition shown to work properly with the Click Classes. This is because the user begins the checkout process by clicking "Checkout Now" on cart page. Additionally, the "Checkout Now" button is the only button on the page that has "btn-primary btn" class associated with it, so this trigger will fire when the button is clicked.
- Fundraiser Stores (Orange): Unlike Starter Webstores, Fundraiser stores begin the checkout process once the user clicks checkout on the home page, so we don't need the first condition "Page URL - contains - Cart." Do not include "Page URL - contains - Cart" if you're using a fundraising store, as the tag will not fire properly. Instead, we specify the tag not fire on any other pages of the fundraiser store, since the "btn-primary btn" class is used throughout the theme.
Note that "Click Classes - contains - btn-primary btn" remains as a condition regardless of which store type is used.
Example 3: Converted Sale
This last trigger example is designed to only fire when the user is on the confirmation page. This would register the number of completed orders, since this page is only shown to users after they complete a purchase. Since the confirmation page is the only one with ThankYou in the URL, we only need to set one condition.
Note: If you are using the fundraiser theme Order Up or Apollo, use Confirmationinstead of ThankYou for the page url condition.
Here is an example of the InkSoft URL structure that would fire according to what's set in the example below (note the difference in the underlined text):
- Confirmation: storedomain.com/storedirectory/Checkout/SessionId/ThankYou/Orderid
- Confirmation for Order Up or Apollo Fundraiser Stores: storedomain.com/StoreDirectory?Page=Confirmation&OrderNo=1111111&Emailemail@example.com
Creating Tags For InkSoft
Once your triggers are set, you're ready to use them in the creation of new tags. When creating a new tag, you will be prompted to choose a tag type. In this guide, we will be covering Universal Analytics for Google Analytics and Custom HTML for Facebook Pixels.
Google Analytics Tag - Track By Page View
The most common way to track the user traffic going through your website is by Page View. This is useful to see how many hits your site generates and at what time. More Settings or Advanced Settings can have the tag provide additional information to Google Analytics. However, these options may require additional work to make them function properly.
To configure this tag, you'll need your Google Analytics Tracking ID, which can be found in the Admin section of your Google Analytics account. Once the tag is configured, you will need to assign a trigger. The example below shows the Normal Page View trigger that was created in a previous example. With this trigger assigned, this tag will only fire when the user is on the store front.
Google Analytics Tag - Track by Event
Events are user interactions with content that can be tracked independently from a web page. In Google Tag Manager, you can provide the event parameters for category, action, label, and value for Google Analytics to use. This can be very useful when keeping track of how many orders you process, or when the customer takes a specific action you want to keep track of.
In the example below, we've set the trigger as "Converted Sale," which we created earlier in this guide. With this trigger, the tag will only fire when the user completes an order, and it will log an event in Google Analytics.
Events can be found under "Behavior" in your Google Analytics account.
Google Analytics Tag - Track by Transaction (Advanced)
E-commerce tracking allows you to measure the number of transactions and revenue that your website generates. This tracking type does require advanced coding knowledge to be able to provide a data layer needed for tracking order data. The code should be placed in the Thank You Message, which can be found in the Custom Content area of your store.
Skip to the Advanced Section by clicking here, which will go over the Thank You Message and the parameters we provide for it.
The Facebook Pixel is a bit of code that you can add to Google Tag Manager to track user interaction with the site. It provides data back to your Facebook Ads account to give you the ability to optimize your campaigns for conversion, as well as retarget ads to users who have visited your website before.Facebook Pixel Tag - Base Code
To get started with Facebook Pixels, you'll first need your Pixel Base Code. To do this, go to your Facebook Ads and go to the Pixels section. Click Setup Pixel, then select Use an Integration or Tag Manager, and then Google Tag Manager. Scroll down to step 1.2 and copy the pixel base code.
In Google Tag Manager, create a new Custom HTML Tag, and then paste in the code you copied from Facebook Pixel. Select Advanced and update the "Tag Firing Options" to "Once Per Page." Lastly, in the Triggering section, select "All pages."
The base code will keep track of all page views happening on your site. You can ensure the pixel is firing correctly by downloading the Facebook Pixel Helper into your Chrome browser. With the base code in place, you can now add additional event specific tags to keep track of individual actions users are taking on your site.
Facebook Pixel Event Codes
To get additional Event Codes for pixel to track, click "Create Conversions" in Pixels, and then select "Track Conversions With Standard Events." From there you can see the different types of events Facebook provides and some sample code. There are few you can choose from, but this guide going over the InitiateCheckout and Purchase events.
FB Pixel Tag - InitiateCheckout
This event is used to track how many users enter the checkout process, which can be useful when comparing to the page view and the converted sales numbers.
Like when we created a Base Code tag, we need to create a new Custom HTML tag. This time, however, we just need to insert just the event code between some <script> </script> tags, as shown below. After the code is placed, click "Advanced Settings" and then "Tag Sequencing." Check the box next to "Fire a tag before" and select the base code tag you created in the last step. This tells your page to process the base code first to track the overall page views and then this little code snippet to also track the event.
From there, you'll need to assign the appropriate trigger for when this tag should fire. In this case, we are using the Checkout Process trigger that was shown in near the beginning of this guide.
Finally, notice that we've selected in the Advanced Settings the drop-down option "Once per event." This tells Google Tag Manager to track only the button clicks, not every person who lands on the page.
With this in place, you should have two pixels firing when someone initiates checkout: the checkout action and the pageview.
Facebook Pixel Tag - Purchase (Advanced)
Like the above step, the Purchase event code just needs to go in between <script> </script> on a new Custom HTML Tag, and the Base code needs to be selected Tag Sequencing area. Assign the appropriate trigger so the tag fires once the user has completed the order. This example shows the "Converted Sale" trigger that can be seen near the beginning of this guide, meaning this tag will only fire on the purchase confirmation page.
Note that this step may require some work from your developer to have the value of the order inserted into the code instead of the"0.00" shown below. However, if each order placed has a flat value, then updating the "0.00" to regular dollar amount will also work.
Additionally, you can also place the code into the Thank You Message of your store instead of creating a tag. This method may make it easier to have the value of orders populate into the code. Skip to next step here for more information about the Thank You Message and the Parameters we provide.
In order to track details from a customers order, a data layer is needed for your analytics to be able to recognize what order data to keep track of. The best place to insert the data layers is in the Thank You Message (shown below). The Thank You message appears after the user completes the order, and already has Parameters that can be used to retrieve data from the newly placed order. Making it the perfect place to insert your data layer.
For more information on creating a data layer for Google Tag Manager please refer to the provided guide here. For Facebook Pixels, please refer to Facebook's article here and scroll down to the "Create Action-Specific Tags" section.
Here is a list of parameters that can be used on the Thank You page to retrieve order data:
ORDER_ID, STORE_NAME, CUSTOMER_EMAIL, SUB_TOTAL, TAX_AMOUNT, TAX_RATE, SHIPPING_AMOUNT, GRAND_TOTAL, DISCOUNT_AMOUNT, DISCOUNT_CODE, COUPON_CODE, GIFTCERT_PAID_AMOUNT, CC_PAID_AMOUNT, PAYMENT_METHOD, SALE_AMOUNT, IP_ADDRESS
In the example below, you can see the Facebook Pixel and Google Analytics sample code inserted; however, you or your developer will need to fill in the necessary gaps to make it function with your store.