How to Set up Fast with Google Analytics, Facebook, GTM
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. |
Event Name | Condition |
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 Created | Order has been submitted through Fast checkout. See details for more info) |
Checkout – Order Updated | Order has changed while inside the Fast checkout window |
Checkout – Quantity Changed | The quantity of an order item has changed while inside the Fast checkout window |
Checkout – Order Cancelled | The order has been cancelled from inside the Fast checkout window |
Login – Success | A user has successfully signed in through a Fast Login button |
Login – Pin Requested | After an existing user has entered their email and a PIN challenge is displayed |
Login – Pin Entered | After the user has typed all digits into the PIN entry |
Login – Pin Correct | After the user has entered the correct login PIN |
Login – Pin Incorrect | After the user has entered an incorrect login PIN |
Login – Cancelled | After the user has clicked the “Cancel login” button on the Fast login window |
Popup window closed | A Fast window (checkout or login) has closed for any reason |
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.
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 |
{ “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
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)
Fast Checkout product video
Fast Checkout Help articles
What is Fast Checkout?
What happens when I press “Fast Checkout”?
What is the 5-minute checkout window?
The following variables need to be created in Google Tag Manager. (Note: naming must be exact, spacing and dashes)
Your completed setup should appear as follows:
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;
}
Let’s set-up the following tags in Google Tag Manager:
Your completed setup should appear as follows:
Setting up tag: Fast.js Listener
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> |
Setting up tag: UA – Event – Existing User
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:
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.
Then complete all the steps outlined in the following sections:
Before proceeding with…
The following variables need to be created in Google Tag Manager. (Note: naming must be exact, spacing and dashes)
Your completed setup should appear as follows:
Setting up 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> |
Setting up tag: FB – Purchase
Copy code below and paste into the HTML window
<script> fbq(‘track’, ‘Purchase’, {currency: {{dl – currency}}, value: {{dl – revenue}}}); </script> |
Setting up 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> |