I need to track visits of page that loads via Ajax. I'm currently using the latest HTML5 Boilerplate Google Analytics snippet (as of September 2017):
<script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
For example, the page that I'm calling via Ajax shows as an overlay popup and does not update the URL in the address bar. It comes from a directory like this:
www.mysite.com/ajaxpages/popup.html
Do I need to place the entire Analytics snippet on the popup.html page? Do I have to update it? Google's documentation says I need to update my code to something like:
ga('set', 'page', '/new-page.html');
ga('send', 'pageview');
It seems fairly simple but I'm not exactly sure how I need to update the tracking code I'm using.
You do not need to put the entire analytics snippet in the popup page. In the function that loads the Ajax popup locate the bit that checks for the ajax success event and paste your second snippet in there; this will set a page path (so every subsequent call will use the new url) and the pageview call will send the updated information.
Related
I am currently working on a Ajax based mobile website project and am not able to get Omniture to work correctly. Here is a brief detail of the problem.
Assume a mobile site which has multiple pages, like example.com/a, example.com/b, example.com/c, example.com/d, example.com/e, example.com/f, etc.
Each page of the site, has Omniture's code, like:
<html><head></head><body>
<script type="text/javascript" src="//domain-and-path-to-omniture-code-files/s_code.js">
<script type="text/javascript">
s.pageName = "blah";
// some other ... s.blahBlah ... properties here...
/************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/
var s_code=s.t();if(s_code)document.write(s_code);
</script>
<div id="content">SOME CONTENT</div>
</body>
User opens the browser and opens one url/page, like example.com/a
The page (example.com/a) has multiple links to the content on the same page, like #topic1, #topic2, #topic3, etc. and also has links to other static pages of the site, like example.com/b, example.com/c, example.com/d, etc.
I use jQuery to control click events on these links.
When user clicks on a named link, like #topic1, #topic2, etc., the page is animated/smooth-scrolled to the target element/content-section; and Omniture's "s.tl()" function is triggered, to track/capture the click event with relevant/required details.
## THIS IS THE PROBLEM AREA ## When user clicks on a link to a different static page, like example.com/b, example.com/c, etc., instead of allowing the browser to do a full page-load, the Ajax version of the target page is loaded into the content holder (by Ajax version, I mean to say that the page only has bare-minimum markup/content and not the entire html/head/common-css/js includes/etc).
Now the problem is that, when the page is loaded normally, Omniture captures it correctly as a "Load" event, but when it's loaded via JavaScript/Ajax, Omniture captures it as a "Click" event!
The Ajax/version of the page, does not include Omniture library "s_code.js" JS again (for obvious reasons, its already there on the parent/main page). Along with the required content, this page only has a script-tag, which sets required "s.blahBlah" values for the new page and the call to "s.t();".
I also tried to keep the Omniture code separate, in a common JS file, which is already loaded with the parent page, and only set the required "s.blahBlah" values in the Ajax call/function (which is also in a global/already loaded JS file), but still Omniture captures it as a "Click" event.
// s.tl(); ... gets captured as a click event
// s.t(); ... on normal page load... gets captured as a load event
// s.t(); ... after DOM-ready/page loaded via Ajax... gets captures as a click event
Any ideas! How can I make Omniture capture a load event? Is there a function like "s.l()" or something to trigger Omniture's "Load" event on demand.
The problem was not Omniture capturing it incorrectly, it was the tool "Omnibug", which I use to see the requests.
Omnibug 0.5.448 logs all "s.t()" calls made before page load event as Omniture "Load" event and any "s.t()" call made afterwards is captured as "Click" event.
Apparently, I was not the only one facing this issue. Others had already reported this to the developer of Omnibug (https://github.com/simpsora/omnibug/issues/4) and a fix has been made by him/a new version Omnibug 0.5.500 has been released.
The new version of Omnibug 0.5.500 captures all "s.t()" calls as "Load" events correctly and all "s.tl()" calls as "Click" event.
Thanks!
I'm trying to load a chart from the google charts api. For the most part it is working as planned. The issue comes on the initial page load. If I navigate from another part of my site to the page (using router) it loads fine. However, if I hit the refresh button on the page the chart does not load until I leave and re-enter the page.
I have this in my main.html header:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
and in my template.templatename.rendered AND template.templatename.created I have
google.load("visualization", "1", {'callback':function() {},packages:["corechart"]});
google.setOnLoadCallback(drawChart);
Deps.autorun(function () {
drawChart()
})
Where drawChart() calls the google visualization commands. I do understand I'm probably calling some repetitive code currently, but all of this is in an effort to get the page to load when I hit refresh.
I appreciate any help.
Please let me know if there is any more info needed. Thanks.
Placing the Google jsapi file in the main.html header will cause the browser to run the Javascript after the DOM is completely loaded, which is too late for your purposes.
Meteor is calling your google.load code before the DOM is completely rendered, so when you hit refresh page, the jsapi file is undefined when Meteor calls google.load.
However, if you navigate away and then back, the DOM has already been loaded once, so the chart will be rendered correctly.
To solve this, I would suggest just saving a local version of http://www.google.com/jsapi in your client folder.
Thus, Meteor will load it before it calls the google.load code.
Here's my issue, I'm trying to load a FB comments module via an AJAX div. Now, it works if I go directly to the php page, but if I load it from within the div, it doesn't. I've looked at the other posts (FB javascript SDK after jquery LOAD (ajax)), but still can't seem to get it to work, looking for clarification.
If you want to see what I'm talking about, check http://azconceptphoto.com/lindsey and check out testimonials.
Ideally, on the normal part of my site, I can just load the HTML5 code and it works fine, though for some reason it doesn't remotely work via the AJAX div. And considering the posts from before are out of date (2011), I was hoping to get more feedback on this.
Based on the code from your link you are not using any of the PrototypeJS Ajax methods to get the backend script. Ajax.Updater is the method you need to use so....
Here is my suggestion
change the definition of loadXMLDoc() to
function loadXMLDoc(div, location)
{
new Ajax.Updater(div,location,{'evalScripts':true});
}
this will update the contents of div with the contents of location. Also if the response has <script> tags in it then the javascript will be parsed and evaluated (thats the option evalScripts)
I am new to AJAX,
I want to have a javascript that will make all the link(include webpage,internal link, external link) load in a lightbox when clicked. Just like Facebook, when you click the photo, it will give you a frame , without redirect you to the photo page.
Overall, I want my user to click on ANY link of my website do not redirect to a new page which need to refresh the whole page.
I want the link to be load in a frame on demand, also know as AJAX right?
Actually I just want to know this technique is called as what?? Any google search term ?? searching queries??
Any recommend article or tutorial to do this?
AJAX: Asynchronous JavaScript and XML. Your example isn't AJAX, but rather it's using JavaScript to do event binding that causes actions to take place in response to events made by the user in the browser.
You could use jQuery to bind an event to all the links of a certain type on a page. The exact implementation will depend on your HTML markup.
If, for example, you have several images wrapped in link tags:
<img src="image1.jpg" />
<img src="image2.jpg" />
You could have jQuery similar to the following (be sure to load jQuery prior to this in the page):
<script>
$('.image_link').click(function(event) {
event.preventDefault(); // stops it from doing normal link action
// and then down here you'd need JS for your lightbox library
});
</script>
Smashing Magazine has an article that might help you: Modal Windows in Modern Web Design.
I tried the classic ajax approach, but that throws an access denied javascript exception when trying to add a script stored on another domain.
Now, I'm sure this is possible since google populates google ads via js only; so does twitter, and the list can continue.
How I thought of it so far:
<div id="divId"></div>
<script type="text/javascript" src="http://mysite.com/script.js"></script>
The script in script.js should have changed the innerHTML attribute of the div above. Instead, I get the following message in fireBug: Access to restricted URI denied code: 1012
I googled around a bit but only found workarounds that are useless, like php proxies and such, whereas I want this widget to be copy-pasted into other peoples sites, blogs, forums, etc..
Thanks in advance for any helpful replies. :)
The behavior that you are seeing is intended and there for security reasons. You wouldn't want a third party script to make any changes to your page as that can be exploited heavily.
Instead, give your users a JavaScript snippet to embed on their page.
<script>
// do stuff here
</script>
Note that inside this snippet you can create a script tag dynamically, set the src attribute and load the actual JavaScript. This snippet that your users embed on their page has access to the entire DOM, but the script loaded externally does not.
Here's an example of the profile widget that Twitter gives out to embed on web pages:
<!-- external js, can't access or change the DOM -->
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<!-- local js, does that -->
<script>
new TWTR.Widget({
version: 2,
..
..
}).render().setUser('hulu').start();
</script>
The first script tag loads the library, while the second one which actually manipulates the page is added as code directly.
I finally found a solution that doesn't involve ajax.
I simply use
<div id="objectId"></div>
<script type="text/javascript" src="http://mysite.com/getAndDisplayData.php"></script>
<script type="text/javascript">getAndDisplayData();</script>
And in getAndDisplayData.php I generate a JS script that will create my widget inside the div above. The php file also connects to the database and retrieves all required widget data.
Apparently this is how google ads works, though I am not sure. It is certain though that they don't use ajax.