Skip to content
This repository has been archived by the owner on Mar 18, 2021. It is now read-only.

Commit

Permalink
COM-20077-GA-event-doesnt-work
Browse files Browse the repository at this point in the history
  • Loading branch information
ciastektk committed Dec 6, 2018
1 parent a95fa38 commit ae02081
Show file tree
Hide file tree
Showing 15 changed files with 216 additions and 143 deletions.
3 changes: 3 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["es2015"]
}
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@
!var/SymfonyRequirements.php
/vendor/
/web/bundles/

/node_modules/
/package-lock.json
/web/assets/js/compiled/
.php~

# Legacy related ignores, that are generated by composer (settings not handled out of the box)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{% extends '@ezdesign/pagelayout.html.twig' %}

{% block gaCategory %}bundles{% endblock %}

{% block content %}
<section class="bundle-list">
<div class="bundle-list__header">
Expand Down Expand Up @@ -66,7 +68,7 @@
}
} only %}
<div class="row">
<div class="button-load-more mx-auto pagerfanta">
<div class="mx-auto pagerfanta">
{{ pagerfanta(pager, 'bundles_list') }}
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions app/Resources/views/themes/ezplatform/full/home.html.twig
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{% extends '@ezdesign/pagelayout.html.twig' %}

{% block gaCategory %}Downloads{% endblock %}

{% block main %}
<main class="white-background">
{% endblock %}
Expand Down
28 changes: 13 additions & 15 deletions app/Resources/views/themes/ezplatform/line/bundle_card.html.twig
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
<div class="bundle-card bundle-card--line{% if extra.page is defined %} page-{{ extra.page }}{% endif %}">
<div class="bundle-card {% if extra.page is defined %} page-{{ extra.page }}{% endif %}">
<a href="{{ path(ez_route('_ezplatform_bundle_details', {'locationId': locationId })) }}" title="See bundle details">
<div class="bundle-card__container bundle-card__container--line">
<div class="bundle-card__header bundle-card__header--line">
<div class="bundle-card__name">
{% if packageDetails.authorAvatarUrl is defined and packageDetails.author.name is defined %}
<div class="bundle-card__avatar">
<img src="{{ packageDetails.authorAvatarUrl }}?s=100" alt="{{ packageDetails.author.name }}" />
</div>
<div class="bundle-card__owner">
<span class="bundle-card__owner-label">Made by:</span>
<span class="bundle-card__owner-author">{{ packageDetails.author.name|truncate(20, true) }}</span>
</div>
{% endif %}
</div>
<div class="bundle-card__container">
<div class="bundle-card__header">
{% if packageDetails.authorAvatarUrl is defined and packageDetails.author.name is defined %}
<div class="bundle-card__avatar">
<img src="{{ packageDetails.authorAvatarUrl }}?s=100" alt="{{ packageDetails.author.name }}" />
</div>
<div class="bundle-card__owner">
<span class="bundle-card__owner-label">Made by:</span>
<span class="bundle-card__owner-author">{{ packageDetails.author.name|truncate(20, true) }}</span>
</div>
{% endif %}
</div>
<div class="bundle-card__body bundle-card__body--line">
<div class="bundle-card__body">
<div class="bundle-card__name">
<h2>{{ ez_render_field(content, 'name') }}</h2>
</div>
Expand Down
5 changes: 4 additions & 1 deletion app/Resources/views/themes/ezplatform/pagelayout.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
{% block canonical %}
{% endblock %}
</head>
<body>
<body data-ga-category="{% block gaCategory %}{% endblock %}">
{% block main %}
<main>
{% endblock %}
Expand All @@ -60,6 +60,9 @@
'bundles/ezplatformadminuiassets/vendors/bootstrap/dist/js/bootstrap.min.js'
'assets/js/prism.js'
'assets/js/app.js'
'assets/js/Utils.js'
'assets/js/GoogleAnalyticsItem.js'
'assets/js/GoogleAnalyticsService.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,29 @@
<ul class="nav nav-pills nav-justified" role="tablist">
{% if not ez_is_field_empty(content, 'composer_description') %}
<li class="nav-item">
<a href="#composer-option" class="nav-link active show" data-toggle="tab" role="tab">
<a href="#composer-option" class="nav-link active show" data-toggle="tab" data-ga-action="Composer tab" role="tab">
<img src="{{ asset('images/composer.svg', 'ezdesign') }}" alt="Download" class="download">
<div class="label">Composer</div>
</a>
</li>
{% endif %}
<li class="nav-item">
<a href="#ezlaunchpad-option" class="nav-link" data-toggle="tab" role="tab">
<a href="#ezlaunchpad-option" class="nav-link" data-toggle="tab" data-ga-action="eZ launchpad tab" role="tab">
<img src="{{ asset('images/ez-launchpad.svg', 'ezdesign') }}" alt="eZ Launchpad" class="download">
<div class="label">eZ Launchpad</div>
</a>
</li>
{% if not ez_is_field_empty(content, 'platform_sh_description') %}
<li class="nav-item">
<a href="#platform-sh-option" class="nav-link" data-toggle="tab" role="tab">
<a href="#platform-sh-option" class="nav-link" data-toggle="tab" data-ga-action="platform.sh tab" role="tab">
<img src="{{ asset('images/platform-sh-logo.svg', 'ezdesign') }}" alt="Download" class="download">
<div class="label">platform.sh</div>
</a>
</li>
{% endif %}
{% if not ez_is_field_empty(content, 'download_description') %}
<li class="nav-item">
<a href="#download-option" class="nav-link" data-toggle="tab" role="tab">
<a href="#download-option" class="nav-link" data-toggle="tab" data-ga-action="Download tab" role="tab">
<img src="{{ asset('images/download.svg', 'ezdesign') }}" alt="Download" class="download">
<div class="label">Download</div>
</a>
Expand Down Expand Up @@ -88,7 +88,7 @@
{% endif %}

