New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OWA & AngularJS #318

Open
gutalevin opened this Issue Mar 6, 2018 · 11 comments

Comments

Projects
None yet
5 participants
@gutalevin
Copy link

gutalevin commented Mar 6, 2018

Hi Guys,
I am currently searching for GA alternative due to its hits limitations and was thinking about OWA. But cannot find Info if there is an AngularJS SPA support (or there is any equivalent to angulartics solution)
Thank you in advance!

@haterecoil

This comment has been minimized.

Copy link

haterecoil commented Apr 2, 2018

Hi! I am trying to implement it on an ionic (angular + cordova) phone app. If anyone has resources about it, please send.

Anyway, i'll keep you updated about this.

@siva538

This comment has been minimized.

Copy link

siva538 commented Jul 2, 2018

Padams/team, can you please help with this? Is there a plugin available for AngularJS, to support SPA?

thanks in advance.

@siva538

This comment has been minimized.

Copy link

siva538 commented Jul 2, 2018

@haterecoil , were you able to get this implemented in ionic? Please help with this. We are looking for similar implementation, and any help is appreciated.

@haterecoil

This comment has been minimized.

Copy link

haterecoil commented Jul 9, 2018

Hi, sorry for the late answer! We ended up injecting OWA directly in the index.html, plus creating a provider to manage it.

In /src/index.html :

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8" >
  <title>Title of app</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

  <script>
    var owa_baseUrl = 'http://OWA_URL';
    var owa_baseSecUrl = 'https://OWA_URL';
    var owa_cmds = owa_cmds || [];
    owa_cmds.push(['setSiteId', 'someId']);
    owa_cmds.push(['trackPageView']);

    (function() {
      var _owa = document.createElement('script'); _owa.type = 'text/javascript'; _owa.async = true;
      owa_baseUrl = ('https:' == document.location.protocol ? window.owa_baseSecUrl || owa_baseUrl.replace(/http:/, 'https:') : owa_baseUrl );
      _owa.src = owa_baseUrl + 'modules/base/js/owa.tracker-combined-min.js';
      var _owa_s = document.getElementsByTagName('script')[0]; _owa_s.parentNode.insertBefore(_owa, _owa_s);
    }());
  </script>

In src/providers/owa-service.ts :

import {Injectable} from "@angular/core";
declare var owa_cmds: Array<any>;

@Injectable()
export class OwaService
{
  public static emitEvent(eventDetails: Array<any>) {
    if (typeof owa_cmds === 'object') {
      owa_cmds.push(eventDetails);
    } else {
      console.warn("owa_cmds is not a function", typeof owa_cmds);
    }
  }
}

Then in any page or component :

import {OwaService} from "../../providers/owa-service";
Component({
  selector: 'page-custom',
  templateUrl: 'page-custom.html'
})
export class CustomPage {

  onSomeEvent() {
    OwaService.emitEvent(['trackAction', 'funnel', 'funnelSubmit', 'something']);
  }
}
@siva538

This comment has been minimized.

Copy link

siva538 commented Jul 10, 2018

Thanks much @haterecoil . We will try this and get back to you.

Most of the popular Web Analytics tools have a corresponding plug-in available in Angulartics. Am sure you would have seen it.

Having that plug-in helps others as well to use Angular JS based plug-in of OWA.

Thanks again.

@LukeTully

This comment has been minimized.

Copy link

LukeTully commented Aug 18, 2018

