PROJECT-2272: Add support for declarative data tag analytics

Co-authored-by: ranjitha venkataramani <ranjitha.v@bigcommerce.com>
Co-authored-by: Senthil Krishnasamy <senthil.krishnasamy@bigcommerce.com>
Co-authored-by: Ryan Greenberg <hawk1138@gmail.com>
Co-authored-by: Adam Bilsing <adambilsing@gmail.com>

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Draft
 Add support for Card Management: List, Delete, Edit, Add and Default Payment Method [#1376](https://github.com/bigcommerce/cornerstone/pull/1376)
+Add support for declarative data tag analytics. [#1377](https://github.com/bigcommerce/cornerstone/pull/1377)
 
 ## 2.5.2 (2018-10-24)
 - Product review modal error message is now accurate. [#1370](https://github.com/bigcommerce/cornerstone/pull/1370)

assets/js/theme/common/product-details.js

@@ -27,6 +27,7 @@ export default class ProductDetails {
 
         $productOptionsElement.on('change', event => {
             this.productOptionsChanged(event);
+            this.setProductVariant();
         });
 
         $form.on('submit', event => {
@@ -76,6 +77,103 @@ export default class ProductDetails {
         return formData;
     }
 
+    setProductVariant() {
+        const unsatisfiedRequiredFields = [];
+        const options = [];
+
+        $.each($('[data-product-attribute]'), (index, value) => {
+            const optionLabel = value.children[0].innerText;
+            const optionTitle = optionLabel.split(':')[0].trim();
+            const required = optionLabel.toLowerCase().includes('required');
+            const type = value.getAttribute('data-product-attribute');
+
+            if ((type === 'input-file' || type === 'input-text' || type === 'input-number') && value.querySelector('input').value === '' && required) {
+                unsatisfiedRequiredFields.push(value);
+            }
+
+            if (type === 'textarea' && value.querySelector('textarea').value === '' && required) {
+                unsatisfiedRequiredFields.push(value);
+            }
+
+            if (type === 'date') {
+                const isSatisfied = Array.from(value.querySelectorAll('select')).every((select) => select.selectedIndex !== 0);
+
+                if (isSatisfied) {
+                    const dateString = Array.from(value.querySelectorAll('select')).map((x) => x.value).join('-');
+                    options.push(`${optionTitle}:${dateString}`);
+
+                    return;
+                }
+
+                if (required) {
+                    unsatisfiedRequiredFields.push(value);
+                }
+            }
+
+            if (type === 'set-select') {
+                const select = value.querySelector('select');
+                const selectedIndex = select.selectedIndex;
+
+                if (selectedIndex !== 0) {
+                    options.push(`${optionTitle}:${select.options[selectedIndex].innerText}`);
+
+                    return;
+                }
+
+                if (required) {
+                    unsatisfiedRequiredFields.push(value);
+                }
+            }
+
+            if (type === 'set-rectangle' || type === 'set-radio' || type === 'swatch' || type === 'input-checkbox' || type === 'product-list') {
+                const checked = value.querySelector(':checked');
+                if (checked) {
+                    if (type === 'set-rectangle' || type === 'set-radio' || type === 'product-list') {
+                        const label = checked.labels[0].innerText;
+                        if (label) {
+                            options.push(`${optionTitle}:${label}`);
+                        }
+                    }
+
+                    if (type === 'swatch') {
+                        const label = checked.labels[0].children[0];
+                        if (label) {
+                            options.push(`${optionTitle}:${label.title}`);
+                        }
+                    }
+
+                    if (type === 'input-checkbox') {
+                        options.push(`${optionTitle}:Yes`);
+                    }
+
+                    return;
+                }
+
+                if (type === 'input-checkbox') {
+                    options.push(`${optionTitle}:No`);
+                }
+
+                if (required) {
+                    unsatisfiedRequiredFields.push(value);
+                }
+            }
+        });
+
+        let productVariant = unsatisfiedRequiredFields.length === 0 ? options.sort().join(', ') : 'unsatisfied';
+        const view = $('.productView');
+
+        if (productVariant) {
+            productVariant = productVariant === 'unsatisfied' ? '' : productVariant;
+            if (view.attr('data-event-type')) {
+                view.attr('data-product-variant', productVariant);
+            } else {
+                const productName = view.find('.productView-title')[0].innerText;
+                const card = $(`[data-name="${productName}"]`);
+                card.attr('data-product-variant', productVariant);
+            }
+        }
+    }
+
     /**
      * Since $productView can be dynamically inserted using render_with,
      * We have to retrieve the respective elements

assets/js/theme/product.js

@@ -30,6 +30,7 @@ export default class Product extends PageManager {
         collapsibleFactory();
 
         this.productDetails = new ProductDetails($('.productView'), this.context, window.BCData.product_attributes);
+        this.productDetails.setProductVariant();
 
         videoGallery();
 

config.json

@@ -31,7 +31,8 @@
       "product_videos",
       "google_amp",
       "customized_checkout",
-      "account_payment_methods"
+      "account_payment_methods",
+      "enhanced_ecommerce"
     ]
   },
   "css_compiler": "scss",

templates/components/amp/products/grid.html

@@ -1,7 +1,7 @@
 <ul class="productGrid">
     {{#each products}}
     <li class="product">
-        {{>components/amp/products/card show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer}}
+        {{>components/amp/products/card  settings=../settings show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer}}
     </li>
     {{/each}}
 </ul>

templates/components/amp/products/list-item.html

@@ -29,7 +29,7 @@ <h4 class="listItem-title">
                         {{#if out_of_stock_message }}
                         <span href="{{url}}" class="button button--primary">{{out_of_stock_message}}</span>
                         {{else}}
-                        <a href="{{add_to_cart_url}}" class="button button--primary">{{lang "products.add_to_cart"}}</a>
+                        <a href="{{add_to_cart_url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}} class="button button--primary">{{lang "products.add_to_cart"}}</a>
                         {{/if}}
                     {{/if}}
                 {{/unless}}

templates/components/amp/products/list.html

@@ -1,7 +1,7 @@
 <ul class="productList">
     {{#each products}}
 	    <li class="product">
-	        {{>components/amp/products/list-item show_rating=../settings.show_product_rating theme_settings=../theme_settings}}
+	        {{>components/amp/products/list-item settings=../settings show_rating=../settings.show_product_rating theme_settings=../theme_settings}}
 	    </li>
     {{/each}}
 </ul>

templates/components/brand/product-listing.html

@@ -1,10 +1,10 @@
 {{> components/products/filter sort=pagination.brand.sort}}
 
-<form action="{{urls.compare}}" method='POST' data-product-compare>
+<form action="{{urls.compare}}" method='POST' {{#if settings.data_tag_enabled}} data-list-name="Brand: {{brand.name}}" {{/if}} 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}}
+        {{> 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}}
+        {{> components/products/list products=brand.products show_compare=brand.show_compare theme_settings=theme_settings event="list"}}
     {{/if}}
 </form>
 

templates/components/cart/content.html

@@ -149,3 +149,4 @@ <h4 class="cart-item-name"><a href="{{url}}">{{name}}</a></h4>
         {{/each}}
     </tbody>
 </table>
+{{{ remote_api_scripts }}}

templates/components/cart/preview.html

@@ -118,7 +118,7 @@ <h4>
             <ul class="productGrid">
                 {{#each cart.suggested_products}}
                     <li class="product">
-                        {{> components/products/card hide_product_quick_view=true theme_settings=../theme_settings}}
+                        {{> components/products/card settings=../settings hide_product_quick_view=true theme_settings=../theme_settings}}
                     </li>
                 {{/each}}
             </ul>

templates/components/category/product-listing.html

@@ -1,10 +1,18 @@
 {{> components/products/filter sort=pagination.category.sort}}
 
-<form action="{{urls.compare}}" method='POST' data-product-compare>
+<form action="{{urls.compare}}" method='POST' {{#if settings.data_tag_enabled}} data-list-name="Category: {{category.name}}" {{/if}} data-product-compare>
     {{#if theme_settings.product_list_display_mode '===' 'grid'}}
-        {{> components/products/grid products=category.products show_compare=category.show_compare theme_settings=theme_settings}}
+        {{#if settings.data_tag_enabled}}
+            {{> components/products/grid products=category.products show_compare=category.show_compare theme_settings=theme_settings event="list" }}
+        {{else}}
+            {{> components/products/grid products=category.products show_compare=category.show_compare theme_settings=theme_settings}}
+        {{/if}}
     {{else}}
-        {{> components/products/list products=category.products show_compare=category.show_compare theme_settings=theme_settings}}
+        {{#if settings.data_tag_enabled}}
+            {{> components/products/list products=category.products show_compare=category.show_compare theme_settings=theme_settings event="list" }}
+        {{else}}
+            {{> components/products/list products=category.products show_compare=category.show_compare theme_settings=theme_settings}}
+        {{/if}}
     {{/if}}
 </form>
 

templates/components/common/body.html

@@ -1,4 +1,4 @@
-<div class="body">
+<div class="body" data-currency-code="{{currency_selector.active_currency_code}}">
     {{#block "hero"}} {{/block}}
     <div class="container">
         {{#block "page"}} {{/block}}

templates/components/common/footer.html

@@ -1,9 +1,22 @@
 {{#if banners.bottom}}
-<div class="banners" data-banner-location="bottom">
-    <div class="banner">
-        {{{limit banners.bottom 1}}}
-    </div>
-</div>
+    {{#if settings.data_tag_enabled}}
+        <div class="banners" data-banner-location="bottom">
+            {{#each (limit banners.bottom_metadata 1)}}
+                <div class="banner" data-event-type="promotion" data-entity-id="{{this.id}}" data-name="{{this.banner-name}}" data-position="{{this.location}}" data-name="{{this.banner-name}}">
+                    <div data-event-type="promotion-click">
+                        {{{this.content}}}
+                    </div>
+                </div>
+            {{/each}}
+        </div>
+    {{else}}
+        <div class="banners" data-banner-location="bottom">
+            <div class="banner">
+                {{{limit banners.bottom 1}}}
+            </div>
+        </div>
+    {{/if}}
+
 {{/if}}
 <footer class="footer" role="contentinfo">
     <div class="container">

templates/components/common/header.html

@@ -1,8 +1,12 @@
 {{#if banners.top}}
 <div class="banners" data-banner-location="top">
-    <div class="banner">
-        {{{limit banners.top 1}}}
+    {{#each (limit banners.top_metadata 1)}}
+    <div class="banner" data-event-type="promotion" data-entity-id="{{this.id}}" data-name="{{this.banner-name}}" data-position="{{this.location}}" data-banner-id="{{this.banner-name}}">
+        <div data-event-type="promotion-click">
+            {{{this.content}}}
+        </div>
     </div>
+    {{/each}}
 </div>
 {{/if}}
 <header class="header" role="banner">

templates/components/products/card.html

@@ -1,4 +1,4 @@
-<article class="card {{#if alternate}}card--alternate{{/if}}">
+<article class="card {{#if alternate}}card--alternate{{/if}}" {{#if settings.data_tag_enabled}} data-event-type="{{event}}" data-entity-id="{{id}}" data-position="{{position}}" data-name="{{name}}" data-product-category="{{#each category}}{{#if @last}}{{this}}{{else}}{{this}}, {{/if}}{{/each}}" data-product-brand="{{brand.name}}" data-product-price="{{#if price.with_tax}}{{price.with_tax.value}}{{else}}{{price.without_tax.value}}{{/if}}"  {{/if}}>
     <figure class="card-figure">
         {{#or price.non_sale_price_with_tax price.non_sale_price_without_tax}}
             {{#if theme_settings.product_sale_badges '===' 'sash'}}
@@ -21,7 +21,7 @@
                 <img class="card-image lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
             </div>
         {{else}}
-            <a href="{{url}}">
+            <a href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>
                 <div class="card-img-container">
                     <img class="card-image lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
                 </div>
@@ -32,7 +32,11 @@
                 {{#unless hide_product_quick_view}}
                     {{#if theme_settings.show_product_quick_view}}
                         {{#unless demo}}
-                            <a href="#" class="button button--small card-figcaption-button quickview" data-product-id="{{id}}">{{lang 'products.quick_view'}}</a>
+                            {{#if settings.data_tag_enabled}}
+                                <a href="#" class="button button--small card-figcaption-button quickview" data-event-type="product-click" data-product-id="{{id}}">{{lang 'products.quick_view'}}</a>
+                            {{else}}
+                                <a href="#" class="button button--small card-figcaption-button quickview" data-product-id="{{id}}">{{lang 'products.quick_view'}}</a>
+                            {{/if}}
                         {{/unless}}
                     {{/if}}
                 {{/unless}}
@@ -44,16 +48,16 @@
                 {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
                     {{#if show_cart_action}}
                         {{#if has_options}}
-                            <a href="{{url}}" class="button button--small card-figcaption-button" data-product-id="{{id}}">{{lang 'products.choose_options'}}</a>
+                            <a href="{{url}}" data-event-type="product-click" class="button button--small card-figcaption-button" data-product-id="{{id}}">{{lang 'products.choose_options'}}</a>
                         {{/if}}
                         {{#if pre_order}}
-                            <a href="{{pre_order_add_to_cart_url}}" class="button button--small card-figcaption-button">{{lang 'products.pre_order'}}</a>
+                            <a href="{{pre_order_add_to_cart_url}}" data-event-type="product-click" class="button button--small card-figcaption-button">{{lang 'products.pre_order'}}</a>
                         {{/if}}
                         {{#if add_to_cart_url }}
-                            <a href="{{add_to_cart_url}}" class="button button--small card-figcaption-button">{{lang 'products.add_to_cart'}}</a>
+                            <a href="{{add_to_cart_url}}" data-event-type="product-click" class="button button--small card-figcaption-button">{{lang 'products.add_to_cart'}}</a>
                         {{/if}}
                         {{#if out_of_stock_message }}
-                            <a href="{{url}}" class="button button--small card-figcaption-button" data-product-id="{{id}}">{{out_of_stock_message}}</a>
+                            <a href="{{url}}" data-event-type="product-click" class="button button--small card-figcaption-button" data-product-id="{{id}}">{{out_of_stock_message}}</a>
                         {{/if}}
                     {{/if}}
                 {{/or}}
@@ -75,7 +79,7 @@ <h4 class="card-title">
             {{#if demo}}
                 {{name}}
             {{else}}
-                <a href="{{url}}">{{name}}</a>
+                <a href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>{{name}}</a>
             {{/if}}
         </h4>
 

templates/components/products/carousel.html

@@ -1,4 +1,5 @@
 <section class="productCarousel"
+    data-list-name="{{list}}"
     data-slick='{
         "dots": true,
         "infinite": false,
@@ -9,7 +10,7 @@
 >
     {{#each products}}
     <div class="productCarousel-slide">
-        {{> components/products/card theme_settings=../theme_settings customer=../customer}}
+            {{> components/products/card settings=../settings theme_settings=../theme_settings customer=../customer event="list" position=(add @index 1)}}
     </div>
     {{/each}}
 </section>

templates/components/products/description.html

@@ -1,5 +1,5 @@
 <p class="productView-title">{{lang 'products.description'}}</p>
-<div class="productView-description">
+<div class="productView-description" {{#if settings.data_tag_enabled}} data-event-type="product" {{/if}}>
     {{{product.description}}}
     {{{snippet 'product_description'}}}
 </div>

templates/components/products/featured.html

@@ -1,9 +1,9 @@
 <h2 class="page-heading">{{lang 'products.featured' }}</h2>
 
-<ul class="productGrid productGrid--maxCol{{ columns }}" data-product-type="featured">
+<ul class="productGrid productGrid--maxCol{{ columns }}" data-product-type="featured" {{#if settings.data_tag_enabled}} data-list-name="Featured Products" {{/if}}>
     {{#each products}}
         <li class="product">
-            {{>components/products/card theme_settings=../theme_settings customer=../customer}}
+                {{>components/products/card settings=../settings theme_settings=../theme_settings customer=../customer event="list" position=(add @index 1)}}
         </li>
     {{/each}}
 </ul>

templates/components/products/grid.html

@@ -1,7 +1,7 @@
 <ul class="productGrid">
     {{#each products}}
     <li class="product">
-        {{>components/products/card show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer}}
+            {{>components/products/card settings=../settings show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer event=../event position=(add @index 1)}}
     </li>
     {{/each}}
 </ul>