mike-spainhower / angular-piwik Goto Github PK

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.

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

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 version on bower-angular-piwik is out of date.

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

Hi @mike-spainhower

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

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.

The Html element:

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>

The reference:

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"/>

The service:

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&gt_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

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'];

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);
        }]);
    }]);

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

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.