Search code examples
javascriptangularjsgoogle-analyticsdom-eventsadobe-analytics

Track Links Using Events - Race Conditions


I am building AngularJS applications which have common header with links to each of the application:

<a href="https://app1.company.com">App1</a>
<a href="https://app2.company.com">App2</a>

Each application is running on its own subdomain and when user clicks a link on the header - page redirects to that application.

I have to track user actions with the links, e.g. onClick events with Omniture (but the problem applies to Google Analytics as well). When I add an onClick event that calls a function to send event to Omniture, e.g.:

<a href="https://app1.company.com" ng-click="trackLink('header-app1')">App1</a>

trackLink() is a function of an AngularJS service, brief implementation:

trackLink: function (eVar8Code) {

    s = this.getSVariable(s);

    s.eVar8 = eVar8Code;
    s.prop28 = s.eVar8;

    this.sendOmnitureMessage(s, send, false);

    return s;
  },

the function executes asynchronously and returns right away. Then standard link's behaviour kicks in: page is redirected to the URL defined in "href" attribute. New page is loaded very quickly (around 70 ms) but AJAX request to Omniture has not been executed: it's all async.

I believe that using events for the links is incorrect approach, one should rather use Query parameters, e.g.:

<a href="https://app1.company.com?iLink=header-app1">App1</a>

but it's hard to convince some.

What is a good practise to track events on links?


Solution

  • As @Eike Pierstorff suggested - I used capabilities of Adobe Analytics native library to set a delay (200ms) which give the call to Adobe Analytics much better chances to succeed:

    in HTML:

    <a href="https://app1.company.com" data-omniture-link data-track-code="header-nav-deliveries-returns">App1</a>
    

    in AngularJS service:

      sendOmnitureMessageWithDelay: function (s, element, eVar8Code) {
        var s = s_gi(s_account); // jshint ignore:line
    
        s.useForcedLinkTracking = true;
        s.forcedLinkTrackingTimeout = 200; // Max number of milliseconds to wait for tracking to finish
        s.linkTrackVars = 'eVar8,prop28';
        s.eVar8 = eVar8Code;
        s.prop28 = eVar8Code;
    
        var target = element;
    
        if (!target) {
          target = true;
        }
    
        s.tl(target, 'o', s.eVar8, null, 'navigate');
    
        this.cleanOmnitureVars();
      }
    

    Here, element - is HTML element about.

    It works pretty well in 99% of the cases but has issues on the slow and old devices where page loads before call to Adobe has been made. It appears that there is no good solution to this problem and there cannot be guarantee that events would always be recorded in Adobe Analytics (or Google Analytics).