A guide to setting up your analytics tools for Fast Checkout for BigCommerce sites

  • Home
  • Blog
  • A guide to setting up your analytics tools for Fast Checkout for BigCommerce sites
Shape Image
Shape Image
Shape Image
Shape Image
Shape Image
Shape Image
A guide to setting up your analytics tools for Fast Checkout for BigCommerce sites

How to Set up Fast with Google Analytics, Facebook, GTM


Fast Checkout Event Handling

Once the user has clicked the Fast Checkout button, the Fast popup window will have launched and the user can continue with their checkout. While this is going on, you can listen for fast.js postMessage events if you want to keep up with the status of the order on your frontend. 

This is useful if you wish to forward data to your analytics provider, or if you want to do things like redirect to an order confirmation page after the user has finished checking out. 

{ “name”: “Checkout – Order Created”, “properties”: { “order_id”: “8abe3959-99b7-4603-bc3b-1af49900f687”, “total”: { “nanos”: 800000000, “units”: “30”, “currency_code”: “USD”, “__typename”: “CurrencyType” }, “order_items”: { “product_name”: “Coolest Thing 2.0”, “sku”: “abc123”, “total”: { “nanos”: 800000000, “units”: “30”, “currency_code”: “USD”, “__typename”: “CurrencyType” }, “quantity”: 1 } } 

⚠ In some environments, such as the embedded browsers inside of mobile apps, the Fast Checkout window will open in a separate browser and not be able to communicate these events back to your page. You should not rely on these events for mission-critical analytics and should always provide another way for buyers to see that their purchase is complete. 

Fast.js Events

Event NameCondition
Checkout Cart – Button Clicked“Fast Checkout” button clicked on cart page
Buy Now – Button Clicked“Fast Checkout” button clicked on product details page 
Checkout – Order CreatedOrder has been submitted through Fast checkout. See details for more info) 
Checkout – Order UpdatedOrder has changed while inside the Fast checkout window 
Checkout – Quantity ChangedThe quantity of an order item has changed while inside the Fast checkout window 
Checkout – Order CancelledThe order has been cancelled from inside the Fast checkout window 
Login – SuccessA user has successfully signed in through a Fast Login button
Login – Pin RequestedAfter an existing user has entered their email and a PIN challenge is displayed 
Login – Pin EnteredAfter the user has typed all digits into the PIN entry 
Login – Pin CorrectAfter the user has entered the correct login PIN 
Login – Pin IncorrectAfter the user has entered an incorrect login PIN 
Login – CancelledAfter the user has clicked the “Cancel login” button on the Fast login window 
Popup window closedA Fast window (checkout or login) has closed for any reason 

Sample Event documentation

Here’s an example of event details for ‘Checkout – Order Created’.  If a user is already authenticated with Fast, this happens after they click the “Fast Checkout” button. If a user is not authenticated, this happens after they have filled out the profile form after they click the “Fast Checkout” button. Essentially, this event fires when the user sees the “Order Received” screen and is the best proxy for converted orders. 

  • Properties
