Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
拡張Eコマースを実装するときのベストプラクティス(トラッキングコード実装)
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.