search

visual-framework / vf-core

A (primarily CSS) framework that targets needs of life science websites and services
https://stable.visual-framework.dev/
Apache License 2.0
21 stars 10 forks source link

GA - Feature to track outbound/external links #1210

Closed sandykadam closed 3 years ago

sandykadam commented 3 years ago

Currently VF2.0 is not able to track external outbound/outgoing links in GA. So we need to add this feature in current component.

khawkins98 commented 3 years ago

We could borrow the approach from the drupal google analytics module:

https://git.drupalcode.org/project/google_analytics/-/blob/8.x-2.x/js/google_analytics.js#L67

          else if (drupalSettings.google_analytics.trackOutbound && this.href.match(/^\w+:\/\//i)) {
            if (drupalSettings.google_analytics.trackDomainMode !== 2 || (drupalSettings.google_analytics.trackDomainMode === 2 && !Drupal.google_analytics.isCrossDomain(this.hostname, drupalSettings.google_analytics.trackCrossDomains))) {
              // External link clicked / No top-level cross domain clicked.
              ga('send', {
                hitType: 'event',
                eventCategory: 'Outbound links',
                eventAction: 'Click',
                eventLabel: this.href,
                transport: 'beacon'
              });
            }
          }

We'd need to:

  1. Add a new category "external links"
  2. Add a way to detect the current domain (if on www.EBI.ac.uk/EBI, everything in *.ebi.ac.uk/* would be considered internal)
  3. Optional: Add a way to pass external domains considered internal (if on EMBL.org, don't consider EBI.ac.uk as external)
khawkins98 commented 3 years ago

Aside: I noticed the drupal module uses ga('set', 'transport', 'beacon');, which might be good for us to use as it offers more robust tracking:

https://developers.google.com/analytics/devguides/collection/analyticsjs/sending-hits

sturobson commented 3 years ago

With #1216 merged - can this be closed now?

@sandykadam + @khawkins98

sandykadam commented 3 years ago

Works great on local but I found new bug when you click on footer logos European commission or any logo link, there is error

` ERROR TypeError: Cannot read property 'split' of undefined at vfGaTrackInteraction (vf-analytics-google.js:328) at HTMLBodyElement. (vf-analytics-google.js:233) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:41645) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480) at invokeTask (zone-evergreen.js:1621) at HTMLBodyElement.globalZoneAwareCallback (zone-evergreen.js:1647)

`

khawkins98 commented 3 years ago

This looks like it might be a separate issue with a missing getElementsByTagName("img")[0] in 

    // is there an inner image?
    if (linkName.length == 0 && actedOnItem.getElementsByTagName("img")) {
      if (actedOnItem.getElementsByTagName("img")[0]) {
        if (actedOnItem.getElementsByTagName("img")[0].hasAttribute("src")) {
          linkName = actedOnItem.src.split("/").vfGaLinkLast();
        }
      }
    }
khawkins98 commented 3 years ago

Have moved the above to a new issue. Closing this one.