diff --git a/README.md b/README.md index 5307c4f10cf33be39beb0ee99c39cd9f038e2778..fe2abaae614637f3e490ccbf79a1ad619e73f546 100644 --- a/README.md +++ b/README.md @@ -52,11 +52,15 @@ Displays a menu and handle the navigation for you. - **`next`**: The `name` attribute of the `` you want to access. -Example : +Example: ```html See profile ``` +## sib-analytics + +*TODO* + ## Interacting with the router ### bind-resources attribute @@ -67,7 +71,7 @@ Example: ```html ``` -will result in : +will result in: ```html ``` diff --git a/examples/analytics.html b/examples/analytics.html new file mode 100644 index 0000000000000000000000000000000000000000..4d1c8c58399d3674bc548e9d3ff82a9cd03f13d9 --- /dev/null +++ b/examples/analytics.html @@ -0,0 +1,56 @@ + + + + + + + SIB test: sib-router + + + + + + + + 1st page + 2nd page + 3rd page + + + + + + + + + diff --git a/index.html b/index.html index 42631d32e1bb8d48074b8863f5570b51c141cbd7..3165d94ddac279fc5ebb23a3466f85d38f122e3a 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,7 @@
  • keep-url + id
  • dialog
  • route-with-id
  • +
  • analytics
  • diff --git a/src/index.js b/src/index.js index aa55fd237866c112f25192f084e6cd7f57e7bef7..f043b84b5660103867119138caacf54fc9a6c8c3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,11 @@ import SIBRouter from './sib-router.js'; import SIBRoute from './sib-route.js'; import SIBLink from './sib-link.js'; +import SIBAnalytics from './sib-analytics.js'; export { SIBRouter, SIBRoute, SIBLink, + SIBAnalytics, }; diff --git a/src/sib-analytics.js b/src/sib-analytics.js new file mode 100644 index 0000000000000000000000000000000000000000..4ff2f18f58efe31c05fe87425bdb7c2a1c2d5ae0 --- /dev/null +++ b/src/sib-analytics.js @@ -0,0 +1,83 @@ +export default class SIBAnalytics extends HTMLElement { + constructor() { + super(); + const type = this.getAttribute('type'); + if(type == null) return; + const vendor = SIBAnalytics.vendors[type]; + if (vendor == null) return; + vendor.init(this.getAttribute('url'), this.getAttribute('id')); + let url = location.href; + document.addEventListener('navigate', () => { + if (url === location.href) return; + url = location.href; + vendor.navigate(url); + }); + } +} + +SIBAnalytics.vendors = { + debug: { + init(url, id) { + console.log('sib-analitics:init'); + console.log(url, id); + window._sibAnalitics = []; + this.navigate(location.href); + }, + navigate(url) { + console.log('sib-analitics:navigate'); + window._sibAnalitics.push([new Date(), url]); + console.table(window._sibAnalitics); + }, + }, + matomo: { + init(url, id) { + var _paq = window._paq || []; + _paq.push(['trackPageView']); + _paq.push(['enableLinkTracking']); + (function() { + var u = url; + _paq.push(['setTrackerUrl', u + 'matomo.php']); + _paq.push(['setSiteId', id]); + var d = document, + g = d.createElement('script'), + s = d.getElementsByTagName('script')[0]; + g.type = 'text/javascript'; + g.async = true; + g.defer = true; + g.src = u + 'matomo.js'; + s.parentNode.insertBefore(g, s); + })(); + }, + navigate(url) { + _paq.push(['setCustomUrl', url]); + _paq.push(['trackPageView']); + }, + }, + google: { + init(url = 'https://www.google-analytics.com/analytics.js', id) { + (function(i, s, o, g, r, a, m) { + i['GoogleAnalyticsObject'] = r; + (i[r] = + i[r] || + function() { + (i[r].q = i[r].q || []).push(arguments); + }), + (i[r].l = 1 * new Date()); + (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]); + a.async = 1; + a.src = g; + m.parentNode.insertBefore(a, m); + })(window, document, 'script', url, 'ga'); + + ga('create', id, 'auto'); + ga('send', 'pageview'); + }, + navigate(url) { + ga('send', 'pageview', url); + }, + }, +}; + +if (!customElements.get('sib-analytics')) { + customElements.define('sib-analytics', SIBAnalytics); +}