The E-commerce tag

The e-commerce tag is used to keep track of the e-commerce transactions happening on the site and empower analysis with revenue-related metrics.

It needs to be fired a single time on the confirmation page, after the transaction has been finalised, and needs the following mandatory parameters in order 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:

  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 IDs and Revenue fields.

    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.

  10. If you would like to send Contentsquare the currency value as well, fill in the optional parameters section.

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

Google Tag Manager (Custom HTML)

Section titled Google Tag Manager (Custom HTML)
  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.

The E-commerce tag needs to be fired once on the confirmation page, after a transaction has been made and needs to be tracked. In order 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.

  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 CS 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.

  1. Click Settings.

  2. In the overlay that appears select Checkout and accounts.

  3. Scroll down to the Order status page section.

  4. In the Additional scripts field, insert the same code snippet that you inserted in the theme.liquid file:

    This is an example of the code including the Liquid Objects pre-defined. You can change these values if need be:

    window._uxa = window._uxa || [];
    window._uxa.push(['ec:transaction:create', {
    'id': {{checkout.order_id}},
    'revenue': {{checkout.subtotal_price}},
    'currency':{{currency.iso_code}}
    }]);
    window._uxa.push(['ec:transaction:send']);

    You may already have the Contentsquare Main Tag and other code in the field above: add this new code to the Contentsquare section.

  5. Click Save.

First, assign a variable to the mandatory fields:

<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}}'
}]);
</script>

Then execute the following function to send the above information to Contentsquare:

<script type="text/javascript">
window._uxa.push(['ec:transaction:send']);
</script>

You can also put it all together in a single snippet:

<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>