I didn't find an answer to my question anywhere and I know nothing about javascript, so I can't figure it out myself.
If I have jQuery mobile website built so that every single page is in separate html file (single page template). May I use standard asynchronous Google Analytics code with it, or do I have to make modifications similar to those used in multi page template?
Would be very thankful if someone could answer this question.
Yes, you can use the standard Google Analytics code. You will however, need to "push" certain page views to Google Analytics because of the way jQuery Mobile handles page navigation.
For example, if you have a Contact form on your site at contact.html that, once submitted, goes to a process.php page, and then after completing, the user arrives at thank-you.html, you will need to call some JavaScript to "push" the pageview to Google Analytics.
For example, if your jQuery Mobile page element (data-role="page") has id="thank-you", then I'd use this:
<script type="text/javascript">
$(document).delegate('#thank-you', 'pageshow', function () {
//Your code for each thank you page load here
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_trackPageview', '/thank-you.html']);
});
</script>
UPDATE:
I would put this in your script.js file which is included in the head after you load jQuery and jQuery Mobile. This fires on each data-role="page" pageshow event, and is currently working on my live projects just fine.
$('[data-role=page]').live('pageshow', function (event, ui) {
try {
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
hash = location.hash;
if (hash) {
_gaq.push(['_trackPageview', hash.substr(1)]);
} else {
_gaq.push(['_trackPageview']);
}
} catch(err) {
}
});
Related
I have this code below
window.addEventListener('popstate', function(){
newHref = window.location.href;
if(pushedState){
urlSplit = newHref.split('/');
pageURL = urlSplit[urlSplit.length - 1];
$('div').html('loading...');
$.ajax({
type : 'POST',
url : pageURL,
success : function(data){
$('div').html(data);
}
})
}
})
This code works fine but if I add the jQuery mobile library to my html file it causes the popstate event to run a ajax loading an entire page into my div.
I have tried doing this
$.mobile.ajaxEnable = false;
But it doesn't work. My jQuery mobile version is 1.4.5
From what you are showing us I presume you are not using full jQuery Mobile functionality as what you are describing is how jQuery Mobile is supposed to work.
I also presume you do not need all jQuery Mobile functions.
Why not rebuild jQuery Mobile library by cherry picking only functionalities you actually need: http://jquerymobile.com/download-builder/
For example, if you do not select init this will disable global initialization of the jQuery Mobile library. You will, of course, be able to manually trigger page markup enhancement.
I am having a twitter tweet button, I am using knockout js, how can I track the number of events using universal google analytics?
Tweet
I have the below script in my knockout js which is not working
$('.is-voting-complete').on('click', '.twitter-share-button', function () {
gaTracker.send('event', 'Social', 'Twitter', 'Tweet');
});
I am guessing there is a iframe which twitter is incorporating , because of which the on click is not firing.
can somebody please help me with this
twittr is not defined because you have not included Twitters's widget.js. You should include the following before the closing body tag.
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
you can create a button like this
<a class="tw" target="_blank" href="https://twitter.com/intent/tweet? text=Check%20this%20out&related=episod&url=TheUrl"></a>
then bind google analytics function to the tweet event
twttr.ready(function (twttr) {
twttr.events.bind('tweet', function(e){
if(!e) return;
ga('send', 'social', 'twitter', 'tweet', theURL);
}
});
I have created a plugin called gasotracker. It works with twitter, but you are able to track other social events on your site.
I'm developing a jquery mobile site that is only available to users that are logged in.
I have a function that checks a server for their logged in status:
function checkLogin() {
$(function () {
$.getJSON(root_url + 'manageUsers/checklogin/?callback=?', null,
function (data) {
if (data.logged == 'false') {
$("#index_Container").html("<h2>Login Required</h2></div><p>We've noticed you're not logged in, please login to use this app.</p><p><a href='login.html' data-role='button'>Click here to login</a></p>").trigger('create');
$.mobile.changePage('login.html');
} else {
$(".logged_in").text(data.username);
$(".logged_in").addClass('logout');
$(".header_div").trigger('create');
}
});
});
}
I can't seem to figure out how to implement this so everytime the index page is loaded and any other page loads this is fired prior to rendering anything else on the page. Currently, the page will load and show the HTML, then do $.mobile.changePage('login.html'):
EDIT: If anyone has any ideas on how to implement this in a better way I'd love to know, every page in the app requires the user to be logged in.
In order to have this function run every time you load anew page, you will need to bind it to the pagebeforeload event, and potentially cancel the user navigation if it does not validate the login.
$( document ).bind( "pagebeforeshow", function( event, data ){
event.preventDefault(); //prevents usual load of page
checkLogin(data);
});
You will have to make changes to checkLogin, notably because as the page does not exist yet, so you cannot make changes to the DOM. You can see an quick and dirty example in this fiddle, giving hints as to how do it considering the asynchronous nature of your call.
As we know Twitter.com was down in yesterday(2012/07/26) some period of time. In that time my website home page somewhat unresponsive. The homepage was trying to load the twitter feed and failing, and thus other page elements in my site appears broken, like a jquery slider has trouble loading correctly, because its trying to load the twitter API.
Hove to fix this to homepage ignore twitter feed if the site notices that it is down, and displaying a short error notice in place of the feed?
I am using following customize twitter widget (got from here) to show latest 2 twitts in Home page.
<div id='twitter_div'>
<ul id='twitter_update_list'>
</ul>
</div>
<script type='text/javascript' src='http://twitter.com/javascripts/blogger.js'></script>
<script type='text/javascript'>
// to filter #replies in twitter feed
function filterCallback( twitter_json )
{ var result = [];for(var index in twitter_json)
{ if(twitter_json[index].in_reply_to_user_id == null) {result[result.length] = twitter_json[index]; }
if( result.length==2 ) break;}twitterCallback2(result); }
</script>
<script type='text/javascript' src='http://twitter.com/statuses/user_timeline/DUOBoots.json?callback=filterCallback&count=10'></script>
You should delay load your twitter feed. The rest of your page will load right away and if/when twitter goes down it won't block the rest of your page. It's good practice to do this anyway.
See https://dev.twitter.com/discussions/3369 for a discussion with some examples on using jquery to do this.
I'm having an issue using Exoclick adult advertisement to advertise on a mobile website using JQuery UI.
I don't know how much I can disclose here until it goes too far into "adult" that I can't post it here anymore.
The Exoclick banners show, but only once! Navigating inside the site doesn't the same ad again (we have two ads, bottom and top. Each is only loaded ONCE per site traversal). If you refresh using the refresh function of the browser ("F5"), they will load again... But only once.
Alright, Exoclick gives me a snippet like this:
<!-- BEGIN ExoClick.com Ad Code -->
<script type="text/javascript" src="http://syndication.exoclick.com/ads.php?type=300x50&login=<username>&cat=110&search=&ad_title_color=0000cc&bgcolor=FFFFFF&border=0&border_color=000000&font=&block_keywords=&ad_text_color=000000&ad_durl_color=008000&adult=0&sub=&text_only=0&show_thumb=&idzone=<zone id>&idsite=<site id>"></script>
<noscript>Your browser does not support JavaScript. Update it for a better user experience.</noscript>
<!-- END ExoClick.com Ad Code --></div>
The thing is, this works perfectly on static sites, but due to the nature of JQuery Mobile to fetch everything using AJAX, the scripts would be loaded many times over into the browser's execution context (at least this is what I suppose happens!) and in the end... not even execute anymore?
What I already thought of:
Cache the output of the Exoclick ad script (is there something like "outputcache" for JS?)
Deactivate Ajax
I tried deactivating Ajax requests but for some reason this didn't do anything:
<script>
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
</script>
Deactivating Ajax should work:
$(document).bind("mobileinit", function () {
$.mobile.addBackBtn = false;
$.mobile.ajaxEnabled = false;
$.mobile.ajaxLinksEnabled = false;
});
On the other hand, you can refresh/reload your script on each ajax success
$('html').ajaxSuccess(function() {
//reload your script using js, plenty of that on google
});
I did it... #bobek indirectly brought me to this answer.
What I did is create an invisible div which contains the ads at first. Then, on pageinit, I steal the div and remove it from DOM. The div will now have an iframe inside made by Exoclick.
Then, without the script by exoclick, I insert it back into the dom on each page init event...
To prevent that the script gets inserted back into the dom, on the server side I check for the X-REQUESTED-WITH header. If it's XMLHttpRquest, I don't send the ads.
This is how it looks in code:
The temporary ad placement, ANYWHERE on the site:
<div id="ads">
<div style="display: none" id="topad">
<?php require("./_topbannerb.php"); ?>
</div>
<div style="display: none" id="bottomad">
<?php require("./_bottombannerb.php"); ?>
</div>
</div>
The two PHP files contain the tags by exoclick. Nothing else.
A script in the head tag:
<script>
ads = "";
first = true;
$(document).bind('pageinit', function() {
if (first) {
ads = $("#ads");
ads.remove();
}
first = false;
$.each($(".adt"), function(i, v) {
$(v).append($(ads).children("#topad").first().children("div").clone())
});
$.each($(".adb"), function(i, v) {
$(v).append($(ads).children("#bottomad").first().children("div").clone())
});
});
</script>
Then, where the ads are supposed to be placed in the end:
<div class="adt"> </div>
The script automatically inserts into each ad placement. Here I have two different ad regions: Top and bottom. Both have no differences except how exoclick handles them in the back.