Google Analytics autotrack Ajax not working in a jsf application - ajax

Google Analytics does not track ajax calls in a JSF web application. so I'm using autotrack here is the code:
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-********2-1', 'auto');
ga('require', 'cleanUrlTracker');
ga('require', 'eventTracker');
ga('require', 'impressionTracker');
ga('require', 'maxScrollTracker');
ga('require', 'mediaQueryTracker');
ga('require', 'outboundFormTracker');
ga('require', 'outboundLinkTracker');
ga('require', 'pageVisibilityTracker');
ga('require', 'urlChangeTracker');
ga('send', 'pageview');
</script>
<h:outputScript library="custom" name="autotrack/autotrack.js" p:async="async"/>
<script async="async" src="https://www.google-analytics.com/analytics.js"></script>
So When I click:
<h:commandButton id="nextBtn" value="Next" action="#{testBean.nextQuestion}" >
<f:ajax execute="#form" render="pass-section title-section" onevent="go_top_and_apply_code_mirror" />
</h:commandButton>
and go_top_and_apply_code_mirrorcalls ga('send', 'pageview'). Except while I'm using the website clicking around, Google Analytics does not register me using the web page.
Chrome Console: shows this error
Failed to load resource: net::ERR_CONNECTION_CLOSED www.google-analytics.com/collect:1
So what Am I doing wrong?

Related

Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE when load https://www.google.com/recaptcha/enterprise/webworker.js

Sometimes when render reCAPTCHA widget, it will report an error Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE from https://www.google.com/recaptcha/enterprise/anchor when load https://www.google.com/recaptcha/enterprise/webworker.js
image
And we can reproduce this by refresh the page again and again (use document demo code):
<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.enterprise.render('html_element', {
'sitekey' : ' site_key',
});
};
</script>
</head>
<body>
<form action="?" method="POST">
<div id="html_element"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/enterprise.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>

Instant article - Google Analytics tracking

Is there a way to track instant articles to Google Analytics from Facebook application?
Just to be clear, I added a code according to the official guidelines:
<figure class="op-tracker"> <iframe> <!-- <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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-173809-XX', 'auto');
ga('require', 'displayfeatures');
ga('set', 'campaignSource', 'Facebook');
ga('set', 'campaignMedium', 'Social Instant Article');
ga('send', 'pageview', {title: 'POST TITLE'});
</script> --> </iframe> </figure>
Nothing happened?
Thanks for any advise
You have the <script> tag commented out. Removing the html comments (<!-- -->) should work:
<figure class="op-tracker"> <iframe> <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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-173809-XX', 'auto');
ga('require', 'displayfeatures');
ga('set', 'campaignSource', 'Facebook');
ga('set', 'campaignMedium', 'Social Instant Article');
ga('send', 'pageview', {title: 'POST TITLE'});

Cloudinary image upload using Javascript example

I run a program for Cloudinary image upload using Javascript and jQuery without using server.my. My problem is that I followed the instructions for the Cloudinary jQuery plugin but the image did not upload. Kindly post the answer.
My code is the following:
<html>
<head>
<script type="text/javascript">
$.cloudinary.config({cloud_name:'mycloudname', api_key:’myapikey'});
$.ajax({
url: 'http://res.cloudinary.com/mycloudname/image/upload/v1442240142/',
type: 'POST',
success: function (response) {
$('#uploadinput').attr('data-form-data', response);
}
});
</script>
</head>
<body>
<script src='js/jquery.min.js' type='text/javascript'></script>
<script src='js/jquery.ui.widget.js' type='text/javascript'></script>
<script src='js/jquery.iframe-transport.js' type='text/javascript'></script>
<script src='js/jquery.fileupload.js' type='text/javascript'></script>
<script src='js/jquery.cloudinary.js' type='text/javascript'></script>
<input name="file" type="file" id="File1" class="cloudinary-fileupload" data-cloudinary-field="image_upload"></input>
</body>
</html>
There are various issues here:
The URL should be different, e.g.,
https://api.cloudinary.com/v1_1/mycloudname/image/upload
If you don't want to use your server, then you should use unsigned uploads, there you must also include an upload preset.
Have a look at the following for more information:
http://cloudinary.com/blog/direct_upload_made_easy_from_browser_or_mobile_app_to_the_cloud

Phonegap app works on emulator not on device

Im testing simple phonegap app for adding comment with remote server. ive tested in telerik icenium simulator and in browser and it works. But when I try to test in visual studio emulator and click the button it says "CordovaBrowser_NavigationFailed :: www/index.html?email=fgg#vv.com&comment=Gjjj". I`ve tested on device too, but there nothing happens.
Here is the code.
index.html - the main page
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
<title>jQuery form post</title>
<script src="cordova.js"></script>
<script src="js/index.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/post.js"></script>
<script src="js/jquery.mobile-1.4.3.js"></script>
<script>
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
</script>
<style>
label, b {
display: block;
}
</style>
</head>
<body onload="onBodyLoad()">
//content
<div id="landmark-1" data-landmark-id="1">
<form>
<label for="email">
<b>Email</b>
<input type="email" id="email" name="email">
</label>
<label for="comment">
<b>Comment</b>
<textarea id="comment" name="comment" cols="30" rows="10"></textarea>
</label>
<input type="submit" value="Save">
</form>
</div>
</body>
</html>
post.js
$(document).bind('deviceready', function () {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.pushStateEnabled = false;
$(function () {
$('form').submit(function () {
var landmarkID = $(this).parent().attr('data-landmark-id');
var postData = $(this).serialize();
$.ajax({
type: 'POST',
data: postData + '&lid=' + landmarkID,
//change the url for your project
url: "http://bgg.comxa.com/new.php",
crossDomain: true,
success: function (data) {
console.log(data);
alert('Your comment was successfully added');
},
error: function () {
console.log(data);
alert('There was an error adding your comment');
}
});
return false;
});
});
});
As I understand this error message does not state that there is anything wrong with your index.html file, it does not seem to be able to reach it at all.
Check out this thread: Navigation in phonegap application fails when I use GET variables
There might be something about the way you try to reach your index.html file. Maybe you are going straight to "index.html" and not "www/index.html", as it states in the post answer.
Hope this helps!
After a lot of reading, i think the problem is in webkit prowsers. I`ve read that there is issues with ajax requests in webkit based browsers. I will try the code at real mobile phone device and see...

ajax form does not submit

I can't get this form to submit via Ajax to a PHP script and cannot figure out why. Please help. I am planning to use this in phone gap after development and was under the impression this ajax format would work better than xmlhttprequest method - is this really the case?
<html>
<head>
<title></title>
</head>
<body>
<h1>Welcome</h1>
<hr>
<form id="idForm" name="idForm">
<input type="text" size="8" id="date" name="date"><br>
<input type="hidden" size="8" id="reversedate" name="reversedate"><br>
<input type="hidden" size="1" id="dow" name="dow"><br>
<input type="submit" id="submitbutton" name="submitbutton">
</form>
<br><br><br>
<br>
<br>
<p id="p1">x</p>
<br>
log out
<script>
$('#submitbutton').click(function(){
$("#idForm").submit(function() {
var url = "fetchsimple.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
</body>
</html>

Resources