拡張Eコマースを実装するときのベストプラクティス（トラッキングコード実装）

ecommerce-tagmanager.html

<script>
;(function ($) {
  window.dataLayer = window.dataLayer || [];
  $(function () {
    var each_slice = function(arr, num, fn) {
      if(fn === undefined) fn = function(){};
      for(var i=0,l=arr.length,count=0,slice=[],ret=[]; i<l; i++) {
        if(count >= num) {
          fn.apply(slice);
          ret.push(slice);
          count=0, slice=[];
        }
        slice.push(arr[i]);
        count++;
      }
      if (slice.length > 0) {
        fn.apply(slice);
        ret.push(slice);
      }
      return ret;
    };

    // please change if needed.
    var getProduct = function ($element, defaults) {
      defaults = defaults || {};
      // left side is google analytics attributes name
      // right side is data attributes name
      defaults['id'] = $element.data('id');
      defaults['name'] = $element.data('name');
      defaults['category'] = $element.data('category');
      defaults['price'] = $element.data('price');
      return defaults;
    };

    // Impresions
    var items = [];
    $('[data-list-name]').each(function(listIndex, listBox) {
      var page = $(listBox).data('page') || 1;
      var count_per_page = $(listBox).data('count-per-page') || 0;
      $(listBox).find('.product-box').each(function(index, linkBox) {
        var position = (page - 1) * count_per_page + index + 1;
        items.push( getProduct($(linkBox), {
          'list': $(listBox).data('list-name'),
          'position': position
        }));
      });
    });
    if (items.length > 0) {
      each_slice(items, 10, function() {
        dataLayer.push({
          'event': 'Impressions',
          'ecommerce': { 'impressions': this }
        });
      });
    }

    // Product Click
    $('[data-list-name]').each(function(listIndex, listBox) {
      var page = $(listBox).data('page') || 1;
      var count_per_page = $(listBox).data('count-per-page') || 0;
      $(listBox).find('.product-box').each(function(index, linkBox) {
        var position = (page - 1) * count_per_page + index + 1;
        $(linkBox).find('.product-link').on('click', function (evt) {
          var items = [];
          items.push( getProduct($(linkBox), {
            'position': position
          }));
          dataLayer.push({
            'event': 'Product Clicked',
            'ecommerce': {
              'click': {
                'actionField': {
                  'list': $(listBox).data('list-name')
                },
                'products': items
              }
            }
          });
          sessionStorage['productListName'] = $(listBox).data('list-name');
        });
      });
    });

    // Detail
    $('.product-detail').each(function(index, detail) {
      dataLayer.push({
        'event': 'Product Detail',
        'ecommerce': {
          'detail': {
            'actionField': {
              'list': sessionStorage['productListName']
            },
            'products': [
              getProduct($(detail))
            ]
          }
        }
      });
    });

    $('.add-to-cart').on('click', function(){
      var items = [
        getProduct( $( $(this).closest('.product-detail, .product-box')), {
          'quantity': 1
        })
      ];
      dataLayer.push({
        'event': 'Add to Cart',
        'ecommerce': {
          'add': {
            'products': items
          }
        }
      });
    });

    // Add to Cart, Checkout Process, Purchase
    if ( $('#purchase-data').is('*') ) {
      var items = [];
      $('.purchase-product').each(function (index, product) {
        items.push( getProduct($(product), {
          'quantity': $(product).data('quantity')
        }));
      });
      var $information = $('.purchase-information');
      if ( $information.data('step') == 'complete' ) {
        dataLayer.push({
          'event': 'Purchase',
          'ecommerce': {
            'purchase': {
              'actionField': {
                'id': $information.data('transaction-id')
              },
              'products': items
            }
          }
        })
      } else {
        dataLayer.push({
          'event': 'Checkout',
          'ecommerce': {
            'checkout': {
              'actionField': { 'step': $information.data('step'), 'option': $information.data('option') },
              'products': items
            }
          }
        });
      }
    }
  });
})(jQuery);
</script>