google analytics event tracking from multiple websites - events

I have two websites with two unique URLs, each with GA installed.
The basics of my issue is ... website A is seeing the Event Tracking for website B
Website B has been set up for some years and the GA functioned correctly, however, earlier this year the original URL was assigned to website A and website B was assigned a new URL. I have the appropriate GA code installed for each URL
Website B GA Code =
<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-20989255-32', 'auto');
ga('send', 'pageview');
</script>
Website A GA Code =
<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-20989255-16', 'auto');
ga('send', 'pageview');
</script>
Event tracking is enabled on both websites and Website B Event tracking appears to function correctly, however Website A Event tracking contains events from both website A and B.
The event(s) in question I am tracking are File Downloads (PDF)
Both websites have Event Tracking enabled and the code for each website is identical with the exception of the GA account number
<script type="text/plain" class="cc-onconsent-analytics">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20989255-16']); /* used for website A
_gaq.push(['_setAccount', 'UA-20989255-32']); /* used for website B
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
if (typeof jQuery != 'undefined') {
jQuery(document).ready(function($) {
var filetypes = /\.(zip|exe|dmg|pdf|doc.*|xls.*|ppt.*|mp3|txt|rar|wma|mov|avi|wmv|flv|wav)$/i;
var baseHref = '';
if (jQuery('base').attr('href') != undefined) baseHref = jQuery('base').attr('href');
jQuery('a').on('click', function(event) {
var el = jQuery(this);
var track = true;
var href = (typeof(el.attr('href')) != 'undefined' ) ? el.attr('href') :"";
var isThisDomain = href.match(document.domain.split('.').reverse()[1] + '.' + document.domain.split('.').reverse()[0]);
if (!href.match(/^javascript:/i)) {
var elEv = []; elEv.value=0, elEv.non_i=false;
if (href.match(/^mailto\:/i)) {
elEv.category = "email";
elEv.action = "click";
elEv.label = href.replace(/^mailto\:/i, '');
elEv.loc = href;
}
else if (href.match(filetypes)) {
var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
elEv.category = "download";
elEv.action = "click-" + extension[0];
elEv.label = href.replace(/ /g,"-");
elEv.loc = baseHref + href;
}
else if (href.match(/^https?\:/i) && !isThisDomain) {
elEv.category = "external";
elEv.action = "click";
elEv.label = href.replace(/^https?\:\/\//i, '');
elEv.non_i = true;
elEv.loc = href;
}
else if (href.match(/^tel\:/i)) {
elEv.category = "telephone";
elEv.action = "click";
elEv.label = href.replace(/^tel\:/i, '');
elEv.loc = href;
}
else track = false;
if (track) {
_gaq.push(['_trackEvent', elEv.category.toLowerCase(), elEv.action.toLowerCase(), elEv.label.toLowerCase(), elEv.value, elEv.non_i]);
if ( el.attr('target') == undefined || el.attr('target').toLowerCase() != '_blank') {
setTimeout(function() { location.href = elEv.loc; }, 400);
return false;
}
}
}
});
});
}
</script>
Has anybody come across a similar issue ... I suspect the event Tracking is still listening for the original URL in some way ?

It should be straightforward - the website will only track into whichever property is on the page, UNLESS you have other code elsewhere that is interfering and does otherwise. I think in your case, your mixing and mingling of classic GA code and UA may have something to do with it.
You are sending your events with the older GA syntax:
_gaq.push(['_trackEvent', elEv.category.toLowerCase(), elEv.action.toLowerCase(), elEv.label.toLowerCase(), elEv.value, elEv.non_i]);
but you should completely remove all that older stuff, including the ga.js code snippet, and replace it with the new syntax:
ga('send', 'event', elEv.category.toLowerCase(), elEv.action.toLowerCase(), elEv.label.toLowerCase(), elEv.value, elEv.non_i);

Related

codeigniter load googlemaps on ajax gives empty map_canvas

i'm displaying a google maps in codeigniter and this works all fine.
But i'm using the same code in an ajax call, but than it outputs an empty map_canvas, so i don't see anything..
public function googlemapsAjax()
{
echo "
<script type='text/javascript'>
$.getScript('/assets/js/admin.js');
</script>
";
$this->load->library('googlemaps');
$config['center'] = '50.850340, 4.351710';
$config['zoom'] = '6';
$config['places'] = TRUE;
$config['placesAutocompleteInputID'] = 'location';
$config['placesAutocompleteBoundsMap'] = TRUE; // set results biased towards the maps viewport
$config['placesAutocompleteOnChange'] = '
var geocoder = new google.maps.Geocoder();
var address = document.getElementById("location").value;
geocoder.geocode({ "address": address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if(typeof marker != "undefined"){marker.setMap(null)};
$("#location").parent().removeClass("has-error");
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
$("#latitude").val(latitude);
$("#longitude").val(longitude);
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(latitude, longitude)
});
map.setCenter(new google.maps.LatLng(latitude, longitude), 16);
map.setZoom(16);
google.maps.event.addListener(marker, "dragend", function (event) {
latitude = this.getPosition().lat();
longitude = this.getPosition().lng();
$("#latitude").val(latitude);
$("#longitude").val(longitude);
});
} else {
alert("Request failed.")
$("#location").parent().addClass("has-error");
}
});
';
$this->googlemaps->initialize($config);
$data['map'] = $this->googlemaps->create_map();
$this->load->view('admin/ajax/view_googlemaps_ajax', $data);
}
And in my view i have
echo $map['js'];
and
echo $map['html'];
Anyone knows why i have no output in map_canvas?
While it works perfectly if i don't do it over ajax..
#jen_vdp - Thanks for using my library. I've taken a look and believe the issue is to do with how the map is called/initialized.
If you revert back to the non-ajax version and view the page source, you will see that the map is initialized through the following code:
google.maps.event.addDomListener(window, "load", initialize_map);
Obviously, if you load the map via AJAX, the window is already loaded, and therefore, I don't 'think' this will get executed.
My suggestion would be to manually call the JS function initialize_map() on the success callback of your AJAX request.
That's the only thing I can think that it might be at this time. Do let me know if you continue to experience issues and I'll investigate further.
Thanks,
Steve

G+ share not working

I am having this code ,
<g:plus action="share" href="{{url}}" style="height: 28px;" ></g:plus>
<script type="text/javascript">
window.___gcfg = {
lang: 'en-US'
};
(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 am supposed to get a share on G+ of url but instead I am getting a share of
current url/url
Why ??
I was sending an url without http://... ( a relative url ) that's whay google api adds the current url to my url.
so the solution is sending an absolute url not a relative one.

upload progress div increase

function uploadToServer(){
fileField = document.getElementById("uploadedFile");
var fileToUpload = fileField.files[0];
var xhr = new XMLHttpRequest();
var uploadStatus = xhr.upload;
uploadStatus.addEventListener("progress", function (ev) {
if (ev.lengthComputable) {
$("#uploadPercentage").html((ev.loaded / ev.total) * 100 + "%");
}
}, false);
uploadStatus.addEventListener("error", function (ev) {$("#error").html(ev)}, false);
uploadStatus.addEventListener("load", function (ev) {$("#error").html("sorry!")}, false);
xhr.open(
"POST",
"serverUpload.php",
true
);
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("X-File-Name", fileToUpload.fileName);
xhr.setRequestHeader("X-File-Size", fileToUpload.fileSize);
xhr.setRequestHeader("X-File-Type", fileToUpload.type);
//xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.send(fileToUpload);
}
$(function(){
$("#uploadButton").click(uploadToServer);
});
`
<form action="" name="uploadForm" method="post" enctype="multipart/form-data">
hi this code is working fine. but i need increase div size. but this one only showing percentage only. what i have to change to get dat one.
bellow is simple progressbar code using HTML5
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<span id="status"></span>
<h1 id="finalMessage"></h1>
<script type="text/javascript" language="javascript">
function progressBarSim(al) {
var bar = document.getElementById('progressBar');
var status = document.getElementById('status');
status.innerHTML = al+"%";
bar.value = al;
al++;
var sim = setTimeout("progressBarSim("+al+")",300);
if(al == 100){
status.innerHTML = "100%";
bar.value = 100;
clearTimeout(sim);
var finalMessage = document.getElementById('finalMessage');
finalMessage.innerHTML = "Process is complete";
}
}
var amountLoaded = 0;
progressBarSim(amountLoaded);
</script>
it may help you, fix this code in your coding.

Custom variables on product details page in Magento

UPDATE:
Hopefully this is a better explanation of the problem:
I'm trying to pass on the product SKU on my product details page to Google Analytics using _setCustomVar.
I'm running on Magento 1.4.0.1 and my Analytics async code is inserted by the default GA module in the <head> section and it looks like this:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
The custom variable I'm trying to add has this syntax:
_gaq.push(['_setCustomVar',1,'View Product','<?php echo $_helper->productAttribute($_product, $_product->getSku(), 'sku') ?>',3]);
According to the Analytic documentation, in order for the custom variable to be recorded, the _setCustomVar must be called BEFORE the _trackPageView,
but there's no support for this in the default GoogleAnalytics module. There are 2 issues to this problem:
How can I add my _setCustomVar function BEFORE the default tracking code?
How can I add my _setCustomVar function ONLY on product pages?
Original post:
I'm trying to store the SKU of the product being viewed by a visitor in a Analytics Custom Variable. The syntax for this is _gaq.push(['_setCustomVar',3,'View Product','SKU12345',2]);.
Obviously this snippet of code should be added only to the product detail pages, and not to the list, cart, or checkout pages. So I've tried editing the view.phtml file in app/design/frontend/default/my_package/template/catalog/product by adding the following piece of code:
<script>
_gaq.push(['_setCustomVar',
1,
'View Product',
'<?php echo $_helper->productAttribute($_product, $_product->getSku(), 'sku') ?>',
3]);
</script>
The problem is that the I'm adding this custom variable AFTER the basic tracking code, which is added by default in the <head> section, so it doesn't get recorded in Analytics.
I tried to avoid altering the core files with the Analytics module in app/code/core/Mage/GoogleAnalytics/Block/Ga.php, but I think the solution may lay there.
How can I add the piece of code that sets the custom variable so that it appears within the basic tracking code BEFORE _gaq.push(['_trackPageview']);?
This is my async code provided by Analytics:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Idea from here
Note: I'm using Magento 1.4.0.1 and the Analytics Asynchronous Syntax
This is currently working on one of our magento site, If you are using the Magento Admin Google API then you could either (1) create a custom module to extend it or (2) make sure (when viewing source) the <script>_gaq.push(['_setCustomVar... javascript is below var _gaq = _gaq || []; code block
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-3']);
_gaq.push(['_trackPageview']);
_gaq.push(['_setCustomVar', '1', 'awe2', '<?php echo $_helper->productAttribute($_product, $_product->getSku(), 'sku') ?>', '1']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
To Create a custom module
in app/code/local/MageIgniter/GoogleAnalytics/etc/config.xml
<config>
<modules>
<MageIgniter_GoogleAnalytics>
<version>0.1.0</version>
</MageIgniter_GoogleAnalytics>
</modules>
<global>
<blocks>
<googleanalytics>
<rewrite>
<ga>MageIgniter_GoogleAnalytics_Block_Ga</ga>
</rewrite>
</googleanalytics>
</blocks>
</global>
</config>
Create in /app/code/local/MageIgniter/GoogleAnalytics/Block/Ga.php
class MageIgniter_GoogleAnalytics_Block_Ga extends Mage_GoogleAnalytics_Block_Ga
{
private $remId = NULL;
private $conversionId = NULL;
private $conversionLabel = NULL;
public function getPageName()
{
return $this->_getData('page_name');
}
protected function _getPageTrackingCode($accountId)
{
$pageName = trim($this->getPageName());
$optPageURL = '';
if ($pageName && preg_match('/^\/.*/i', $pageName)) {
$optPageURL = ", '{$this->jsQuoteEscape($pageName)}'";
}
return "
_gaq.push(['_setAccount', '{$this->jsQuoteEscape($accountId)}']);
_gaq.push(['_trackPageview'{$optPageURL}]);
" . $this->getProductSku();
}
......
public function getProductSku(){
if($product = Mage::registry('current_product')){
return sprintf("_gaq.push(['_setCustomVar', '%s', '%s', '%s', '%s']);",
1,
'Sku',
$product->getSku(),
1
) . "\n";
}
return '';
}
........
}
see /app/code/core/Mage/GoogleAnalytics/Block/Ga.php for more help
I've managed to make it work by modifying the default GoogleAnalytics module:
In app/code/core/Mage/GoogleAnalytics/Block copy the Ga.php file, then navigate to /www/app/code/local/Mage/GoogleAnalytics/Block and paste it (create the necessary folders if they don't exist).
in the new Ga.php, in the _toHtml() function after testing if Analytics is activated from the Magento backend, test if the current page is a product details page:
$_product = Mage::registry('current_product');
if($_product) {
//output code with _setCustom var
} else {
//output normal tracking code
}
The code with the custom variable set looks like this:
$this->addText('
<!-- BEGIN GOOGLE ANALYTICS CODE -->
<script type=\"text/javascript\">
var _gaq = _gaq || [];
_gaq.push([\'_setAccount\', \'UA-25272379-1\']);
_gaq.push([\'_setCustomVar\', 1, \'Product View\',\''.$_product->getSku().'\', 3]);
_gaq.push([\'_trackPageview\']);
(function() {
var ga = document.createElement(\'script\'); ga.type = \'text/javascript\'; ga.async = true;
ga.src = (\'https:\' == document.location.protocol ? \'https://ssl\' : \'http://www\') + \'.google-analytics.com/ga.js\';
var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- END GOOGLE ANALYTICS CODE -->
');
If you use the asynchrnous insert code of Google analytics, no matter where you place this code, it will only be applied when page is finished loading.
So you can add your _gaq.push() after of before as long as they're inline in the HTML code (not asynchronous)
The asynchronous code looks like :
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();

Ajax , html5, Fancybox.js

I am having problems with using Ajax and Fancybox.js photo viewer together.
I have a website set up first as web 1.0 with the standard navigation with hyperlinks.
but for html5 browsers I'm am using javascript that creates a web 2.0 experience.
The javascript first highjacks the links onclick event which makes a XMLHttpRequest that calls a php script that parses the html and sends back just the part of the html that I want to replace. I am using pushState and popState to get the back and forward buttons to function.
It is working great, it creates the Ajax effect, while persevering all the advantages of web 1.0 including SEO, because the links as far as the search engine spiders are concerned the links are just standard links to standard html pages.
The problem is that one of the pages uses Fancybox.js to show photos, it works fine when the page is accessed via the standard url, but when the html is accessed via the Ajax scripts if breaks it.
Here is code for the Ajax,
if (history.pushState) {
function changeContent(url) {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
document.getElementById('content').innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "getContents.php?url=" + url, true);
xmlhttp.send();
}
$(document).ready(function() {
var elems = null,
links = null,
link = null,
i;
elems = document.getElementById('nav');
links = elems.getElementsByTagName('a');
if (links) {
for (i = 0; i < links.length; i++) {
links[i].addEventListener("click", function(e) {
url = $(this).attr("href");
var pathArray = window.location.pathname.split( '/' );
var n = pathArray.length;
changeContent(url);
history.pushState(null, null, url);
e.preventDefault();
var urlstr = window.location,
index = /index/g,
program = /program/g,
photos = /photos/g,
testimonials = /testimonials/g,
about = /about/g,
contact = /contact/g;
if (program.test(urlstr)){
changeCurrentPage('#program');
document.title = "Our Programs Kolibri Daycare";
}else if (photos.test(urlstr)){
changeCurrentPage('#photos');
document.title = "Photos Kolibri Daycare";
slideShow();
}else if (testimonials.test(urlstr)){
changeCurrentPage('#testimonials');
document.title = "Tesimonials Kolibri Daycare";
}else if (about.test(urlstr)){
changeCurrentPage('#about');
document.title = "About Kolibri Daycare";
}else if (contact.test(urlstr)){
changeCurrentPage('#contact');
document.title = "Contact Kolibri Daycare";
}else {
changeCurrentPage('#home');
document.title = "Kolibri Daycare";
}
}, false);
}
}
window.setTimeout(function() {
window.addEventListener("popstate", function(e) {
var pathArray = window.location.pathname.split( '/' );
var n = pathArray.length;
if (pathArray[n-1]){
changeContent(pathArray[n-1]);
}else {
changeContent('index.html');
}
}, false);
}, 1);
});
}
and her is the script that calls Fancybox.js,
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("a[rel=example_group]").fancybox({
'overlayShow' : false,
'cyclic' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
//]]>
</script>
It is in the head section of the page.
When the html that has the photo links is brought in via Ajax the script that calls fancybox.js is not included. I have tried calling it in different places but nothing seems to work. Does anyone have any ideas?
You need to re-initialize fancybox on the new elements added from ajax. I'm not sure why you don't just upgrade the entire page to HTML5 and use some of the ajax functions provided by jQuery, but I think the re-initialization should be inserted after this line (not tested!):
document.getElementById('content').innerHTML = xmlhttp.responseText;
$('#content').find("a[rel=example_group]").fancybox();

Resources