Using Google Tag Manager to Send Order Data

About this task

You can use a Google Tag Manager tag to send an order to Bronto from the order complete or order confirmation page of your website.
Note: These instructions assume that you have implemented a Google Tag Manager data layer with a standard purchase action object.

Procedure

  1. Add Script Manager to each page of your site independently or with Google Tag Manager.
  2. Get started by creating user defined variables. We will first create the EC—Grand Total variable.
    1. Within Google Tag Manager, go to Variables.
    2. Click New to create a new user-defined variable.
    3. Click to choose a variable type. Select Data Layer Variable.
    4. Add your data layer variable name: ecommerce.purchase.actionField.revenue.
    5. Name your variable EC - Grand Total.
    6. Click Save.
  3. Create the EC—Order ID variable.
    1. Within Google Tag Manager, go to Variables.
    2. Click New to create a new user-defined variable.
    3. Click to choose a variable type. Select Data Layer Variable.
    4. Add your data layer variable name: ecommerce.purchase.actionField.id.
    5. Name your variable EC - Order ID.
    6. Click Save.
  4. Create the EC—Currency variable.
    1. Within Google Tag Manager, go to Variables.
    2. Click New to create a new user-defined variable.
    3. Click to choose a variable type. Select Data Layer Variable.
    4. Add your data layer variable name: ecommerce.currencyCode.
    5. Name your variable EC - Currency.
    6. Click Save.
  5. Create the EC—Shipping variable.
    1. Within Google Tag Manager, go to Variables.
    2. Click New to create a new user-defined variable.
    3. Click to choose a variable type. Select Data Layer Variable.
    4. Add your data layer variable name: ecommerce.purchase.actionField.shipping.
    5. Name your variable EC - Shipping.
    6. Click Save.
  6. Create the EC—Tax variable.
    1. Within Google Tag Manager, go to Variables.
    2. Click New to create a new user-defined variable.
    3. Click to choose a variable type. Select Data Layer Variable.
    4. Add your data layer variable name: ecommerce.purchase.actionField.tax.
    5. Name your variable EC - Tax.
    6. Click Save.
  7. Create the EC—Products variable.
    1. Within Google Tag Manager, go to Variables.
    2. Click New to create a new user-defined variable.
    3. Click to choose a variable type. Select Data Layer Variable.
    4. Add your data layer variable name: ecommerce.purchase.products.
    5. Name your variable EC - Products.
    6. Click Save.
  8. You can follow the same process used for the variables above for additional ecommerce variables like discount.
  9. You will need to pass an additional field, EC - Email, to Google Tag Manager that contains the email address of the customer. One way to do this is by adding a new dataLayer variable. ( See Google's documentation on adding data layer variables to a page).
  10. Once you have added an Email variable to the dataLayer, you will be able to create a new user-defined Google Tag Manager variable using the same process you used for the other variables. For example, let's say that you have added email to the dataLayer using the code dataLayer.push({'customerEmail': 'james@example.com'}); . You would then follow these steps to add the EC - Email variable.
    1. Within Google Tag Manager, go to Variables.
    2. Click New to create a new user-defined variable.
    3. Click to choose a variable type. Select Data Layer Variable.
    4. Add your data layer variable name: customerEmail.
    5. Name your variable EC - Email.
    6. Click Save.
  11. You need to create a trigger to signal that a transaction has taken place next. For this example, we will assume that your site redirects customers to complete.html after an order is complete. To get started, click Triggers in Google Tag Manager.
    1. Click New to create a new trigger.
    2. Click to choose a trigger type. Select Page View.
    3. Select Some Page Views for the This trigger fires on field.
    4. Select to fire the trigger when Page URL contains the path complete.html.
    5. Name your trigger and click Save.
  12. Return to Google Tag Manager. Click Tags to start building your tag.
    1. Click New.
    2. Click Tag Configuration and select the tag type Custom HTML.
    3. Make any necessary customizations to the script below to match the Google Tag Manager variables you have created.
      <script>
      var orderItems = {{EC - Products}};
          var n = orderItems.length;
          lineItems = [];
          for (i = 0; i < n; i++) {
              lineItems.push({
                  "sku": orderItems[i].id,
                  "description": "",
                  "totalPrice": orderItems[i].quantity * orderItems[i].price,
                  "quantity": orderItems[i].quantity,
                  "unitPrice": 1 * orderItems[i].price,
                  "salePrice": 0,
                  "name": orderItems[i].name,
                  "category": orderItems[i].category,
                  "other": "",
                  "imageUrl": "",
                  "productUrl": ""
              });
          };
      
          var brontoCart = {
              "customerOrderId": {{ EC - Order ID}},
              "phase": "ORDER_COMPLETE",
              "emailAddress": {{EC - Email}},
              "lineItems": lineItems,
              "shippingAmount": 1 * {{EC - Shipping}},
              "shippingDetails": "",
              "shippingTrackingUrl": "",
              //"shippingDate": "2017-12-31T12:34:56Z", ISO 8601 formatted date
              "subtotal": {{EC - Grand Total}} - {{EC - Shipping}} - {{EC - Tax}},
              "taxAmount": 1 * {{EC - Tax}},
              "discountAmount": 0,
              "grandTotal": 1 * {{EC - Grand Total}},
              "currency": {{EC - Currency}}
          };
          bronto("cart:send", brontoCart);
      </script>
    4. Enter your modified script into the HTML field.
    5. Click inside the Triggering box.
    6. Select the trigger you created previously for the path that your customers land on after a purchase.
    7. Name your tag (example: Bronto Order Cart Send) and Save.
  13. Click Submit.
  14. Name your version (example: First Deploy) and add a description.
  15. Click Publish to make your new tag live.