Google Analytics Enhanced ECommerce

Google Analytics is a free analytics tool that helps you track visitors and conversions on your store. BigCommerce has updated the Google Analytics integration to support Enhanced Ecommerce. As apart of the Enhanced ECommerce feature, Stencil themes now support data attributes.

Data attributes provide detailed data on the way shoppers interact with your store’s products. However, data attributes are not only limited to only product data collection. Data attributes 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 attributes are powered by Segment (opens in a new tab) and Platform.js (opens in a new tab), and will send your store’s product data through to Google Analytics.

Cornerstone versions 2.6.0+ will have data attributes already included in the theme.

Downloading a theme

Data attributes will work on any theme. For this tutorial, we will be adding data attributes to the Cornerstone theme. If you do not already have a local copy of Cornerstone on your machine, see Downloading Cornerstone.

If you would like to implement data attributes on your custom theme and do not already have a copy of your custom theme downloaded, see Downloading a Marketplace Theme.

Adding data attributes

Prerequisites

• BigCommerce Store (opens in a new tab)
• Optimized One-Page Checkout enabled (opens in a new tab)
• 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 image below.

"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 attributes into the HTML files across your Cornerstone theme.

Adding data attributes into Cornerstone’s HTML files

Data attributes must be manually added to a product in order to track shopper events and interactions with a product. Because data attributes collect product data at a very granular level, there will be multiple locations you will have to add attributes on a singular product in order to get a comprehensive look at the product’s data. For example, if you want to, it is imperative to note 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, if you would like to track the clicks on a specific product, in order to ensure you get a fully comprehensive look at shoppers’ interactions with a product, you will want to include a data attribute on each of these fields. If a specific product possesses multiple data attributes, the data attribute that is closest to the product is the one which will track clicks, product impressions, or product views.

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

See Pull Request #1377 (opens in a new tab) to see how data attributes were implemented in Cornerstone 2.6.0.

Data attribute implementation example

You can see a data attribute 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 attribute is embedded in a <form> HTML tag in lines 1 and 2. The data attribute is data-list-name and its value is "Brand: {{brand.name}}".

Data attribute reference

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

The “tracked product” refers to the product on which you are inserting the data attribute.

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:

{
    // ...
    "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:

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

Resources

Pull Requests

• Cornerstone PR #1377 (opens in a new tab) (GitHub)
• Google Analytics Product Data Tags (opens in a new tab) (BigCommerce GitHub)

Related Articles

• Customizing the BigCommerce Google Analytics Enhanced ECommerce Integration (opens in a new tab) (Developer Blog)

Additional Resources

• Google Analytics Enhanced ECommerce (opens in a new tab) (Google)