mike-spainhower / angular-piwik Goto Github PK
View Code? Open in Web Editor NEWAngular service for piwik tracking
Angular service for piwik tracking
Hello,
piwik-angular doesn't correctly reference variables when passed in attributes.
For example:
scope.host = "http://staging.piwik.com"
<ngp-piwik ngp-set-js-url="{{host}}/piwik.js"
ngp-set-tracker-url="{{host}}/piwik.php"
ngp-set-site-id="1"> </ngp-piwik>
piwik-angular doesn't pick up the value of host (http://staging.piwik.com/piwik.js) but instead receives the raw value {{host}}/piwik.js
Nitin has submitted a fix as a PR: #14
up
What do you think about providing some option to not add the initial trackPageView
on https://github.com/mike-spainhower/angular-piwik/blob/master/lib/angular-piwik.coffee#L176 ?
I've setup my app to call trackPageView
whenever UI router notifies me about a state/url change, but this gives double counting from the initial page load, and I'd prefer not having to keep track of whether the state change is the first or not, it just seems messy.
Also, when setting the page title dynamically, the trackPageView
from angular-piwik is sometimes called before I've had time to update the title. It would be better to have full control of when to call trackPageView
.
I don't write coffee, but in plain js I'm thinking of something like this:
if (tAttrs.ngpTrackInitial !== false) {
return $window['_paq'].push(['trackPageView']);
}
return $window['_paq'];
We've listed your nice project on the Integrations page at: http://piwik.org/integrate/#programming-language-platforms-and-frameworks
Thank you for providing this project to the AngularJS & Piwik community!
Keep up the good work,
Matthieu
Piwik founder
The version on bower-angular-piwik is out of date.
is it a possibility to manual install angular-piwik? We don't have SSH connections to our hosting provider. Can only access hostserver using FTP.
For support in IE8, restrict: A
is required.
My current workaround:
angular.module('my-piwik', ['piwik']).config(function ($provide) {
$provide.decorator('ngpPiwikDirective',['$delegate', function ($delegate) {
var directive = $delegate[0];
directive.restrict = 'EA'; // Add attribute support for IE8
return $delegate;
}]);
});
The ngpPiwik directive template isn't actually loading the injected script tag. If I load it manually, everything seems to work fine. I searched around, and I don't think you can actually inject a script tag into a directive's template and have it dynamically load. Probably a security thing?
I have noticed that the method arrays for the Piwik service are missing some entries.
I am running Piwik 1.12.1 and the missing action methods are:
setCustomRequestProcessing
appendToTrackingUrl
addPlugin
storeCustomVariablesInCookie
setRequestContentType
setAPIUrl
disableCookies
deleteCookies
enableJSErrorTracking
disablePerformanceTracking
setGenerationTimeMs
trackAllContentImpressions
trackVisibleContentImpressions
trackContentImpression
trackContentImpressionsWithinNode
trackContentInteraction
trackContentInteractionNode
trackSiteSearch
the missing get methods are:
getTrackerUrl
getSiteId
getUserId
getRequest
I am currently working around this in my own module by decorating the PiwikActionMethods
and PiwikGetMethods
with the missing functions.
angular.module('my-piwik', ['piwik'])
.config(['$provide', function ($provide) {
var missingPiwikActionMethods = [...];
$provide.decorator('PiwikActionMethods', ['$delegate', function ($delegate) {
return $delegate.concat(missingPiwikActionMethods);
}]);
}]);
I'm working inside Salesforce.com's visualforce framework.
The instructions say to reference the file from the CDN, add an html element to your page, and then, once it's on the page, you can inject the service into your controller.
Inside the .page
file, inside the head
of the html I have this:
<apex:page showHeader="true" sidebar="false" standardStylesheets="false" docType="html-5.0" StandardController="Opportunity" extensions="Opportunities">
<html>
<head>
<ngp-piwik ngp-set-js-url="//[server]/piwik.js" ngp-set-tracker-url="//[server]/piwik.php" ngp-set-site-id="2"> </ngp-piwik>
</head>
Outside of (after) the html I have this
</body>
</html>
<apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"/>
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"/>
...
<apex:includeScript value="https://cdn.rawgit.com/mike-spainhower/angular-piwik/v1.2.0/dist/angular-piwik.js"/>
Inside of the Javascript, below the above, I have this:
<script type="text/javascript">
var opportunitiesApp = angular.module('opportunitiesApp', [...'piwik']);
opportunitiesApp.service('opportunitiesService', function($q, $rootScope) {
...
})
.controller('opportunitiesController', function(Piwik,$q, $scope,$location, opportunitiesService) {
console.log(Piwik);
But this just outputs function Piwik() {}
, indicating that it's just an empty function that I can't use.
Am I adding the dependencies in the wrong order or something? What am I doing wrong?
After viewing the network, I can see that it's successfully getting the angular-piwik.js
file
I'm getting a 204 no response
from the .php
file, so maybe that's it, assuming I shouldn't be getting this.
It looks like the request that gets sent has a bunch of query parameters. It looks like this:
https://analytics.commercialtribe.net/piwik.php?action_name=salesforce.com%20-%20Developer%20Edition&idsite=1&rec=1&r=910121&h=12&m=33&s=50&url=https%3A%2F%2Fct-4-sf.na16.visual.force.com%2Fservlet%2Fservlet.Integration%3Flid%3D066j0000002Eqjv%26ic%3D1&urlref=https%3A%2F%2Fct-4-sf.na16.visual.force.com%2Fvisualforce%2Frecsession&_id=8fbf5cc5476c7d0f&_idts=1427736319&_idvc=1&_idn=0&_refts=1427736319&_viewts=1427736319&_ref=https%3A%2F%2Fna16.salesforce.com%2F006j0000006cwYq&send_image=0&pdf=1&qt=1&realp=0&wma=0&dir=0&fla=1&java=1&gears=0&ag=1&cookie=1&res=1920x1080>_ms=74
Without these query parameters, I can access piwik.php just fine.
Looking on my piwik site, I can see that hits are getting logged. I just can't fill out the method
Hi everybody,
Spending some hours without finding a working solution I tried to load the js-url, tracker-url and site-id configuration from my REST API during custom Angular bootstrapping, then make it available to my modules via the $scope in order to be able to pass them to the ngp-piwik directive within the html...
The idea behind: Being able to have different js-url, tracker-url and site-id per environment.
Example:
<pre>{{environmentConfig[0].value}}</pre>
<ngp-piwik ngp-set-js-url="{{environmentConfig[1].value}}"
ngp-set-tracker-url="{{environmentConfig[2].value}}" ngp-set-site-id="{{environmentConfig[3].value}}"></ngp-piwik>
More in detail I am using a deferred bootstrapper:
/**
* The deferred boot strapper loading config from the back-end before bootstrapping
* the app.
*/
window.deferredBootstrapper.bootstrap({
element: window.document.body,
module: 'myApp',
resolve: {
environmentConfig: ['$http', function ($http) {
return $http.get('/rest/skin/environmentConfig');
}]
},
onError: function (error) {
console.error("Failed to bootstrap, error: " + error)
}
});
And while doing the following I can also see in the console output that the JSON config has been loaded successfully:
angular.module('bepraxis')
.config(function (environmentConfig) {
console.log('APP_CONFIG is: ' + JSON.stringify(environmentConfig));
})
The problem I am running into is the asynchronous part during boot strapping or lets say the config is not available at the moment when the ngp-piwik directive is being injected...
So my question: Has anyone out in the wild faced a similar situation where the analytics server url and site ID could not be hard coded but instead per environment configuration was required?
Thanks a lot in advance for your valuable support.
Best,
Simon
After the user logs in to the app I run:
Piwik.setUserId(user.id);
But nothing shows up in the piwik db for userid.
I've also tried:
Piwik.setCustomVariable('email', user.email);
Nothing shows up in the piwik db for that, either.
There is no error in the console and execution continues. Any ideas? The visits are being logged fine, but no user_id, custom_var_k1, or custom_var_k2
Here's the HTML:
<ngp-piwik
ngp-set-js-url="https://analyze.mysite.com/piwik.js"
ngp-set-tracker-url="https://analyze.mysite.com/piwik.php"
ngp-set-site-id="1">
</ngp-piwik>
I'm loading the 'piwik' module into my angular app and injecting the 'Piwik' service into the LoginFactory.
Hello
We are your angular-piwik and we are experiencing some errors.
We added the module successfully to our app and placed the following in our html:
<ngp-piwik ngp-set-js-url="//foo.com/piwik.js"
ngp-set-tracker-url="//foo.com/piwik.php"
ngp-set-site-id="1"> </ngp-piwik>
This is successfully sending requests to our Piwik instance however we get the following javascript errors:
piwik.js:51 The method setTrackerUrl is registered more than once in "_paq" variable. Only the last call has an effect. Please have a look at the multiple Piwik trackers documentation: http://developer.piwik.org/guides/tracking-javascript-guide#multiple-piwik-trackerspiwik.js:51 (anonymous function)piwik.js:52 (anonymous function)
piwik.js:51 The method setSiteId is registered more than once in "_paq" variable. Only the last call has an effect. Please have a look at the multiple Piwik trackers documentation: http://developer.piwik.org/guides/tracking-javascript-guide#multiple-piwik-trackers
We found someone else experiencing the same issue on StackOverflow: http://stackoverflow.com/questions/27519946/issues-using-angular-piwik
Are we doing something wrong?
Thanks
Peter
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.