Analytics
2.1K members online now
2.1K members online now
Dive into multiple domain (Cross/Sub) tracking, implementing Ecommerce and Enhanced Ecommerce, setting up Event tracking, and Universal Analytics code.
 
Guide Me
star_border
Reply

Single Page Photo Gallery with url changing how to track per url

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

Hi,

 

We have been working on one page photo gallery (inside wordpress post) for sometime and our modifications are almost done;

 

Our purpose is to instead of, lightbox, with click to another page or etc. giving user to scrolling down and scrolling up photo gallery. 

 

Its not new thing; its simply blog type gallery, what we added is; simply url is changing per image scrolling down and up;  

 

example is here

 

http://www.ankarasosyete.com/salata-13-hazirn-2015/

 

Our problem is although url is changing when coming to an image for example

 

http://www.ankarasosyete.com/salata-13-hazirn-2015/5

 

Google analytics still tracks

 

http://www.ankarasosyete.com/salata-13-hazirn-2015/

 

I looked google's Single Page Application Tracking

https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

 

Than; autotrack

https://github.com/googleanalytics/autotrack

 

and finally urlchangetracker

https://github.com/googleanalytics/autotrack/blob/master/docs/plugins/url-change-tracker.md

 

and i tried alot of variation of google analytics code for tracking single page url changes

 

but no luck i couldnt solve this

 

my final usage is 

 

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-19984807-12', 'auto');
  ga('send', 'pageview');
  ga('require', 'urlChangeTracker', 'shouldTrackUrlChange');
  
</script>

But it seems dont work

 

Anyone can help?

 

Thanks

 

 

1 Expert replyverified_user
1 ACCEPTED SOLUTION

Accepted Solutions
Marked as Best Answer.
Solution
Accepted by topic author Göker I
August 2016

Re: Single Page Photo Gallery with url changing how to track per url

Top Contributor
# 2
Top Contributor

Hi,

 

You need to load autotrack.js after loading analytics.js in order to use the autotrack plugins.

Please try to change the code as below:

 

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-19984807-12', 'auto');
ga('require', 'urlChangeTracker');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<script async src='path/to/autotrack.js'></script>

 

Make sure you upload autotrack.js from github and to update the path in your code to reflect it's location on your server.

 

Let me know if you was able to make it work.


Arnold Majlath, Google Analytics Top Contributor
Was my response helpful? If yes, please accept it as solution.
Circle Me On Google+ | Visit me @ Redfly Digital

View solution in original post

Marked as Best Answer.
Solution
Accepted by topic author Göker I
August 2016

Re: Single Page Photo Gallery with url changing how to track per url

Top Contributor
# 2
Top Contributor

Hi,

 

You need to load autotrack.js after loading analytics.js in order to use the autotrack plugins.

Please try to change the code as below:

 

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-19984807-12', 'auto');
ga('require', 'urlChangeTracker');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<script async src='path/to/autotrack.js'></script>

 

Make sure you upload autotrack.js from github and to update the path in your code to reflect it's location on your server.

 

Let me know if you was able to make it work.


Arnold Majlath, Google Analytics Top Contributor
Was my response helpful? If yes, please accept it as solution.
Circle Me On Google+ | Visit me @ Redfly Digital

Re: Single Page Photo Gallery with url changing how to track per url

Visitor ✭ ✭ ✭
# 3
Visitor ✭ ✭ ✭

Hello thanks for your help;

i tried the code, the thing is i may write wrongly path/to/autotrack.js that when i put the code real time traffic turns zero even i am navigating at site

i tried directly public_html directory and write

<script async src='autotrack.js'></script>

I tried under directory which is

<script async src='wp-content/uploads/analytics/autotrack.js'></script>

I also used Direct url but it seems i shouldnt use url

what should i do ?

/home/username/public_html/wp-content/uploads/analytics/autotrack.js ?
or
home/username/public_html/wp-content/uploads/analytics/autotrack.js ?

thanks

Re: Single Page Photo Gallery with url changing how to track per url

[ Edited ]
Visitor ✭ ✭ ✭
# 4
Visitor ✭ ✭ ✭

hi after i tried all;

 

i decided to look from debugger

 

it seems all pathway variations has 404 not found than i gave direct link url, file is still in the same domain

 

debug gives

 

Registered new plugin: ga(provide, "render", Function)
analytics_debug.js:10 Running command: ga("require", "urlChangeTracker")
analytics_debug.js:10 Waiting on require of "urlChangeTracker" to be fulfilled.


jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1
autotrack.js:5Uncaught SyntaxError: Unexpected token <
content.js:271DOMException: Blocked a frame with origin "https://googleads.g.doubleclick.net" from accessing a cross-origin frame.(…)

 

what should be the problem? maybe my file has problem??

 ------------------------------------------------------------------------

 

It seems i use wrong autotrack.js file as soon as i corrected it  my problems solved, and pages are tracking now

 

 

 

Re: Single Page Photo Gallery with url changing how to track per url

Top Contributor
# 5
Top Contributor

Hi,

 

Please try like this:

 

<script async src='<?php echo get_site_url(); ?>/wp-content/uploads/analytics/autotrack.js'></script>

 

 

Another problem is the content of your autotrack.js file. It seems that it has the html source code of the autotrack github page.

 

http://www.ankarasosyete.com/wp-content/uploads/analytics/autotrack.js

 

You need to make sure that it has the javascript code like:

https://raw.githubusercontent.com/googleanalytics/autotrack/master/autotrack.js

 

Fixing the above should resolve the problems. Let me know when you made the changes and I'll check it again.

 

Thanks


Arnold Majlath, Google Analytics Top Contributor
Was my response helpful? If yes, please accept it as solution.
Circle Me On Google+ | Visit me @ Redfly Digital