{% for release in releases %}
<tr class="releases">
<tr class="releases" data-ga-action="Download" data-ga-label="{{ ez_field_value(release, 'release_version') }}">
<th scope="row"{% if ez_field_value(release, 'lts').bool %} class="lts"{% endif %}>
<a href="{{ ez_field_value(release, 'file') }}">{{ ez_render_field(release, 'release_version') }}</a>
</th>
Expand Down Expand Up @@ -132,7 +132,7 @@
{% endif %}

<div role="tabpanel" class="tab-pane" id="ezlaunchpad-option">
<div class="details">
<div class="details" data-ga-action="Download code">
<h3>eZ Launchpad</h3>
{% if content.fields['launchpad_description'] is defined and not ez_is_field_empty(content, 'launchpad_description') %}
<div class="description text-center">
Expand Down
19 changes: 19 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"name": "ezplatform.com",
"version": "2.3.0",
"author": "eZ Systems",
"homepage": "ez.no",
"scripts": {
"test": "mocha --compilers js:babel-core/register ./test/*.spec.js"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"chai": "^4.2.0",
"chai-dom": "^1.8.1",
"jsdom": "^13.0.0",
"mocha": "^5.2.0",
"sinon": "^7.1.1"
}
}
62 changes: 62 additions & 0 deletions test/googleAnalyticsService.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
const expect = require('chai').expect,
{ JSDOM } = require("jsdom"),
GoogleAnalyticsService = require('../web/assets/js/GoogleAnalyticsService');

