Implement Purchase Tracking with Google Tag Manager

Learn the requirements and how to implement the Firework Purchase Tracking using Google Tag Manager (GTM).

Firework Purchase Tracking provides valuable insights into customers' shopping experiences and performance when purchasing products on your website. By using the Firework Purchase Tracker, you can capture important sales-related actions from customers who have interacted with the Firework player.

By implementing the Firework Purchase Tracking, we can determine the Gross Merchandise Volume (GMV) and Average Order Value (AOV) attributed to Firework.

Requirements:

1. Ensure Google Tag Manager is implemented.
2. Setup a datalayer object in Google Tag Manager pushing the order details, as shown in the example below:

   <script>
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
     order_id: '12345',
     order_value: '50.54',
     currency: 'CAD',
     country: 'Canada',
     subtotal: '40.89',
     payment_method: 'AMEX',
     product: [{ ext_product_id: '4483', price: 31, quantity: 15 }],
     ext_customer_identifier: '1234-1234-1234-1234'
   
   });
   </script>

3. Important - This implementation requires the following data points to be pushed to the datalayer in order to send properly the purchase information to Firework:

   1. order_id: string
      ID of an order/transaction e.g. '12345'.

   2. order_value: number
      The total value of the order, e.g. 100.

   3. currency: string
      Currency in which the order_value was purchased. See a list of supported currency codes. E.g. 'USD', 'CAD' etc.

   4. country: string
      The Customer's country

   5. subtotal?: number

   6. payment_method?: string
      The order's payment method, e.g.: AMEX, VISA, etc.

   7. product?: Array<{ ext_product_id: string; price: number; quantity: number }>
      A comma-separated string or an array of product IDs, its prices and quantities that were part of the Order.

   8. ext_customer_identifier?: string
      A way to pass merchants' user ID to its customers.

4. Insert a Trigger for when an order is completed (purchase confirmation page).

Implementation Steps:

1. Add the Firework Purchase Tracking Tag template from within Tag Manager.

   1. Our tag is available on Google Tag Manager Community Template Gallery. To search for and add the Firework tag template follow these steps:

      1. From within Tag Manager, click Templates.

      2. In the Tag Templates section, click Search Gallery.

      3. To filter the list, click  to open the search field and type "Firework Purchase Tracking" to show the Firework template.

      4. Click on the Firework Purchase Tracking Tag template from the result to view details.

      5. To add the template, click Add to workspace.

      6. Review the required template permissions and click Add.

2. Add a new tag using the Firework Purchase Tracking template and assign a trigger.
   1. In the Workspace, click Tags.
   2. Create a new tag from our template (Firework Purchase Tracking). To add a tag, click New.
   3. Name your Tag as needed. 
   4. Add the triggering. In our example below, we have selected to show the new tag on every page which is a default existing trigger in Google Tag Manager. You can also choose to create your own trigger that can be based on many different rules. For example, you could trigger the tag on only certain pages, or after a certain time the user have spent on the page.
   5. Click Save.
3. Validate the implementation by using the preview feature to test the integration before putting it live on your website.
   1. Be sure to enable the Preview mode in Google Tag Manager.
   2. Navigate to the dataLayer tab in the Tag Manager Preview panel.
   3. Verify that the Firework Purchase Event is visible under the dataLayer section and is not loaded as a variable of type Object. It should be present as a distinct entry within the dataLayer.
   4. Test the implementation by making a test purchase on your website.
   5. Check the Google Tag Manager Preview panel to ensure that the Firework Purchase Event is triggered correctly and the data is captured in the dataLayer.
4. When your new tag is working as intended, publish it. To publish your current workspace:

1. 1. Click Submit at the top right hand side of the screen. The Submit Changes screen will appear, with options to publish the container and save a version of your container.
   2. Select Publish and Create Version if it is not already selected.
   3. Review the Workspace Changes section to see if your configuration appears as you expect.
   4. Enter a Version Name and Version Description.
   5. Click Publish.

Troubleshooting:

If you place a test order but cannot see the dataLayer section within Google Tag Manager, here's some steps to help fix it. You will need to use your browser DevTools or any similar tool, such as Charles Proxy for furhter troubleshooting. 

1. Confirm if the Firework Purchase Tracking Library was loaded from https://asset.fwcdn3.com/js/analytics.js on your page, before your purchase script/the GTM tag is fired.

2. Check the network calls when completing the purchase. There must be a metrics call to https://p2.fwpixel.com/trk/user:purchase returning a 200 status. The payload will be similar to:

   {
   
     "platform":"web",
     "product":"embed.web.naboo",
     "product_version":"v20231018.1-hotfix",
     "track_version":"2.0",
     "client_event_time":"2023-10-23T10:34:55.090",
     "os_name":"MacOS",
     "event_properties":{
       "locale":"en-US",
       "page_load_id":"90e4c277-5d99-4598-afbd-5371d5d38274",
       "page_url":"https://firework.com/firework-purchase-tracking.html",
       "session_count":39,
       "_last_channel_id":"1ePm6O",
       "_last_video_id":"gd3qDZ",
       "last_engaged_timestamp":"2023-10-17T17:46:28.265Z",
       "user_data":{
         "order_value":"35.54",
         "order_id":"23423",
         "currency":"CAD",
         "subtotal":"31.89",
         "country":"Canada"
       }
     },
   
     "session_id":"7f8f797a-fd7e-4523-8591-0d7a83081589",
     "session_type":"embed_session",
     "guest_id":"47ef059a-a99d-4d2c-80d1-7cfd5b396803",
     "visitor_id":"47ef059a-a99d-4d2c-80d1-7cfd5b396803"
   }