order_id : The ID of the order total : An object representing the order total, containing: currency_code : The currency used to purchase, e.g. USD or GBP units : The whole number of the purchase value, e.g. “4” if the purchase was $4.20 nanos : The billionths of the purchase value after the whole bit, e.g. 200000000 if the purchase was $4.20 order_items : An array representing the order item, containing the item summary product_name : The title of the product(s) purchased sku : The product identifier total : An object representing the order total, containing: currency_code : The currency used to purchase, e.g. USD or GBP units : The whole number of the purchase value, e.g. “4” if the purchase was $4.20 nanos : The billionths of the purchase value after the whole bit, e.g. 200000000 if the purchase was $4.20 quantity : The number of items ordered 
  • Event Object
{ “name”: “Checkout – Order Created”, “properties”: { “order_id”: “8abe3959-99b7-4603-bc3b-1af49900f687”, “total”: { “nanos”: 800000000, “units”: “30”, “currency_code”: “USD”, “__typename”: “CurrencyType” }, “order_items”: { “product_name”: “Coolest Thing 2.0”, “sku”: “abc123”, “total”: { “nanos”: 800000000, “units”: “30”, “currency_code”: “USD”, “__typename”: “CurrencyType” }, “quantity”: 1 } } 

This Guide takes about 1 hour

Before you begin

Here’s a quick checklist of what you’ll need before beginning with installation:
Tools
Google Analytics – analytics.google.com
Facebook Analytics
Google Tag Manager – tagmanager.google.com
Chrome Extensions:Legacy Tag Assistant
Facebook Pixel Helper
Product information (optional)

Helpful Links

Installation – Google Analytics

  1. Installing Chrome extensions 
    • Legacy Tag Assistant (Note: extensions will have a problem if any ad blocker extension is active. Disable first before testing)
  2. Launch your Chrome browser and go to the Chrome web store and search for “tag assistant”
  1. Select “Tag Assistant Legacy (by Google), then click the “Add to Chrome” button, then the “Add extension” button
  1. Click the icon that looks like a puzzle piece on the upper right side of your Chrome browser. Once you click it, pin the Tag Assistant extension by clicking the icon that looks like a pin.
  1. You’ll see a blue Tag icon in the upper right corner of your browser. When you click it, make sure all the options below are checked, then click “Done”, then “Enable” and you’re all set.
  1. Adding Google Tag Manager container code to BigCommerce
    • If not integrated with GA in BigCommerce, add main GA Tracking code in Script Manager in BigCommerce backend
  1. Google Tag Manager – User Defined Variable Creation Process 

The following variables need to be created in Google Tag Manager. (Note: naming must be exact, spacing and dashes)

  • UA variable
  • dl – currency
  • dl – revenue
  • dl – transaction_id
  • cjs – refund

Your completed setup should appear as follows:

  1. First, open Tag Manager and click “Variables” on the left-hand menu. Then click the “New” button under the User-Defined Variables section. Once you do this, click the icon in the middle of the screen to begin your set-up.
  1. Choose your variable type by scrolling down to the Page Variable options, then click the “Data Layer Variable”
  1. Name the variable exactly as dl – currency as seen in the screenshot. Write ecommerce.purchase.actionField.country_code in the Data Layer Variable Name field and Save the changes. Repeat this process for the following variables as seen in the screenshots below:
    • dl – revenue
    • dl – transaction_id
  1. For the UA variable, select Google Analytics Settings as the variable type. Update the Tracking ID field with the value YOUR_TRACKING_ID and save the changes.

5. For the cjs – refund variable, select Custom JavaScript as the variable type and paste in the code snippet to the code box.

function(){
  var refund = {‘ecommerce’: {‘refund’: {‘actionField’: {‘id’: {{dl – transaction_id}}}}} };
return refund;
}

  1. Google Tag Manager – Tag Creation Process

Let’s set-up the following tags in Google Tag Manager:

  • Fast.js Listener
  • UA – Event – Existing User
  • UA – Event – Order Cancelled
  • UA – Event – Popup window closed
  • UA Main Tag

Your completed setup should appear as follows:

Setting up tag:  Fast.js Listener 

  1. Launch Google Tag Manager and click Tags on the left-hand menu. Then click “New” to create a new tag and click the area in the middle to choose a tag type and continue with your setup.
  1. Scroll down the options in choosing your tag type and select Custom HTML. Once you select this, paste the Fast.js Listener code in the HTML window

Copy code below and paste into the HTML window

<script type=”text/javascript”>
    var fast = new Fast();
    fast.addEventListener(“user_event”, function(event){
        if (event.name === “Checkout – Order Created”) {
          dataLayer.push(event.properties);          dataLayer.push({‘event’: event.name});
        }else if(event.name === ‘Checkout – Order Updated’){
        // dataLayer.push({‘event’: ‘Order Update’, ‘updated’: event.properties.ecommerce})
      }else{
        dataLayer.push({‘event’: event.name});  
      }
    });
</script>
  1. Name the tag Fast.js Listener. Scroll down to set-up the trigger and click in the area in the middle, which leads you to a page to “Choose a trigger”, then click the “+” sign
  1. After you click the “+”, click the middle area in the Trigger Configuration section. This will prompt you to choose a trigger type. Select “Window Loaded”, then name this “Window Loaded Trigger”. Save your changes for this trigger.
  1. Once you save the changes for the trigger, don’t forget to save your changes for the Fast.js Listener. Once you’re done, you’ll see the Tag name and Firing triggers you set-up in the Tags view of Google Tag Manager

Setting up tag:  UA – Event – Existing User

  1. Launch Google Tag Manager and click Tags on the left-hand menu. Then click “New” to create a new tag and click the area in the middle to choose a tag type and continue with your setup.
  1. Select “Google Analytics: Universal Analytics” as the tag type. Then in the Tag Configuration section, select “Event” from the Track Type dropdown list.
  1. In the Event Tracking Parameters, fill in the Category, Action, and Label fields with the values seen in the screenshot below. In the Google Analytics Settings dropdown, select the UA Variable value.
  1. Click the middle area under the Triggering section, then click the “+” sign on the upper right side.
  1. Click the middle area under the Triggering Configuration section, the scroll down the list of trigger types and select “Custom Event” from the list.
  1. Add the Event Name “Checkout – Existing User first. Then, update the name of the trigger to “Checkout Existing User – Trigger”. Save your changes.
  1. Name the tag “UA – Event – Existing User” and then save your changes.

Repeat the same process listed above for UA – Event – Existing User for the remaining tags, with the same Name, Type, & Firing Triggers seen in the screenshot:

  • UA – Event – Order Cancelled
  • UA – Event – Popup window closed

If you don’t have any kind of Analytics integration, you should add one more tag. Setting up UA Main Tag is similar to the previous setup with a couple of small differences. Instead of setting Event as the type, set Page View as track type and choose All Pages as your trigger setting. See screenshot for reference.


Installation – Facebook Pixel

  1. Installing Chrome extensions 
  • Facebook Pixel Helper (Note: extensions will have a problem if any ad blocker extension is active. Disable first before testing)
  1. Search for “Facebook Pixel Helper” in the Chrome web store. Select this and click the “Add to Chrome” button
  1. Click the “Add extension” button. Then, click the gray puzzle piece on the upper right corner of your browser, then select the pin icon next to Facebook Pixel Helper.

Then complete all the steps outlined in the following sections:

  1. Adding Google Tag Manager container code to BigCommerce
  2. Google Tag Manager – User Defined Variable Creation Process
  3. Google Tag Manager – Tag Creation Process

Before proceeding with…

  1. Facebook Pixel Integration Process

The following variables need to be created in Google Tag Manager. (Note: naming must be exact, spacing and dashes)

  • FB – Base
    1. Not required if you have an integration with BigCommerce (it will count the pixel twice)
  • FB – Purchase
  • FB – Order Cancelled

Your completed setup should appear as follows:

Setting up tag:  FB – Base

  1. Launch Google Tag Manager and click Tags on the left-hand menu. Then click “New” to create a new tag and click the area in the middle to choose a tag type and continue with your setup.
  1. Scroll down the options in choosing your tag type and select Custom HTML. Once you select this, paste the Facebook Base Code Tag in the HTML window, then name the tag FB – Base

Copy code below and paste into the HTML window

<!– Facebook Pixel Code –>
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version=’2.0′;
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,’script’,
  ‘https://connect.facebook.net/en_US/fbevents.js’);
  fbq(‘init’, ‘YOUR_PIXEL_ID’);
  fbq(‘track’, ‘PageView’);
</script>
  1. Scroll down to set-up the trigger and click in the area in the middle, which leads you to a page to “Choose a trigger”, then click the “+” sign and select the “All Pages” trigger
  1. Once you’re done, save your changes

Setting up tag:  FB – Purchase

  1. Launch Google Tag Manager and click Tags on the left-hand menu. Then click “New” to create a new tag and click the area in the middle to choose a tag type and continue with your setup.
  1. Scroll down the options in choosing your tag type and select Custom HTML. Once you select this, paste the Facebook Base Code Tag in the HTML window, then name the tag FB – Purchase

Copy code below and paste into the HTML window

<script>
  fbq(‘track’, ‘Purchase’, {currency: {{dl – currency}}, value: {{dl – revenue}}});
</script>
  1. Scroll down to set-up the trigger and click in the area in the middle, which leads you to a page to “Choose a trigger”, then click the “+” sign and select the “All Pages” trigger
  1. Click the middle area under the Trigger Configuration section. Scroll down and select “Custom Event” as the trigger type.
  1. Update the Event name field to “FB data”, then update the trigger name to “FB data – Trigger”. Once you’re done, click the Save button for the trigger. Then Save your changes on the “FB – Purchase” tag.

Setting up tag:  FB – Order Cancelled

  1. Launch Google Tag Manager and click Tags on the left-hand menu. Then click “New” to create a new tag and click the area in the middle to choose a tag type and continue with your setup.
  1. Scroll down the options in choosing your tag type and select Custom HTML. Once you select this, paste the Facebook Base Code Tag in the HTML window, then name the tag FB – Order Cancelled

Copy code below and paste into the HTML window

<script>
  fbq(‘trackCustom’, ‘Order Cancelled’, {transaction_id: {{dl – transaction_id}}, value: {{dl – revenue}}});
</script>
  1. Scroll down to set-up the trigger and click in the area in the middle, which leads you to a page to “Choose a trigger”. Select the Checkout Order Cancelled – Trigger, then Save your changes