Search jQuery

jQuery Forum

Multiple Pages + Ajax + Piwik integration

in jQuery Mobile • 9 years ago

Hello,

I'm trying to integrate PIWIK Statistics in a Jquery Mobile driven Page.
Page consists of about 10 different pages - all JQuery Mobile Ajax loaded.

For Piwik I have to fire a JS call when a new Page is called.
I already tried it this way:

$('[data-role=page]').live('pageshow', function (event, ui) {
                try {
                    var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);
                    piwikTracker.setDocumentTitle(document.domain + "/" + document.title);
                    hash = location.hash;
                    if (hash) {
                        piwikTracker.trackPageView(hash.substr(1));
                    } else {
                        piwikTracker.trackPageView();
                    }
                    piwikTracker.enableLinkTracking();
                } catch(err) {

                }

            });

The Problem with this is - everything within the pageshow hook is executed several times. (excactly the amount of pages I preload)

But I'm not sure why it's executed for every page - thought it's only executed once for every called page that is shown right now?

URL of the page: http://mobile.atp-sf.at.ex.ortsinfo.at/

Hope someone can help me on this! :)

Replies(3)

watusiware

Re: Multiple Pages + Ajax + Piwik integration

9 years ago

The code on your site doesn't match the code shown above, so not sure if you've already fixed this. On your site you aren't using an event callback, but instead the code is in the body of the page without the event callback.

Since the example doesn't match the above, impossible to diagnose, as we don't know where you put the code shown above.

futureweb

Re: Multiple Pages + Ajax + Piwik integration

9 years ago

alright - better I give the Test-Server URL! :)

Here is the Code live: http://mobile.atp-sf.at.ex.ortsinfo.at/

watusiware

Re: Multiple Pages + Ajax + Piwik integration

9 years ago

You need to move your code to the <head> section. <head> content should be identical on every page. JQM loads scripts from <head> only on the first page visited, and ignores scripts in the <head> otherwise. (The reason for repeating identical <head>. content on every page is so that users can bookmark your pages and enter your site at any page.)

You've put the code in the body of the page, and it will be run once for every page loaded. (That is, the registration code will be run once per page. The callback then will be called each time any page is shown.) You're registering a live event callback (live is obsolete, I would suggest using delegate, or the delegating form of on, instead) for the pageshow event. You haven't used a selector to qualify a specific page, so you are asking that the code be executed for every page that is shown.

If you include this in the body of every page, then every page loaded is going to register this code to run when every subsequent page is loaded. So, for every page you load, you are adding one additional call to your code.

I'd suggest you read over the docs on how jQuery Mobile loads and manages pages, as well as the section on events.

If you aren't pre-loading pages, you should probably use a pageinit event and put your code in the <head>. This will run the code once for every page loaded.

If you are pre-loading pages, then you should use a pageshow event, but you will need to add code to insure that the code is run only once for each page. Otherwise, it will be run every time the page is shown, in case the user re-visits a page. (But you might actually want this, not sure exactly what you are trying to track.)

Top Reply

Response title

Attachments

jQuery Forum

Multiple Pages + Ajax + Piwik integration

Replies(3)

Re: Multiple Pages + Ajax + Piwik integration

Re: Multiple Pages + Ajax + Piwik integration

Re: Multiple Pages + Ajax + Piwik integration

Statistics

Tags

Actions