@gutalevin Were the answers in this thread sufficient in solving your problem? Were you looking for a way to solve this using Angular 1? (The same pattern can be applied as @haterecoil used, just with AngularJS' style of creating providers and firing events)

If so, this issue could be closed.

@haterecoil Would you mind contributing this back to the Wiki, perhaps under Angular Integration?

Just passing by and noticed this thread could probably be wrapped up and some contribution made.

@siva538

This comment has been minimized.

Copy link

siva538 commented Aug 21, 2018

Hello @LukeTully , wanted to provide a quick update on this. Since we were using older version of Angular we were not able to take advantage of the method provided by @haterecoil .

So we had to look for alternatives, and with the help of @padams, we nailed it down to the extension of JS file.

Current request to the OWA team is to get the change incorporated in the code base so anyone else looking for the SPA usage, it will be very helpful for them, like us.

Below is the snippet done in the "owa.tracker_extension.js" in \modules\base\js

`OWA.tracker.prototype = {

/**
 * Logs a SPA page view event
 */
trackPageViewSPA : function() {
	
this.page.set('page_url', this.getCurrentUrl());
if(document.title) {
	this.page.set('page_title', OWA.util.trim( document.title ) );
}
this.page.set('timestamp', OWA.util.getCurrentUnixTimestamp());
this.page.setEventType("base.page_request");

return this.trackEvent(this.page);
}

};
`
From the tracker code in the Application pages this is what we have used:

`

var owa_cmds = owa_cmds || [];
owa_cmds.push(['setSiteId', 'XXXXXXXXXXXXXXXXXXXXXXXXXX']);
owa_cmds.push(['trackPageView']);
owa_cmds.push(['trackClicks']); 
owa_cmds.push(['trackDomStream']);

(function () {
  var _owa = document.createElement('script'); _owa.type = 'text/javascript'; _owa.async = true;
  var _owa_ext = document.createElement('script'); _owa_ext.type = 'text/javascript'; _owa_ext.async = true;
  owa_baseUrl = ('https:' == document.location.protocol ? window.owa_baseSecUrl || owa_baseUrl.replace(/http:/, 'https:') : owa_baseUrl);
  _owa.src = owa_baseUrl + 'modules/base/js/owa.tracker-combined-min.js';
  _owa_ext.src = owa_baseUrl + 'modules/base/js/owa.tracker_extension.js';
  var _owa_s = document.getElementsByTagName('script')[0];
  _owa_s.parentNode.insertBefore(_owa, _owa_s);
  _owa_s.parentNode.insertBefore(_owa_ext, _owa_s);
}());

`

From the Success routes of Angular, this is the code:

owa_cmds.push(['trackPageViewSPA']);

Please let me know if you need more details to get this included in the main trunk.

Thanks in advance.

@LukeTully

This comment has been minimized.

Copy link

LukeTully commented Aug 21, 2018

Thanks @siva538 that's super helpful. It seems to me like the difference between the new trackPageViewSPA and trackPageView are marginal. Considering that a page view is more of a concept that shouldn't really care where it's input comes from, we might be able to do the following.

trackPageView : function(url) {
                // If a url is passed in, than that becomes the url for the page view
		var page_url = url || this.getCurrentUrl();
                this.page.set('page_url', url); 
                if (document.title !== this.get('page_title')) this.set('page_title', OWA.util.trim(document.title)); 
                // Can't tell if this timestamp set call is redundant or not
		this.page.set('timestamp', this.page.set('timestamp', OWA.util.getCurrentUnixTimestamp()));
		this.page.setEventType("base.page_request");
		return this.trackEvent(this.page);
}

@padams Is that about right? Either @siva538 or myself could toss this into a pull request.

@padams

This comment has been minimized.

Copy link
Owner

padams commented Aug 26, 2018

yes but it's a work around for the fact that the tracker is thinking of a page view as a static final event instead of an event that can be created more than once.

The best way to fix that is to renovate the tracker code to remove the use of this.page as a static variable and instead create a new OWA.event every time the trackPageView method is called (just like click and action events). That will trigger the page title and URL to be added automatically as default global tracking properties.

I'll toss a fix in for this now.

@padams padams closed this in 9096acd Aug 26, 2018

@padams padams reopened this Aug 26, 2018

@padams

This comment has been minimized.

Copy link
Owner

padams commented Aug 26, 2018

give this changeset a try and close out if it passes.

padams pushed a commit that referenced this issue Aug 26, 2018

@padams padams added the hasfix label Aug 26, 2018

@padams

This comment has been minimized.

Copy link
Owner

padams commented Aug 26, 2018

Best to update from master as there are few change sets now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment