New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@visual-framework/vf-analytics-google
Advanced tools
@visual-framework/vf-analytics-google - npm Package Compare versions
Comparing version 1.0.0-alpha.0 to 1.0.0-alpha.1
@@ -1,15 +0,13 @@ | ||
| # 1.0.0-alpha.0 | ||
| # Changelog | ||
| ### Added | ||
| - added this | ||
| - added that | ||
| ## 1.0.0-alpha.1 | ||
| ### Changes | ||
| https://github.com/visual-framework/vf-core/issues/963 | ||
| - changed this | ||
| - changed that | ||
| - Track the name of the link clicked | ||
| - Track the region of the link clicked (global nav, masthead, hero, main content, footer, etc) | ||
| - Track file type (PDF, DOC, etc) | ||
| ### Removed | ||
| ## 1.0.0-alpha.0 | ||
| - deleted this | ||
| - deleted that | ||
| - Initial release |
| { | ||
| "version": "1.0.0-alpha.0", | ||
| "version": "1.0.0-alpha.1", | ||
| "name": "@visual-framework/vf-analytics-google", | ||
@@ -23,3 +23,3 @@ "description": "vf-analytics-google component", | ||
| ], | ||
| "gitHead": "6c143524e7b9a108997954f5cc3079460b14cbbc" | ||
| "gitHead": "d7d571718e85d1f0c1ff3381ece0a029a8c3f494" | ||
| } |
@@ -5,7 +5,7 @@ # Google Analytics enhancements component | ||
| Supplementary behaviour (primarily JavaScript) to ease tracking with Google Analytics. | ||
| Supplementary behaviour (primarily JavaScript) to ease tracking with Google Analytics. | ||
| ## Usage | ||
| This component will grow over time with additional event tracking behaviours. | ||
| This component will grow over time with additional event tracking behaviours. | ||
@@ -25,2 +25,20 @@ ### Meta tags | ||
| ### Region tracking | ||
| You can track the region of the page a link is in: | ||
| ```html | ||
| <div data-vf-google-anlaytics-region="main-content-area-OR-SOME-OTHER-NAME"> | ||
| <a href="//www.example.com">My link here</a> | ||
| </div> | ||
| ``` | ||
| Notes: | ||
| - region names should not be repeated on the same page | ||
| - nested regions are currently not fully supported | ||
| ### Verbos logging | ||
| `<body data-vf-google-analytics-verbose="true">` | ||
| ### JavaScript | ||
@@ -47,3 +65,3 @@ | ||
| // import { vfGaIndicateLoaded } from '../components/raw/vf-analytics-google/vf-analytics-google.js'; | ||
| vfGaIndicateLoaded(); | ||
| vfGaIndicateLoaded(); | ||
| ``` | ||
@@ -50,0 +68,0 @@ |
@@ -27,2 +27,8 @@ // vf-analytics-google | ||
| /** | ||
| * Track the last time an event was sent (don't double send) | ||
| * @param {Date} lastGaEventTime | ||
| */ | ||
| var lastGaEventTime = Date.now(); | ||
| /** | ||
| * We poll the document until we find GA has loaded, or we've tried a few times. | ||
@@ -66,3 +72,3 @@ * Port of https://github.com/ebiwd/EBI-Framework/blob/v1.3/js/foundationExtendEBI.js#L4 | ||
| } | ||
| } | ||
@@ -97,3 +103,3 @@ | ||
| // Need help | ||
| // Need help | ||
| // How to add dimension to your property | ||
@@ -107,3 +113,3 @@ // https://developers.google.com/analytics/devguides/collection/analyticsjs/custom-dims-mets | ||
| // lookup metadata <meta name="vf:page-type" content="category;pageTypeHere"> | ||
| // lookup metadata <meta name="vf:page-type" content="category;pageTypeHere"> | ||
| // Pass your GA dimension with a `;` divider | ||
@@ -117,7 +123,7 @@ var pageType = vfGetMeta('vf:page-type'); | ||
| } | ||
| // standard google analytics bootstrap | ||
| // @todo: add conditional | ||
| ga('send', 'pageview'); | ||
| // If we want to send metrics in one go | ||
@@ -128,4 +134,129 @@ // ga('set', { | ||
| // }); | ||
| vfGaLinkTrackingInit(); | ||
| } | ||
| /** | ||
| * Track page links as events | ||
| */ | ||
| function vfGaLinkTrackingInit() { | ||
| // jQuery("body.google-analytics-loaded .track-with-analytics-events a").on('mousedown', function(e) { | ||
| // analyticsTrackInteraction(e.target,'Manually tracked area'); | ||
| // }); | ||
| document.body.onclick = function(e){ | ||
| e = e || event; | ||
| var from = findParent('a',e.target || e.srcElement); | ||
| if (from){ | ||
| /* it's a link, actions here */ | ||
| console.log('click',from); | ||
| analyticsTrackInteraction(from); | ||
| } | ||
| } | ||
| //find first parent with tagName [tagname] | ||
| function findParent(tagname,el){ | ||
| while (el){ | ||
| if ((el.nodeName || el.tagName).toLowerCase()===tagname.toLowerCase()){ | ||
| return el; | ||
| } | ||
| el = el.parentNode; | ||
| } | ||
| return null; | ||
| } | ||
| } | ||
| /** | ||
| * Utility method to get the last in an array | ||
| * @returns {var} the last item in the array | ||
| * @example linkName = actedOnItem.src.split('/').vfGaLinkLast(); | ||
| */ | ||
| if (!Array.prototype.vfGaLinkLast){ | ||
| Array.prototype.vfGaLinkLast = function(){ | ||
| return this[this.length - 1]; | ||
| }; | ||
| }; | ||
| /** | ||
| * Analytics tracking | ||
| * --- | ||
| * This code tracks the user's clicks in various parts of the site and logs them as GA events.<br/> | ||
| * Links in non-generic regions can be tracked by adding '.track-with-analytics-events' to a parent div. Careful with the scoping. | ||
| * | ||
| * Dev note: | ||
| * add class verbose-analytics to your body for a readout to console on clicks. | ||
| * | ||
| * @param {element} actedOnItem | ||
| * @param {string} customEventName Event action | ||
| * @example | ||
| * jQuery(".analytics-content-footer").on('mousedown', 'a, button', function(e) { | ||
| * analyticsTrackInteraction(e.target,'Content footer'); | ||
| * }); | ||
| */ | ||
| function analyticsTrackInteraction(actedOnItem, customEventName) { | ||
| var customEventName = customEventName || []; // you can pass some custom text as a 3rd param | ||
| let linkName; | ||
| if (customEventName.length > 0) { | ||
| linkName = customEventName; | ||
| } else { // then derive a value | ||
| linkName = actedOnItem.innerText; | ||
| console.log('linkName',linkName); | ||
| // if there's no text, it's probably and image | ||
| if (linkName.length == 0 && actedOnItem.hasAttribute('src')) linkName = actedOnItem.src.split('/').vfGaLinkLast(); | ||
| if (linkName.length == 0 && actedOnItem.value) linkName = actedOnItem.value; | ||
| // special things for gloabl search box | ||
| // if (parentContainer == 'Global search') { | ||
| // linkName = 'query: ' + jQuery('#global-search input#query').value; | ||
| // } | ||
| } | ||
| // Get closest parent container | ||
| // Track the region of the link clicked (global nav, masthead, hero, main content, footer, etc) | ||
| //data-vf-google-anlaytics-region="main-content-area-OR-SOME-OTHER-NAME" | ||
| let parentContainer = actedOnItem.closest("[data-vf-google-anlaytics-region]"); | ||
| if (parentContainer) { | ||
| parentContainer = parentContainer.dataset.vfGoogleAnlayticsRegion; | ||
| } else { | ||
| parentContainer = 'No container specified'; | ||
| } | ||
| // send to GA | ||
| // Only if more than 100ms has past since last click. | ||
| // Due to our structure, we fire multiple events, so we only send to GA the most specific event resolution | ||
| if ((Date.now() - lastGaEventTime) > 150) { | ||
| // track link name and region | ||
| ga && ga('send', 'event', 'UI', 'UI Element / ' + parentContainer, linkName); | ||
| // Track file type (PDF, DOC, etc) or if mailto | ||
| // adapted from https://www.blastanalytics.com/blog/how-to-track-downloads-in-google-analytics | ||
| var filetypes = /\.(zip|exe|pdf|doc*|xls*|ppt*|mp3)$/i; | ||
| var baseHref = ''; | ||
| var href = actedOnItem.href; | ||
| if (href && href.match(/^mailto\:/i)) { | ||
| var mailLink = href.replace(/^mailto\:/i, ''); | ||
| ga && ga('send', 'event', 'Email', 'Region / ' + parentContainer, mailLink); | ||
| } | ||
| if (href && href.match(filetypes)) { | ||
| var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined; | ||
| var filePath = href; | ||
| ga && ga('send', 'event', 'Download', 'Type / ' + extension + ' / ' + parentContainer, filePath); | ||
| } | ||
| // note that we've stored an event(s) | ||
| lastGaEventTime = Date.now(); | ||
| // conditional logging | ||
| let conditionalLoggingCheck = document.querySelector('body'); | ||
| // debug: always turn on verbos analytics | ||
| // conditionalLoggingCheck.setAttribute('data-vf-google-analytics-verbose', 'true'); | ||
| if (conditionalLoggingCheck.dataset.vfGoogleAnalyticsVerbose) { | ||
| console.log('%c Verbose analytics on ', 'color: #FFF; background: #111; font-size: .75rem;'); | ||
| console.log('clicked on: %o ',actedOnItem); | ||
| console.log('sent to GA: ', 'event ->', 'UI ->', 'UI Element / ' + parentContainer + ' ->', linkName, '; at: ',lastGaEventTime); | ||
| } | ||
| } | ||
| } | ||
| // You should also import it at ./components/vf-core/scripts.js | ||
@@ -132,0 +263,0 @@ // import { vfcomponentName } from '../components/raw/vf-analytics-google/vf-analytics-google.js'; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by48.06%
16550
- Lines of code
- increased by65.38%
301
- Number of lines in readme file
- increased by35.29%
69
No dependency changes