Note: This tag can’t be used together with the ecommerce cart update because it conflicts with it. You have the option to implement both the ecommerce add-to-cart tag and the ecommerce remove-from-cart tag, or just the ecommerce cart update tag.
An ecommerce add-to-cart tag lets you collect data about products added to the cart in your online store.
To set it up, follow these steps:
- Go to Menu > Tag Manager.
- Navigate to Tags.
- Click Add a tag.
- Name your tag and select the following type: Ecommerce add to cart.
- Click Next.
- In Ecommerce add to cart setup, you need to fill in the fields based on the ecommerce setup you have on your site. The choices are:
- Data layer (Google Analytics 4)
- Data layer (Google Universal Analytics)
- Google tag (Google Analytics 4)
- Google tag (Google Universal Analytics)
- Custom data layer
So first, check the structure you’re using.
- If your data layer setup is based on one of Google’s standards (Google Analytics 4 or Google Universal Analytics), click Browse presets and select the appropriate option. If your setup is different, go to step 11.
- Click Fill in and the fields will automatically be filled with the appropriate events.
Note:
- You don’t need to create any variables. Tag Manager can directly extract values from the data layer.
- If your data structure doesn’t use some values, leave the fields blank.
- If your data structure doesn’t fully comply with Google’s standards, just adjust the values added by the preset. For example, if the standard uses ‘variant,’ but your event uses ‘size,’ fill in the field with ‘size’ accordingly.
- Review the completed fields and if everything is correct, go to step 13.
- If your setup involves a custom data layer, you’ll need to manually fill in the fields.
- In Product array, enter the source of information about the products in your ecommerce events. You should use double curly braces syntax for the root key and add nested values as needed, such as
{{ ecommerce }}
or{{ ecommerce }}.items
. (See example) - In Product mapping, fill in the names of the keys within a product object that hold specific pieces of information, for example, use ‘item_brand’ for the product brand. (See example)
Note: You can map up to 5 categories. The first one is considered the main category, while the rest are treated as subcategories. If you choose to use subcategories, you can select the following options:
- Read categories from the category field: Categories must be separated by a slash (/). Example: House/Furniture/Bedside tables. Compatible with Google Universal Analytics.
- Read categories from custom fields: Enter the fields you use for the categories in the data layer or gtag.js. Compatible with Google Analytics 4.
Note: You can track a previously created custom dimension by picking the index number or name of the dimension and providing its value. Read more
- In Advanced tag settings, select Consent type. Set it up if you use a consent form on your site. This tag will only fire for visitors who accept the selected consent type.
- Respect opt-out and DNT is turned on by default. Leave it as is if you want to respect visitors who’ve turned on the Do-Not-Track feature in their browsers or who’ve opted out of tracking using our opt-out form.
- In Flight dates, you can set the date and time when the tag will fire.
- In Tag triggers, click Add a trigger to set up a trigger for your tag.
- Name the trigger.
- Select the following trigger type: Data layer event. It’s the most suitable trigger to use because ecommerce tracking typically relies on the data layer.
- In Data layer event settings, set the following condition:
Event name equals your-event-name
.Note: If your ecommerce setup complies with Google’s standards, you can use one of the following event names:
- add_to_cart for Data layer (Google Analytics 4)
- addToCart for Data layer (Google Universal Analytics)
- arguments.add_to_cart for Google tag (Google Analytics 4)
- arguments.add_to_cart for Google tag (Google Universal Analytics)
- Adjust the trigger conditions if you want.
- When you’re done, click Add.
- Click Save to save the tag.
- Test your tag in debug mode.
- When you’re happy with how the tag works, click Publish.
- Done! Products added to the cart are now tracked. Data will appear in reports in Analytics > Ecommerce in about an hour. Data in the tracker debugger will appear instantly.
Note: Ecommerce reports are only visible if you turn them on in Administration > Sites & apps > Reports.
Example of a custom ecommerce event and tag setup
Here’s an example of a custom ecommerce event and how the ecommerce add-to-cart tag should be set up to properly track all the information from that event.
Example ecommerce event
{
"event": "add_to_cart",
"items": [
{
"item_id": "11111",
"item_name": "Product name",
"price": "30.00",
"quantity": 1,
"item_brand": "Product name brand",
"item_category": "Men",
"item_category2": "Shoes",
"item_category3": "Boots & Trainers",
"item_category4": "Boots",
"item_category5": "Cowboy boots",
"item_color": "red"
},
{
"item_id": "22222",
"item_name": "Product name 2",
"price": "45.00",
"quantity": 1,
"item_brand": "Product name brand",
"item_category": "Men",
"item_category2": "Shoes",
"item_category3": "Boots & Trainers",
"item_category4": "Boots",
"item_category5": "Platform boots",
"item_color": "black"
}
]
}
Example tag setup
Setup element | Value |
---|---|
Product array | {{ items }} |
SKU | item_id |
Name | item_name |
Category | item_category |
Category 2* | item_category2 |
Category 3* | item_category3 |
Category 4* | item_category4 |
Category 5* | item_category5 |
Price | price |
Quantity | quantity |
Brand | item_brand |
Variant | item_color |
* This only applies if your ecommerce events have separate fields for subcategories.