E-commerce transactions

Track e-commerce transactions happening on the site and empower analysis with revenue-related metrics.

E-commerce transactions need to be sent a single time on the confirmation page, after the transaction has been finalized, and need the following mandatory parameters to function:

• Transaction ID, which is the unique identifier for that transaction
• Revenue, which is the total amount of the purchase

You can also include the following optional parameters:

• Currency, which is the currency used for the purchase and also in our platform for a potential conversion. Full technical documentation tracking e-commerce transactions...

1. Open your container and go to the templates section

2. Select Search gallery

3. Type in contentsquare and select the Contentsquare - E-commerce data option

4. Click Add to workspace

5. Confirm your choice by selecting Add

6. Go to the Tags section and click the New button to create a new tag

7. Configure it by selecting the top-right button

8. Search for contentsquare and select the Contentsquare - E-commerce data template that you've previously added to your container.

9. Give a title to the tag and add your GTM Variables to the Transaction ID, Revenue, and Currency fields. The Currency field is optional.

   Make sure to select a trigger that fires only on the confirmation page, or on all the pages that are needed to keep track of transactions, on which your variables are going to be populated.

   

   When building these User-Defined Variables as Custom JavaScript you need to format it like the examples below from your ecommerce dataLayer.

   

   They could look like this for example:

   Transaction ID (return a string):

   function () {
     for (var i = 0; i < dataLayer.length; i++) {
       if (dataLayer[i].event === "purchase") {
         return dataLayer[i].ecommerce.transaction_id;
       }
     }
     return undefined;
   }

   Revenue (return a string):

   function () {
     for (var i = 0; i < dataLayer.length; i++) {
       if (dataLayer[i].event === "purchase") {
         return dataLayer[i].ecommerce.value;
       }
     }
     return undefined;
   }

   Currency (return a string):

   function () {
     for (var i = 0; i < dataLayer.length; i++) {
       if (dataLayer[i].event === "purchase") {
         return dataLayer[i].ecommerce.currency;
       }
     }
     return undefined;
   }

10. If you are using the Contentsquare Merchandising module and would like to send Contentsquare the Transaction Product Items as well then insert the relevant GTM Variable to the Transaction Items field.

    This variable should return an array of item objects, for example a Custom JavaScript Variable built from your ecommerce dataLayer. These item objects and their field names are based on Google's GA4 ecommerce data format ↗. Each item object can contain the following fields:

    • item_id: Product code / SKU
    • price: Unit price actually paid
    • quantity: Quantity
    • item_name: Product name
    • item_category: Product category (optional)

    For example (return an array):

    function () {
      for (var i = 0; i < dataLayer.length; i++) {
        if (dataLayer[i].event === "purchase") {
          return dataLayer[i].ecommerce.items;
        }
      }
      return undefined;
    }

    

    This object uses the standard GTM / GA naming convention for item properties (item_id, item_name, item_category, price, quantity). If you are using non-standard naming, you can specify your property names in the following fields.

    

11. Save your changes and go back to your container. You should now see both the template and the newly created tag.

The Add to Cart event is sent with a separate GTM template, Contentsquare - Tracking Customization. Install it the same way as the E-commerce template, then create a tag that fires when a visitor adds a product to their cart.

1. Open your container and go to the templates section

2. Select Search gallery

3. Type in contentsquare and select the Contentsquare - Tracking Customization option

4. Click Add to workspace

5. Confirm your choice by selecting Add

6. Go to the Tags section and click the New button to create a new tag

7. Configure it by selecting the top-right button

8. Search for contentsquare and select the Contentsquare - Tracking Customization template that you've previously added to your container.

9. Give a title to the tag, then configure it:

   • Under Action type, select Add to cart from the drop-down menu.
   • In the SKU field, add the GTM Variable that returns the SKU of the item added to the cart.

   The Add to cart action is only usable if you are a Contentsquare Merchandising client.

   

   When building this User-Defined Variable as Custom JavaScript, read the SKU from your ecommerce dataLayer. For example, SKU (return a string):

   function () {
     for (var i = dataLayer.length - 1; i >= 0; i--) {
       if (dataLayer[i].event === "add_to_cart") {
         return dataLayer[i].ecommerce.items[0].item_id;
       }
     }
     return undefined;
   }

10. Select a trigger that fires when a visitor adds a product to their cart, for example a click on your Add to Cart button or the add_to_cart event from your dataLayer.

11. Save your changes and go back to your container. You should now see both the template and the newly created tag.

1. Create a new tag and paste the following code in the HTML field:

   <script type="text/javascript">
     window._uxa = window._uxa || [];
     window._uxa.push([
       "ec:transaction:create",
       {
         id: "{{YOUR ID HERE}}",
         revenue: "{{YOUR REVENUE HERE}}",
         currency: "{{CURRENCY ISO CODE HERE}}"
       },
     ]);
     window._uxa.push(["ec:transaction:send"]);
   </script>

