Google Analytics don't seem to be firing - angularjs

I've tried to look around many threads here around GA, I feel like I've done what's required. My site consist of HTML5 and angular.js, the page is structured roughly as follow (through ng-include)
index.html
|-header
--|-navigation
|-content
|-footer
when a link from navigation bar is clicked, the content will change (partials page in angular), header, footer stays the same.
The last script tag in my < head > is as follow (inside index.html)
<script type="text/javascript">
var globalLanguage = 'en';
// GA tracking variable
var _gaq = [['_setAccount', 'UA-XXXXXXXX-X'], ['_trackPageview']];
</script>
and at the bottom part of index.html, before the closing < / body > tag:
<script type="text/javascript">
(function(d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
g.async = 1;
g.src = '//www.google-analytics.com/ga.js';
g.type = 'text/javascript';
s.parentNode.insertBefore(g, s);
}(document, 'script'));
</script>
All my angular controller function, call a common function as described in Tracking Google Analytics Page Views with Angular.js
function gaqPageView($scope, $location, $window) {
console.log('triggering google analytics');
$scope.$on('$viewContentLoaded', function(event) {
console.log('event triggered, tracking: ' + $location.path());
$window._gaq.push([ '_trackPageview', $location.path() ]);
});
}
I do see the console log statements, there's no error in the console either.
When I print out the content of _gaq, I do get an array that grows as I navigate around the page (which mean my _gaq.push call is working just fine).
However, in my the network call (in chrome dev tool), I don't see any _utm.gif call to Google Analytics. (Basics of Debugging Google Analytics Code: GA Chrome Debugger and other tools).
What am I missing here? seems like the google analytics is not firing off the event and reporting it?
Edit: I am pretty sure I am silly here, the _gaq variable itself is just a normal javascript array, so of course _gaq.push work just fine. But what am I missing to get Google Analytics to kick in and start sending the content of that _gaq?

Are you currently running your server on localhost, or an intranet name without a "." -- the tracking GIF request doesn't get made for localhost servers by default.
See Google Analytics GIF request not sent.
Another idea: Usually _gaq is defined as an array only if it's not already defined. If ga.js has already executed, you might be overwriting the _gaq object. It doesn't seem likely from your code organization, but...
Try replacing
var _gaq = [['_setAccount', 'UA-XXXXXXXX-X'], ['_trackPageview']];
with
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X'], ['_trackPageview']);

Related

NW.js - webview - Angular is not defined error

I want control external website using NW.js and webview, but anytime I try this I have error - Angular is not defined.
My source:
index.html
html...head...body...
<webview id="webview" name="webview" src="https://google.com/" allownw></webview>
<script src="../js/script.js"></script>
...body...html
script.js
(function() {
var gui = require('nw.gui');
var win = gui.Window.get();
var webview = document.getElementById("webview");
var tray = new gui.Tray({
icon : 'assets/icon.png'
});
var menu = new gui.Menu();
menu.append(new gui.MenuItem({
type: 'normal',
label: '▶️ Play',
click: function() {
webview.executeScript({code:"var player=angular.element(document.body).injector().get('player'); player.play();"});
}
}));
tray.menu = menu;
}());
This code produce for me error: ReferenceError: angular is not defined
Note: Website google.com is only example.
From the nw.js docs:
loading local files in webview
Add the following permission to the manifest:
"webview": {
"partitions": [
{
"name": "trusted",
"accessible_resources": [ "<all_urls>" ]
}
]
}
and add 'partition="trusted"' attribute to the webview tag.
This is one reason why the <script tag cannot access your ../js/script.js file. I also suggest using a non-relative path to your local file example: chrome-extension://yourdomain/js/script.js (and that it be relative to the root not 'up' a directory).
From google's docs, you can set accessible_resources to be specific patterns or files.
The insertCss, setUserAgentOverride, permissionrequest event, and especially executeScript from google's documentation will likely be of interest to you.
NOTE: you may not want to give that webview access to your nwjs context (allownw) because it can access anything that your program has access to. This is especially true of both an external URL and http where MITM tampering or a third-party change could potentially cause someone to gain elevated access to the PC your application is running on.
For your example, I would keep the script.js outside of the webview and have it instrument the webview via script injection.