describe('GoogleAnalytics', () => {
describe('GoogleAnalyticsService', () => {
let gaService,
document;

const template = '/html/gaTemplate.html',
gaDataAttr = 'data-ga-action',
gaCategoryAttr = 'data-ga-category',
gaLabelAttr = 'data-ga-label';

beforeEach(() => {
gaService = new GoogleAnalyticsService();

return JSDOM.fromFile(__dirname + template)
.then(dom => {
return document = dom.window.document;
})
.catch(error => {
console.log(error);
});
});

it('should return instance of GoogleAnalyticsService', () => {
expect(gaService).to.be.instanceOf(GoogleAnalyticsService);
});

it ('should find selectors with data attribute data-ga-action', () => {
return expect(document.querySelectorAll(`[${gaDataAttr}]`)).not.to.have.lengthOf(0);
});

it ('should return value for each data-ga-action attribute', () => {
let selectors = document.querySelectorAll(`[${gaDataAttr}]`);
selectors.forEach(selector => {
return expect(selector.getAttribute(gaDataAttr)).not.to.have.lengthOf(0);
});
});

it ('should return true if body has data-ga-category attribute', () => {
return expect(document.body.hasAttribute(gaCategoryAttr)).to.be.true;
});

it ('should return value for data-ga-category attribute', () => {
return expect(document.querySelector(`[${gaCategoryAttr}]`).getAttribute(gaCategoryAttr)).not.to.have.lengthOf(0);
});

it ('should return Google Analytics Label if data-ga-label attribute exists', () => {
let selectors = document.querySelectorAll(`[${gaLabelAttr}]`);
selectors.forEach(selector => {
return expect(selector.getAttribute(gaLabelAttr)).not.to.have.lengthOf(0);
});
});

it ('should set event listener for every selector with data-ga-action attribute', () => {
// @TODO;
});

});
});
10 changes: 10 additions & 0 deletions test/html/gaTemplate.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head></head>
<body data-ga-category="dwadwa">
<p data-ga-action="action1">Action name</p>
<p data-ga-action="action2">Action name</p>
<p data-ga-label="label">Label</p>
<p data-ga-label="label2">Label</p>
</body>
</html>
12 changes: 12 additions & 0 deletions web/assets/js/GoogleAnalyticsItem.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
class GoogleAnalyticsItem {

constructor(type = 'event', category, action, label = null, transport = {}) {
this.type = type;
this.category = category;
this.action = action;
this.label = label;
this.transport = transport;
}
}

module.exports = GoogleAnalyticsItem;
50 changes: 50 additions & 0 deletions web/assets/js/GoogleAnalyticsService.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
class GoogleAnalyticsService {

constructor () {
this.gaDataAttr = 'data-ga-action';
this.gaCategoryAttr = 'data-ga-category';
this.gaLabelAttr = 'data-ga-label';
}

init() {
const gaSelectors = document.querySelectorAll(`[${this.gaDataAttr}]`);

if (gaSelectors.length > 0) {
gaSelectors.forEach(selector => {
selector.addEventListener('click', (event) => {
let action = event.currentTarget.getAttribute('data-ga-action'),
category = this.getGACategory();

this.sendGARequest(new GoogleAnalyticsItem('event', category , action, this.getGALabel(selector)));
});
});
}
}

getGACategory() {
const body = document.body;

return body.hasAttribute(this.gaCategoryAttr) ? Utils.capitalize(body.getAttribute(this.gaCategoryAttr)) : null;
}

getGALabel(selector) {
if (typeof selector !== "undefined") {
return selector.hasAttribute(this.gaLabelAttr) ? selector.getAttribute(this.gaLabelAttr) : null;
}
}

sendGARequest(gaItem) {
if (gaItem instanceof GoogleAnalyticsItem) {
ga(
'send',
gaItem.type,
gaItem.category,
gaItem.action,
gaItem.label = typeof gaItem.label !== "undefined" ? gaItem.label : delete gaItem.label,
gaItem.transport = typeof gaItem.transport !== "undefined" ? gaItem.transport : delete gaItem.transport
);
}
}
}

module.exports = GoogleAnalyticsService;
6 changes: 6 additions & 0 deletions web/assets/js/Utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
class Utils {

static capitalize (string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
}

0 comments on commit ae02081

Please sign in to comment.