I am a new owa(Open Web Analytics) user, I have installed owa in /owa/apache/htdocs/owa
and create one index.html under /owa/apache/htdocs with blow content
However I won’t be able to see any analytic statistics from owa after I refreshed index.html several times
<html>
<header>
<!– Start Open Web Analytics Tracker –>
<script type=”text/javascript”>
//<![CDATA[
var owa_baseUrl = 'http://localhost/owa/';
var owa_cmds = owa_cmds || [];
owa_cmds.push(['setSiteId', '4f9312bd29c7edd4d492210b8599a383']);
owa_cmds.push(['trackPageView']);
owa_cmds.push(['trackClicks']);
owa_cmds.push(['trackDomStream']);
(function() {
var _owa = document.createElement(‘script’); _owa.type = ‘text/javascript’; _owa.async = true;
owa_baseUrl = (‘https:’ == document.location.protocol ? window.owa_baseSecUrl || owa_baseUrl.replace(/http:/, ‘https:’) : owa_baseUrl );
_owa.src = owa_baseUrl + ‘modules/base/js/owa.tracker-combined-min.js’;
var _owa_s = document.getElementsByTagName(‘script’)[0]; _owa_s.parentNode.insertBefore(_owa, _owa_s);
}());
//]]>
</script>
<!– End Open Web Analytics Code –>
</header>
<body>
<h1>It works!</h1>
</body>
</html>
As you ca see here: https://github.com/Open-Web-Analytics/Open-Web-Analytics/wiki/Troubleshooting
OWA uses cookies for tracking and for logging not the the admin interface. Therefor you must run OWA under a fully qualified domain (FQD) such as my.domain.com. Accessing and running OWA under http://localhost or an IP address will create errors.
Hoe this helps you :)
There are a few issues with your HTML. For instance, you need to specify a doctype for your html tag. Also, should be .
I've cleaned up your code, but haven't check to see if this works. Give this a shot though:
<!DOCTYPE html>
<head>
<title>Blah</title>
<script>
//<![CDATA[
var owa_baseUrl = 'http://localhost/owa/';
var owa_cmds = owa_cmds || [];
owa_cmds.push(['setSiteId', '4f9312bd29c7edd4d492210b8599a383']);
owa_cmds.push(['trackPageView']);
owa_cmds.push(['trackClicks']);
owa_cmds.push(['trackDomStream']);
(function() {
var _owa = document.createElement('script'); _owa.type = 'text/javascript'; _owa.async = true;
owa_baseUrl = ('https:' == document.location.protocol ? window.owa_baseSecUrl || owa_baseUrl.replace(/http:/, 'https:') : owa_baseUrl );
_owa.src = owa_baseUrl + 'modules/base/js/owa.tracker-combined-min.js';
var _owa_s = document.getElementsByTagName('script')[0]; _owa_s.parentNode.insertBefore(_owa, _owa_s);
}());
//]]>
</script>
</head>
<body>
<h1>It works!</h1>
</body>
</html>
Related
I would like to display the activity feeds of my facebook, twitter, linkedIn, google+ pages in my website. For facebook and twitter, iam getting the feeds by referring their developer website(image attached) . But I dont know how to get the activity feeds from google plus page. Is there any options are available for it ?
There are tools to help you do this with Google+, but there is no pre-made widget that will do this. You need to combine two components of the Google+ API: the activities.list call and an embedded post.
One very simplistic implementation might look something like this:
<html>
<head>
<title>Plus Posts</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
.post {
display: block;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div id="posts"></div>
<script type="text/javascript">
var plusId = 'profile_id_to_view;
var apiKey = 'API key from developer console';
function start(){
gapi.client.setApiKey( apiKey );
gapi.client.load('plus','v1', function(){
console.log('loaded');
gapi.client.plus.activities.list({
userId: plusId,
collection: 'public',
maxResults: 10
}).execute(function(resp){
if( resp && resp.items && resp.items.length > 0 ){
for( var co=0; co<resp.items.length; co++ ){
$('#posts').append('<div class="post"><div id="posts-'+co+'"></div></div>');
var url = resp.items[co].object.url;
gapi.post.render('posts-'+co, {url:url});
}
} else {
console.log('invalid resp', resp);
}
});
});
}
(function(){
var po = document.createElement( 'script' );
po.type = 'text/javascript';
po.async = true;
po.src = 'https://plus.google.com/js/client:plusone.js?onload=start';
var s = document.getElementsByTagName( 'script' )[0];
s.parentNode.insertBefore( po, s );
})();
</script>
</body>
</html>
You need to create a project and get your own API key from http://console.developers.google.com/ and provide this and the ID for the posts you wish to follow.
There is a simple jquery plugin called Google+ Feed Widget.
Google +1 button don't want to appear.
I follow the method here: https://developers.google.com/+/web/+1button/
a post on my blog for example: http://misapuntesde.com/post.php?id=256
It's like post.php was a blacklisted page (it doesn't), because I copy/paste the same page to post_t.php and it works.
Google does not like me :(
I'm not seeing the +1 button rending on your page sources. Something you are doing in your PHP code is not rendering the JavaScript include or the +1 markup.
Try adding this code to your site before your closing </body> tag:
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Next, add the following code where you want the +1 button to render:
<div class="g-plusone" data-annotation="inline" data-width="300"></div>
The Google+ button http://www.amayzinghomes.com is displaying the wrong count. This is a brand new domain so it should only be showing a few clicks. I think it may be displaying the number of clicks on the Google Plus page where I got the script instead of the count for the actual page it's on. Here's the script I used:
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="tall" data-href="http://www.amayzinghomes.com/"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
s</script>
The most likely explanation is that the count of 7 comes from links shared on Google+.
I do see one public post via this search:
https://plus.google.com/u/0/s/amayzinghomes
There may be private posts with that URL too.
I have the same problem, https://plus.google.com/116401211377269068112 shows count over 180 while the JavaScript plugin shows only 13 on www.ceriseshirts.com . The code is given below
<div class="g-plusone" data-size="medium" data-annotation="bubble" data-width="60" data-height="69" data-href="https://plus.google.com/116401211377269068112"></div>
<script>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
I'm working on a project where I want to load a processing sketch into a canvas, have some things happen to the image when a user mouses over (got that part), and then when they leave the canvas save the image back to the server.
I've looked at these other questions, and can't quite figure this out:
HTML5 CANVAS: How to save and reopen image from server
That's not really working for me.
Uploading 'canvas' image data to the server
I don't exactly understand where to put everything in this.
http://j-query.blogspot.in/2011/02/save-base64-encoded-canvas-image-to-png.html
From outside of Stackoverflow, but I got there from here.
Version 1
This isn't working all the way, I feel like I'm close, the processing sketch is working, and it's kicking out an image, I just can't grab it with JS, and then I don't know what to do with it to get it back to the server.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Processing Page</title>
<script type="text/javascript" src="../../processingjs/processing.js"></script>
<script type="text/javascript"> //This is for communicating between Processing and Javascript
function showXYCoordinates(x, y) {
document.getElementById('xcoord').value = x;
document.getElementById('ycoord').value = y;
}
var bound = false;
function bindJavascript(instance) {
var pjs = Processing.getInstanceById(instance);
if(pjs != null) {
pjs.bindJavascript(this);
bound = true;
}
if(!bound) {
setTimeout(bindJavascript, 250);
}
}
bindJavascript('B_103');
var processingOutput = Processing.getInstanceByID('B_103');
var img = processingOutput.mouseOut();
</script>
</head>
<body>
<canvas id="B_103" data-processing-sources="B_103/B_103.pde" width="300px" height="300px"></canvas>
<?php
// requires php5
echo $_GET['img'];
define('UPLOAD_DIR', 'B_103/data/');
$img = $_POST['img'];
// $img = str_replace('data:image/png;base64,', '', $img);
// $img = str_replace(' ', '+', $img);
// $data = base64_decode($img);
$file = UPLOAD_DIR . 'image.jpg';
$success = file_put_contents($file, $data);
print $success ? $file : 'Not able to save the file.';
?></body>
</html>
And then there is this:
Version 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Processing Page</title>
<script type="text/javascript" src="../../processingjs/processing.js"></script>
<script type="text/javascript"> //This is for communicating between Processing and Javascript
function showXYCoordinates(x, y) {
document.getElementById('xcoord').value = x;
document.getElementById('ycoord').value = y;
}
var bound = false;
function bindJavascript(instance) {
var pjs = Processing.getInstanceById(instance);
if(pjs != null) {
pjs.bindJavascript(this);
bound = true;
}
if(!bound) {
setTimeout(bindJavascript, 250);
}
}
bindJavascript('B_103');
//var processingOutput = Processing.getInstanceByID('B_103');
//var img = processingOutput.mouseOut();
function save(){ //saves the canvas into a string as a base64 png image. jsvalue is sent to the server by an html form
var b_canvas = document.getElementById("B_103");
var b_context = b_canvas.getContext("2d");
var img = b_canvas.file_put_contents('backpicture.png',base64_decode(substr($str,22)));
}
</script>
</head>
<body>
<canvas id="B_103" data-processing-sources="B_103/B_103.pde" width="300px" height="300px"></canvas>
<?php
echo $_GET['img'];
$str=$_POST['img'];
$file=fopen("B_103/data/image.txt","w");
if(isset($_POST['submit']))
fwrite($file,$str);
fclose($file)
?>
</body>
</html>
So this one is saving a file backwards, but the file has nothing in it. I can deal with Base64 (with the answer to one question about using it in processing) but this file doesn't have it in there.
Any thoughts appreciated, thank you!
Way too much code there =)
Canvas can give you a base64 encoded image with a single function call, so just use canvas.toDataURL("image/png") or canvas.toDataURL("image/jpg") to get that string, and then save it to your server with a normal POST operation.
When it's required again, ask your server for the data using whatever format your GET request takes, and then unpack it as an Image, then draw that image onto your sketch:
var dataURI = /* get the string from your server */
var img = new Image();
img.src = dataURI;
sketch.image(img,0,0);
And we should be good to go.
Thanks Mike, it's working. Here's what I did.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Processing Page</title>
<script type="text/javascript" src="../../processingjs/processing.js"></script>
<script type="text/javascript"> //This is for communicating between Processing and Javascript
function showXYCoordinates(x, y) {
document.getElementById('xcoord').value = x;
document.getElementById('ycoord').value = y;
}
var bound = false;
function bindJavascript(instance) {
var pjs = Processing.getInstanceById(instance);
if(pjs != null) {
pjs.bindJavascript(this);
bound = true;
}
if(!bound) {
setTimeout(bindJavascript, 250);
}
}
bindJavascript('B104');
//var processingOutput = Processing.getInstanceByID('B_104');
//var img = processingOutput.mouseOut();
function postAjax(){
var canvasB104 = document.getElementById('B104');
var canvasData = canvasB104.toDataURL('image/png');
var ajax = new XMLHttpRequest();
ajax.open("POST",'testSave.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData);
}
</script>
</head>
<body>
<canvas id="B104" data-processing-sources="B_104/B_104.pde" width="300px" height="300px" onmouseout="postAjax()"></canvas>
Plus, I have a PHP file, that I got from this tutorial: http://permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/
One of the things I goofed up, which is probably a rookie thing to do, was I had the variable canvasData in quotes, which I see now is incorrect of course (because I wanted the string not the actual word 'canvasData')
In case anyone wants to see it working: http://graphic-interaction.com/mfa-thesis/testing-group02/pro-ex-07.php
My Question (UPDATED): How do I get my keyword to change in the API URL Search Query based off of an AJAX Call (having a scope problem here) ?
I connected a leaflet map to an an API to plot Wikipedia articles with geocoordinates. An example URL looks like: http://api.infochimps.com/encyclopedic/wikipedia/dbpedia/wikipedia_articles/search?g.radius=10000&g.latitude=30.3&g.longitude=-97.75&f.q=park&apikey=api_test-W1cipwpcdu9Cbd9pmm8D4Cjc469
So far so good. But I am stuck on how to implement an AJAX call that would allow the user to search for a new query term and reload the map. When I click the search box, the keyword alerts that the keyword is the text in the search box. But the map does not update based on the new keyword.
So I have as a JS script:
var map;
var pointsLayer;
var markerMap = {};
var keyword; //instantiating keyword for global scope
$(document).ready(function(){
map = new L.Map('mapContainer');
var url = 'http://{s}.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png';
var copyright = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade';
var tileLayer = new L.TileLayer(url, {attribution:copyright});
//var startPosition = new L.LatLng(42.33143, -83.04575);//detroit
var startPosition = new L.LatLng(41.883333, -87.633333);//chicago
//var startPosition = new L.LatLng(40.7143528, -74.0059731);//new york
map.on('load', function(){
keyword = 'history'; //setting keyword to history on first load
requestUpdatedPoints();
keyword = ''; //clearing keyword after first load
});
map.setView(startPosition, 13).addLayer(tileLayer);
map.on('moveend', function(){
requestUpdatedPoints();
});
//////////////
/// WRONG ADDITION OF ADDING KEYWORD SEARCH?
//////////////
$('a#submitSearch').on('click', function(e, keyword){
e.preventDefault();
//keyword = '';
keyword = $('input#keyword').val(); //setting keyword to whatever is in the search box
alert(keyword); //did it set it?
requestUpdatedPoints(keyword); //send in new AJAX call with new keyword
location.reload();
});
});
function requestUpdatedPoints(keyword){
$.ajax({
type: 'GET',
url: 'http://api.infochimps.com/encyclopedic/wikipedia/dbpedia/wikipedia_articles/search?g.radius=100000&g.latitude=41.883333&g.longitude=-87.633333&f.q='+this.keyword+'&apikey=api_test-W1cipwpcdu9Cbd9pmm8D4Cjc469',
dataType: 'jsonp',
//data: JSON.stringify(data),
contentType: 'application/json; charset=utf-8',
success: function(result){
for( var i=0; i<result.results.length - 1; i++ ){
console.log("adding " + result.results[i].wikipedia_id + " to the map")
var marker = L.marker([result.results[i].coordinates[1], result.results[i].coordinates[0]]).addTo(map);
marker.bindPopup(''+result.results[i].wikipedia_id+'');
}
},
error: function(){
alert('check your error log.');
}
});
}
the HTML is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<script type="text/javascript" src="./map.js"></script>
</head>
<body>
<h1>WikiMap</h1>
<div id="mapContainer"></div>
<div id="infoContainer">
<div id="search">
<form id="searchForm">
<label>Keyword:</label>
<input type="text" id="keyword" name="keyword" placeholder="search by keyword"/>
<a id="submitSearch" href="#">search</a>
</form>
</div>
</div>
</body>
</html>
My Question (UPDATED): How do I get my keyword to change in the API URL Search Query based off of an AJAX Call (having a scope problem here) ?
I've finally figured that my layout is poor for accomplishing what I want to get done. Even if the keyword is updating, the map.on() load function is reverting everything back to the beginning. I've decided to use Backbone.js to help me organize my data flows.
var searchControl = L.esri.Geocoding.Controls.geosearch({
providers: [
new L.esri.Geocoding.Controls.Geosearch.Providers.MapService({
label: 'States and Counties',
url: 'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer',
layers: [2, 3],
searchFields: ['NAME', 'STATE_NAME']
})
]
}).addTo(map);
I am using leaflet map search api by address but I find an autosuggestion searching api something that.