Ecommerce product detail view tag

Available from 17.8.0

Tag Manager

An ecommerce product detail view tag lets you collect data about the views of the product detail page in your online store. 

To set it up, follow these steps:

  1. Go to Menu > Tag Manager.
  2. Navigate to Tags.
  3. Click Add a tag.
  4. Name your tag and select the following type: Ecommerce product detail view tag.
  5. Click Next.
  6. In Ecommerce product detail view setup, you need to fill in the fields based on the ecommerce setup you have on your site. The choices are:

    So first, check the structure you’re using.

  7. 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.
    Ecommerce product detail view tag in Piwik PRO
  8. 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.
  9. Review the completed fields and if everything is correct, go to step 13.
  10. If your setup involves a custom data layer, you’ll need to manually fill in the fields.
  11. 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)
    Ecommerce product detail view tag in Piwik PRO
  12. 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)
    Ecommerce product detail view tag in Piwik PRO

    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

  13. 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.
  14. 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.
  15. In Flight dates, you can set the date and time when the tag will fire.
  16. In Tag triggers, click Add a trigger to set up a trigger for your tag.
  17. Name the trigger.
  18. 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.
  19. In Data layer event settings, set the following condition: Event name equals your-event-name.
    Ecommerce product detail view tag in Piwik PRO

    Note: If your ecommerce setup complies with Google’s standards, you can use one of the following event names:

    • view_item for Data layer (Google Analytics 4)
    • arguments.view_item for Google tag (Google Analytics 4)
    • arguments.view_item for Google tag (Google Universal Analytics)

    The default data layer push in Google Universal Analytics doesn’t include an event field. To include one, just add an event field to the data layer’s push and give it a name, such as “viewItem.”

  20. Adjust the trigger conditions if you want.
  21. When you’re done, click Add.
  22. Click Save to save the tag.
  23. Test your tag in debug mode.
  24. When you’re happy with how the tag works, click Publish.
  25. Done! Your ecommerce orders 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 product detail view tag should be set up to properly track all the information from that event.

Example ecommerce event

{
    "event": "product_detail_view",
    },
    "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.

Was this article helpful?

Technical support

If you still have any questions, visit our community.
There’s always someone happy to help!

Back to help center