Lab Activity: Adding Data Tags

Data Tags provide detailed data on the way shoppers interact with your store’s products. However, data tags are not only limited to only product data collection. Data Tags can also track your store’s header and footer for promotions and can collect data on whether those promotions were viewed and/or clicked. BigCommerce’s Data Tags are powered by Segment and Platform.js, and will send your store’s product data through to Google Analytics.

Cornerstone versions 2.6.0+ will have Data Tags already included in the theme.

Dev Docs link to Data Tags

Objectives

• Review and add enhanced ecommerce feature (config.json)
• Add data tags to Cornerstone’s HTML
• View data tag implementation
• Review data tag reference table
• Add custom dimensions and metrics

Prerequisites

• BigCommerce Store
• Optimized One-Page Checkout enabled
• Cornerstone theme installed

Include the Enhanced eCommerce Property

1. Open your local copy of your theme and navigate to the theme’s cornerstone/config.json file
2. In the config.json file, navigate to the features array. There should be a property in this array called enhanced_ecommerce. If the enhanced ecommerce property is not present in the features array, add it. The features object should then look similar to the example below

Enhanced eCommerce Feature

"features": [
      "fully_responsive",
      "mega_navigation",
      "multi_tiered_sidebar_menu",
      "masonry_design",
      "frontpage_slideshow",
      "quick_add_to_cart",
      "switchable_product_view",
      "product_comparison_table",
      "complex_search_filtering",
      "customizable_product_selector",
      "cart_suggested_products",
      "free_customer_support",
      "free_theme_upgrades",
      "high_res_product_images",
      "product_filtering",
      "advanced_quick_view",
      "product_showcase",
      "persistent_cart",
      "one_page_check_out",
      "product_videos",
      "google_amp",
      "customized_checkout",
      "account_payment_methods",
      "enhanced_ecommerce",
      "csrf_protection"
    ]

You are now ready to begin adding data tags into the HTML files across your Cornerstone theme.

Adding Data Tags into Cornerstone’s HTML files

Data tags must be manually added to a product in order to track shopper events and interactions with a product. Because data tags collect product data at a very granular level, there will be multiple locations you will have to add tags on a singular product in order to get a comprehensive look at the product’s data. For example, a merchant has requested that a product can be viewed by clicking any of the following:

• The name of the product
• The “Quick View” button
• The product image

So, in order to get a fully comprehensive look at shoppers’ interactions with a product, you will want to include a data tag on each of these fields. If a specific product possesses multiple data tags, the data tag that is closest to the product is the one that will track clicks, product impressions, or product views.

Data tags will be implemented in your store by using simple HTML. In order to begin tracking, you will add data tags as an attribute to the already existing HTML tags present in your theme.

See Pull Request #1377 to see how Data Tags were implemented in Cornerstone 2.6.0.

Data Tag Implementation Example

You can see a data tag implemented in the HTML form tag in the code sample below:

<form action="{{urls.compare}}" method='POST' data-list-name="Brand: {{brand.name}}" data-product-compare>
    {{#if theme_settings.product_list_display_mode '===' 'grid'}}
        {{> components/products/grid products=brand.products show_compare=brand.show_compare theme_settings=theme_settings event="list"}}
    {{else}}
        {{> components/products/list products=brand.products show_compare=brand.show_compare theme_settings=theme_settings event="list"}}
    {{/if}}
</form>
{{> components/common/paginator pagination.brand}}

In the above snippet, the data tag is embedded in a <form> HTML tag in lines 1 and 2. The data tag is data-list-name and its value is Brand: {{brand.name}}.

Data Tag Reference

Currently, BigCommerce supports 11 different data tags. Below is a table with a breakdown of each tag and its description.

Custom Dimensions and Metrics

Custom dimensions and metrics are also supported. To add them in the config.json settings array, add the name of the dimension/metric followed by the generic custom metric/dimension alias.

Example:

{
    // ...
    "settings": {
        // ...
        "custom-dimensions": {
            "<your-custom-dimension-name>": "dimension1", "dimension-common": "dimension2"
        },
        "custom-metrics": {
            "<your-custom-metric-name": "metric1", "metric-common": "metric2"
        }
    }
    // ...
}

Next, add the custom metrics/dimensions to the desired theme template:

• Dimensions are typically strings
• Metrics are usually integers

<!--...-->
{{#if settings.data_tag_enabled}}
    <article class="listItem" dimension-common="yes" metric-common=1 data-event-type="{{event}}">
{{else}}
<!--...-->
{{/if}}
<!--...-->