2. Inside the script, replace all the placeholder variables with your GTM values (using the double brace notation: {{transaction id}}, {{transaction revenue}}).

   These variables must be available in the "Variables" section of Google Tag Manager.

3. In the trigger list, select the "Confirmation page", or create one if it doesn't exist.

   • Select the "+" on the top right,
   • Select "Choose a trigger type to begin setup..."
   • Pick "Window Loaded"
   • You don't want this to be trigger on every page, so choose "Some Window Loaded Events"
   • Add a condition to match only the confirmation page — for instance, "Page URL" contains "checkout/confirmation"
   • Save and name your trigger "Confirmation page"

The Tealium extension will automatically fire the Contentsquare transaction code as soon as the transaction values defined have been populated in your utag datalayer.

Navigate to Rules, and open an existing rule or create a new one.

E-commerce transactions need to be sent once on the confirmation page, after a transaction has been made and needs to be tracked. to do so, specify the path or the event to be used as a trigger. For example, if you want to target the confirmation page, you could use a similar condition:

If you have chosen the event+condition route, your setup should look similar to this:

Select the Contentsquare extension and then Ecommerce Transactions as the action type.

You will then be prompted to fill in the required information by using either strings or Data Elements.

Given the dynamic nature of transaction details, it is required to have previously setup Data Elements with the requested information.

If you are using the Contentsquare Merchandising module and would like to send Contentsquare the Transaction Product Items as well then insert the relevant Data Element to the Transaction Items field.

This variable should return an array of item objects, for example a Custom JavaScript Data Element built from your ecommerce dataLayer. These item objects and their field names are based on Google's GA4 ecommerce data format ↗. Each item object can contain the following fields:

• item_id: Product code / SKU
• price: Unit price actually paid
• quantity: Quantity
• item_name: Product name
• item_category: Product category (optional)

For example (return an array):

for (var i = 0; i < dataLayer.length; i++) {
  if (dataLayer[i].event === "purchase") {
    return dataLayer[i].ecommerce.items;
  }
}
return undefined;

This object uses the standard GA4 ecommerce naming convention for item properties (item_id, item_name, item_category, price, quantity). If you are using non-standard naming, you can specify your property names in the following fields.

The Add To Cart action sends an Add To Cart event to Contentsquare when a visitor adds a product to their cart.

You have to define this component to run on click when "Add to Cart" is clicked on your website. You need to also include the Ecommerce Transactions component for this to work.

Select Add To Cart (Ecommerce) from the Contentsquare extension as the action type.

You will then be prompted to provide the product's SKU

Select the relevant Data Element that returns the SKU value on click when pressing "Add to Cart" on your website.

1. Add a new tag to your container by choosing "Contentsquare (Builder)".

2. Set the right Contentsquare template selecting Ecommerce.

3. Fill in all required fields with your Commanders Act variables.

4. (Optional) If your transactions have different currencies, send Contentsquare the currency value.

5. (Optional) If you are a merchandising customer, add items.

6. Select a trigger/perimeter that fires only on the confirmation page, and click Save.

Your Tag is ready to be deployed.

The Contentsquare Shopify app automatically collects e-commerce transaction data during the checkout flow, eliminating the need for manual tagging.

After you install the app, map each checkout domain to the matching Contentsquare Tag ID in Shopify. Transaction data (order ID, revenue, and currency) is automatically captured on checkout completion for mapped domains.

For installation instructions, see Shopify app installation.

Contentsquare tracks Shopify transactions by listening to the checkout_completed ↗ Web Pixels event, which provides the order ID, amount, and currency.

Some payment methods redirect the user to an external payment page before returning them to the "Thank You" page (for example, PayPal). In these cases, Shopify may not emit the checkout_completed event. As Shopify documents ↗, if the page where the event is supposed to fire fails to load, the event is not triggered at all.

What you may observe: Sessions with a "Checkout" page view followed by a "Thank You" page view can appear in the Sessions without Transactions segment even though the user completed a purchase. This results in fewer collected transactions in Contentsquare.

Supply the transaction ID, revenue, and currency ISO code as parameters to the ec:transaction:create command, then run ec:transaction:send to send the transaction to Contentsquare.

<script type="text/javascript">
  window._uxa = window._uxa || [];
  window._uxa.push(['ec:transaction:create', {
      'id': {{TRANSACTION_ID}},        // String - unique transaction identifier
      'revenue': {{TRANSACTION_REVENUE}}, // Number - transaction total (49.99)
      'currency': {{CURRENCY_ISO_CODE}}  // String - ISO 4217 currency code ('USD')
  }]);
  window._uxa.push(['ec:transaction:send']);
</script>