How to set up add to cart and order created events through Google Tag Manager
Make sure you have first installed the Grow Script on your Google Tag Manager.
For the Cart Recovery automation to work and to attribute revenue to your Grow texts, you need to set up the tracking of the Add to Cart and Order Created events.
Add to Cart event tag
Do you have an Add to Cart trigger in your Google Tag Manager container?
Before you can set up the Add to Cart event tag following the instructions below, you need to have an Add to Cart trigger set up in your Google Tag Manager container.
- You may already have an Add to Cart trigger set up in your container. If you’re not sure, see here on how to check.
- If you don’t have an Add to Cart trigger in your Google Tag Manager container, you must create one. You can create a click trigger or any other trigger that is relevant to your website.
- Go to your Google Tag Manager account and add a New Tag.
2. Click on Tag Configuration and scroll further down to select “Custom HTML”.
3. Insert the Add to Cart event code in the HMTL container.
<script>
window.ugr=window.ugr||function(){(window.ugr.q=window.ugr.q||[]).push(arguments)};
ugr('event', 'addToCart');
</script>
4. Under Trigger, select the trigger that is relevant for your website.
- If you already have a custom event trigger for add to cart events you can use it as a trigger for this tag.
- If you don’t have an add to cart trigger in your Google Tag Manager container, you can create a click trigger or any other trigger that is relevant to your website.
6. Save the tag.
7. Don’t forget to preview and publish your Google Tag Manager container.
Order Created event tag
Do you have an Order Placed trigger in your Google Tag Manager container?
Before you can set up the Order Created event tag following the instructions below, you need to have an Order Placed trigger set up in your Google Tag Manager container.
- You may already have an Order Placed trigger set up in your container. If you’re not sure, see here on how to check.
- If you don’t have an Order Placed trigger in your Google Tag Manager container you must create any trigger that is relevant to your website.
- Go to your Google Tag Manager account and add a New Tag.
2. Click on Tag Configuration and scroll further down to select “Custom HTML”.
3. Insert the event code in the HMTL container.
<script>
window.ugr=window.ugr||function(){(window.ugr.q=window.ugr.q||[]).push(arguments)};
ugr('event', 'order', {
totalPrice: 9.99,
currency: 'EUR',
phone: '+5569912345678'
coupon: 'test-coupon-code',
customerID: '123456789',
orderID: '987654321'
})
</script>
Attention: you should replace the values of the event attributes with the appropriate data variables you have set up in your Google Tag Manager container.
eg. totalPrice should not stay 9.99 otherwise all your orders in Grow are going to have this value. You should replace it with the appropriate data layer variable you have defined in your Google Tag Manager account.
The order event supports the following data attributes, with totalPrice and currency being required:
Key | Required | Type | Description |
totalPrice | Required | number | Total amount of the order |
currency | Required | string | ISO 4217 currency codes |
phone | Required | string | Contact phone number included in the order (with country code) |
coupon | Optional | string | The coupon code applied in the order |
orderID | Optional | string | Internal identifier of order's id |
customerID | Optional | string | Internal identifier of customer's id |
createdAt | Optional | Date | Timestamp of the order - If not provided current date will be used |
How to add Data Layer Variables in the event code?
- Make sure you already have the necessary data layer variables in your Google Tag Manager.
- To add Data Layer Variables in the event code you can use curly braces {{ }} as seen in the screenshot above.
- When you type in {{ all the Variables in your container appear in a dropdown.
- Select the variable you need as in the screenshot below, or just paste the exact variable name.
- Don’t forget to close the curly braces with }}
4. Under Trigger, select the trigger that is relevant for your website.
- If you already have a custom event trigger for order placed events you can use it as a trigger for this tag.
- If you don’t have an order placed trigger in your Google Tag Manager container, you must create any trigger that is relevant to your website.
6. Save the tag.
7. Don’t forget to preview and publish your Google Tag Manager container.