Implementing google custom search in angularjs

I am trying to implement google custom search in an angular js website.
When I click on the search button it does not display me anything, but the url is updated to the url.
I have followed the steps mentioned in the documentation by google.
I am not sure what I am doing wrong?
My search bar is located on the home page as -
<gcse:searchbox-only enableAutoComplete="true" resultsUrl="#/searchresult" lr="lang_en" queryParameterName="search"></gcse:searchbox-only>
my search result has -
<gcse:searchresults-only lr="lang_en"></gcse:searchresults-only>
Any input is much appreciated.
Thanks,
You may have more than one problem happening at the same time...
1. Query Parameter mismatch
Your searchresults-only does not match the queryParameterName specified on gcse:searchbox-only.
Index.html
<gcse:searchresults-only queryParameterName="search"></gcse:searchresults-only>
Search.html
<gcse:searchresults-only queryParameterName="search"></gcse:searchresults-only>
2. Angular.js is blocking the flow of Google CSE
Under normal circumstances, Google Search Element will trigger an HTTP GET with the search parameter. However, since you are dealing with a one-page application, you may not see the query parameter. If that suspicion is true when you target resultsUrl="#/searchresult", then you have two options:
Force a HTTP GET on resultsUrl="http://YOURWEBSITE/searchresult". You may have to match routes, or something along those lines in order to catch the REST request (Ember.js is really easy to do so, but I haven't done in Angular.js yet.)
Use JQuery alongside Angular.js to get the input from the user on Index.html and manually trigger a search on search.html. How would you do it? For the index.html you would do something like below and for the results you would implement something like I answered in another post.
Index.html
<div>GSC SEARCH BUTTON HOOK: <strong><div id="search_button_hook">NOT ACTIVATED.</div></strong></div>
<div>GSC SEARCH TEXT: <strong><div id="search_text_hook"></div></strong></div>
<gcse:search ></gcse:search>
Index.js
//Hook a callback into the rendered Google Search. From my understanding, this is possible because the outermost rendered div has id of "___gcse_0".
window.__gcse = {
callback: googleCSELoaded
};
//When it renders, their initial customized function cseLoaded() is triggered which adds more hooks. I added comments to what each one does:
function googleCSELoaded() {
$(".gsc-search-button").click(function() {
$("#search_button_hook").text('HOOK ACTIVATED');
});
$("#gsc-i-id1").keydown(function(e) {
if (e.which == 13) {
$("#enter_keyboard_hook").text('HOOK ACTIVATED');
}
else{
$("#search_text_hook").text($("#gsc-i-id1").val());
}
});
}
(function() {
var cx = '001386805071419863133:cb1vfab8b4y';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
I have a live version of the index.html code, but I don't make promises that will be permanently live since it is hosted in my NDSU FTP.

Google _trackEvent not working

I'm having an issue with google analytics trackEvent.
I'm using the following code -- and after several days and several 1,000 visitors l'm not seeing anything recorded in my google analytics.
So at the top of my page l am including my google analytics tracking code (and of course jquery), and at the bottom of my page, and before the closing tag l have the following:
<script type="text/javascript">
$(document).ready(function(){
var _gaq = _gaq || [];
_gaq.push(["_trackEvent", "Funnel", "SOMETHING HAPPENED", "page1.php", 0, false]); // create a custom event
});
</script>
Any help?

How do I adapt a Google AdWords tracking pixel for use in an AngularJS app?

How do I adapt an AdWords tracking pixel to function as intended within an AngularJS application?
The typical tracking code looks like this:
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 123456789;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "AAAAAAAAAAAAAAAAAAA";
var google_conversion_value = 0;
/* ]]> */
</script>
<script type="text/javascript"
src="//www.googleadservices.com/pagead/conversion.js">
</script>
(I've omitted the standard <noscript> fallback, as it's obviously irrelevant in the context of an AngularJS app.)
The tracking code works by setting a bunch of variables in the global namespace, then fetching an external script, on every page load. In an Angular context, this doesn't work because the HTML source isn't retrieved anew from the server on each page load.
My initial (and possibly non-functional) attempt to adapt this to Angular looks like this (in Coffeescript):
SpiffyApp.run ($rootScope, $location, $window, session, flash) ->
# Other initialization stuff
$rootScope.$on '$routeChangeSuccess', (event, data) ->
# Other route-change callback stuff
$window.google_conversion_id = 123456789
$window.google_conversion_language = "en"
$window.google_conversion_format = "2"
$window.google_conversion_color = "ffffff"
$window.google_conversion_label = "AAAAAAAAAAAAAAAAAAA"
$window.google_conversion_value = 0
jQuery.ajax
type: "GET",
url: "//www.googleadservices.com/pagead/conversion.js",
dataType: "script",
cache: true
This doesn't appear to be working. At least, the marketing consultants are claiming such. I recognize there's a pretty decent chance of PEBKAC here, so my questions:
Should the above work?
If not, what would work?
Thanks in advance!
PS: I've inherited this app from another developer, and I'm not (yet) well-versed in the platform. Feel free to point out (in the comments) any grievously bad code/practices above. Thanks!
I am not an expert on AngularJS, but this might be something that can be resolved by using the asynchronous version of the AdWords tracking pixel as the conversions for that can just be called with a standard javascript function call and does not rely on the page load.
You can include the asynchronous version of the AdWords tracking pixel like this (make sure you use the https version):
<script type="text/javascript" src="https://www.googleadservices.com/pagead/conversion_async.js" charset="utf-8">
Then once you have done that, you'll get a "google_trackConversion" function added to window which you can then just call whenever you need it, e.g.
window.google_trackConversion({
google_conversion_id: 123456789,
google_conversion_label: 'AAAAAAAAAAAAAAAAAAA',
google_conversion_language: "en",
google_conversion_format: "2",
google_conversion_color: "ffffff",
google_conversion_value: 0
});
HTH

ajaxSubmit does not reload page after first request (in CakePHP)

I'm creating a CMS which has a page edit section. I'm trying to create a Preview function. It works fine on the first attempt, but if you then change some text and preview again, the preview is the old version. It also appears very quickly. It's as if the ajaxSubmit function doesn't bother reloading the page.
I tried to get round this by changing the url each time (by adding on a timestamp to the end), but this made no difference. I'm using jquery, cakePHP and fck editor.
Here's what I have:
<script type="text/javascript">
$('#page_modal').jqm();
$('#preview_btn').click(function(e){
// Get current page content from fck iframe
var oEditor = FCKeditorAPI.GetInstance('PageContent');
var newcontent = oEditor.GetData();
$('#PageContent').html(newcontent);
// Submit form via Ajax
var d=new Date();
var t=d.getTime();
var thisurl = '/admin/pages/preview/' + t.toString();
$('#ajaxForm').ajaxSubmit({
url: thisurl,
error: function(XMLHttpRequest, textStatus, errorThrown){
alert(textStatus);
},
success: function(responseText){
$('#page_modal').jqmShow().find('#page_modal_content').html(responseText);
}
});
e.preventDefault();
});
</script>
As I said, it works fine first time, but then on subsequent calls the content is not updated. Can anyone suggest anything?
Try marking the view (/admin/pages/preview) with no cache. In the actual view put:
<cake:nocache>
// your view content here
</cake:nocache>
It may be that the view is being cached by cake so it does not update with subsequent calls.
http://book.cakephp.org/view/347/Marking-Non-Cached-Content-in-Views

Resources