Skip to content

Commit

Permalink
Merge pull request #17 from driveback/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@ConstantineYurevich
ConstantineYurevich committed Mar 15, 2016
2 parents 08b57b3 + 69b5e58 commit 50391b0
Show file tree
Hide file tree
Showing 5 changed files with 93 additions and 31 deletions.
58 changes: 44 additions & 14 deletions dist/dd-manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5479,6 +5479,10 @@ function _classCallCheck(instance, Constructor) {
* - data-ddl-viewed-campaign="<campaign_id>"
* - data-ddl-clicked-product="<product_id>"
* - data-ddl-clicked-campaign="<campaign_id>"
*
* If any DOM components are added to the page dynamically
* corresponding digitalData variable should be updated:
* digitalData.list, digitalData.recommendation or digitalData.campaigns
*/

var DOMComponentsTracking = (function () {
Expand Down Expand Up @@ -5530,7 +5534,9 @@ var DOMComponentsTracking = (function () {
_this.addClickHandlers(['product']);
}]);
window.ddListener.push(['on', 'change:campaigns', function () {
_this.removeClickHandlers(['campaign']);
_this.defineDigitalDataDomComponents(['campaign']);
_this.addClickHandlers(['campaign']);
}]);

this.defineDocBoundaries();
Expand Down Expand Up @@ -5599,13 +5605,14 @@ var DOMComponentsTracking = (function () {
}

var onClick = function onClick(type) {
return function (e) {
var $el = window.jQuery(e.target);
var self = _this3;
return function onClickHandler() {
var $el = window.jQuery(this);
var id = $el.data('ddl-clicked-' + type);
if (type === 'product') {
_this3.fireClickedProduct(id);
self.fireClickedProduct(id);
} else if (type === 'campaign') {
_this3.fireClickedCampaign(id);
self.fireClickedCampaign(id);
}
};
};
Expand All @@ -5624,7 +5631,7 @@ var DOMComponentsTracking = (function () {

var type = _ref2;

var eventName = 'click.ddl-viewed-' + type;
var eventName = 'click.ddl-clicked-' + type;
this.$digitalDataComponents[type].click.bind(eventName, onClick(type));
}
};
Expand All @@ -5647,7 +5654,7 @@ var DOMComponentsTracking = (function () {

var type = _ref3;

var eventName = 'click.ddl-viewed-' + type;
var eventName = 'click.ddl-clicked-' + type;
this.$digitalDataComponents[type].click.unbind(eventName);
}
};
Expand All @@ -5658,7 +5665,6 @@ var DOMComponentsTracking = (function () {
var _trackViews = function _trackViews() {
(0, _each2['default'])(_this4.$digitalDataComponents, function (type, $components) {
var newViewedComponentIds = [];

$components.view.each(function (index, el) {
var $el = window.jQuery(el);
var id = $el.data('ddl-viewed-' + type);
Expand Down Expand Up @@ -5700,19 +5706,19 @@ var DOMComponentsTracking = (function () {
});
};

DOMComponentsTracking.prototype.fireClickedProduct = function fireClickedProduct(productIds) {
DOMComponentsTracking.prototype.fireClickedProduct = function fireClickedProduct(productId) {
window.digitalData.events.push({
name: 'Clicked Product',
category: 'Ecommerce',
product: productIds
product: productId
});
};

DOMComponentsTracking.prototype.fireClickedCampaign = function fireClickedCampaign(campaignIds) {
DOMComponentsTracking.prototype.fireClickedCampaign = function fireClickedCampaign(campaignId) {
window.digitalData.events.push({
name: 'Clicked Campaign',
category: 'Promo',
campaign: campaignIds
campaign: campaignId
});
};

Expand All @@ -5725,20 +5731,44 @@ var DOMComponentsTracking = (function () {
*/

DOMComponentsTracking.prototype.isVisible = function isVisible($elem) {
var el = $elem[0];

var elemOffset = $elem.offset();
var elemWidth = $elem.width();
var elemHeight = $elem.height();
var elemOffset = $elem.offset();

var elemTop = elemOffset.top;
var elemBottom = elemTop + elemHeight;
var elemLeft = elemOffset.left;
var elemRight = elemLeft + elemWidth;

var visible = $elem.is(':visible') && $elem.css('opacity') > 0 && $elem.css('visibility') !== 'hidden';
if (!visible) {
return false;
}

var fitsVertical = elemBottom - elemHeight / 4 <= this.docViewBottom && elemTop + elemHeight / 4 >= this.docViewTop;
var fitsHorizontal = elemLeft + elemWidth / 4 >= this.docViewLeft && elemRight - elemWidth / 4 <= this.docViewRight;

return $elem.is(':visible') && fitsVertical && fitsHorizontal;
if (!fitsVertical || !fitsHorizontal) {
return false;
}

var elementFromPoint = document.elementFromPoint(elemLeft - this.docViewLeft + elemWidth / 2, elemTop - this.docViewTop + elemHeight / 2);
while (elementFromPoint && elementFromPoint !== el && elementFromPoint.parentNode !== document) {
elementFromPoint = elementFromPoint.parentNode;
}
return !!elementFromPoint && elementFromPoint === el;
};

/**
* Find elements by data attribute name
*
* @param name
* @param obj
* @returns jQuery object
*/

DOMComponentsTracking.prototype.findByDataAttr = function findByDataAttr(name, obj) {
if (!obj) obj = window.jQuery(document.body);
return obj.find('[data-' + name + ']');
Expand Down Expand Up @@ -6864,7 +6894,7 @@ function _prepareGlobals() {

var ddManager = {

VERSION: '1.0.5',
VERSION: '1.0.6',

setAvailableIntegrations: function setAvailableIntegrations(availableIntegrations) {
_availableIntegrations = availableIntegrations;
Expand Down
4 changes: 2 additions & 2 deletions dist/dd-manager.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "digital-data-manager",
"description": "The hassle-free way to integrate Digital Data Layer on your website.",
"author": "Driveback LLC <[email protected]>",
"version": "1.0.5",
"version": "1.0.6",
"license": "MIT",
"main": "dist/dd-manager.js",
"directories": {
Expand Down
58 changes: 45 additions & 13 deletions src/DOMComponentsTracking.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import each from './functions/each.js';
* - data-ddl-viewed-campaign="<campaign_id>"
* - data-ddl-clicked-product="<product_id>"
* - data-ddl-clicked-campaign="<campaign_id>"
*
* If any DOM components are added to the page dynamically
* corresponding digitalData variable should be updated:
* digitalData.list, digitalData.recommendation or digitalData.campaigns
*/
class DOMComponentsTracking
{
Expand Down Expand Up @@ -56,7 +60,9 @@ class DOMComponentsTracking
this.addClickHandlers(['product']);
}]);
window.ddListener.push(['on', 'change:campaigns', () => {
this.removeClickHandlers(['campaign']);
this.defineDigitalDataDomComponents(['campaign']);
this.addClickHandlers(['campaign']);
}]);

this.defineDocBoundaries();
Expand Down Expand Up @@ -108,19 +114,20 @@ class DOMComponentsTracking
}

const onClick = (type) => {
return (e) => {
const $el = window.jQuery(e.target);
const self = this;
return function onClickHandler() {
const $el = window.jQuery(this);
const id = $el.data('ddl-clicked-' + type);
if (type === 'product') {
this.fireClickedProduct(id);
self.fireClickedProduct(id);
} else if (type === 'campaign') {
this.fireClickedCampaign(id);
self.fireClickedCampaign(id);
}
};
};

for (const type of types) {
const eventName = 'click.ddl-viewed-' + type;
const eventName = 'click.ddl-clicked-' + type;
this.$digitalDataComponents[type].click.bind(eventName, onClick(type));
}
}
Expand All @@ -130,7 +137,7 @@ class DOMComponentsTracking
types = ['product', 'campaign'];
}
for (const type of types) {
const eventName = 'click.ddl-viewed-' + type;
const eventName = 'click.ddl-clicked-' + type;
this.$digitalDataComponents[type].click.unbind(eventName);
}
}
Expand All @@ -139,7 +146,6 @@ class DOMComponentsTracking
const _trackViews = () => {
each(this.$digitalDataComponents, (type, $components) => {
const newViewedComponentIds = [];

$components.view.each((index, el) => {
const $el = window.jQuery(el);
const id = $el.data('ddl-viewed-' + type);
Expand Down Expand Up @@ -181,19 +187,19 @@ class DOMComponentsTracking
});
}

fireClickedProduct(productIds) {
fireClickedProduct(productId) {
window.digitalData.events.push({
name: 'Clicked Product',
category: 'Ecommerce',
product: productIds,
product: productId,
});
}

fireClickedCampaign(campaignIds) {
fireClickedCampaign(campaignId) {
window.digitalData.events.push({
name: 'Clicked Campaign',
category: 'Promo',
campaign: campaignIds,
campaign: campaignId,
});
}

Expand All @@ -205,14 +211,22 @@ class DOMComponentsTracking
* @returns boolean
*/
isVisible($elem) {
const el = $elem[0];

const elemOffset = $elem.offset();
const elemWidth = $elem.width();
const elemHeight = $elem.height();
const elemOffset = $elem.offset();

const elemTop = elemOffset.top;
const elemBottom = elemTop + elemHeight;
const elemLeft = elemOffset.left;
const elemRight = elemLeft + elemWidth;

const visible = $elem.is(':visible') && $elem.css('opacity') > 0 && $elem.css('visibility') !== 'hidden';
if (!visible) {
return false;
}

const fitsVertical = (
((elemBottom - elemHeight / 4) <= this.docViewBottom) &&
((elemTop + elemHeight / 4) >= this.docViewTop)
Expand All @@ -222,9 +236,27 @@ class DOMComponentsTracking
(elemRight - elemWidth / 4 <= this.docViewRight)
);

return $elem.is(':visible') && fitsVertical && fitsHorizontal;
if (!fitsVertical || !fitsHorizontal) {
return false;
}

let elementFromPoint = document.elementFromPoint(
elemLeft - this.docViewLeft + elemWidth / 2,
elemTop - this.docViewTop + elemHeight / 2
);
while (elementFromPoint && elementFromPoint !== el && elementFromPoint.parentNode !== document) {
elementFromPoint = elementFromPoint.parentNode;
}
return (!!elementFromPoint && elementFromPoint === el);
}

/**
* Find elements by data attribute name
*
* @param name
* @param obj
* @returns jQuery object
*/
findByDataAttr(name, obj) {
if (!obj) obj = window.jQuery(document.body);
return obj.find('[data-' + name + ']');
Expand Down
2 changes: 1 addition & 1 deletion src/ddManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ function _prepareGlobals() {

const ddManager = {

VERSION: '1.0.5',
VERSION: '1.0.6',

setAvailableIntegrations: (availableIntegrations) => {
_availableIntegrations = availableIntegrations;
Expand Down

0 comments on commit 50391b0

Please sign in to comment.