Google Analytics with SPA (Angular.js) - javascript

I've built a SPA website using Angular.js.
How can I configure Google Analytics to identify every page change?

When you deal with SPAs you should avoid firing a pageview when the webpage is loaded in the user's browser because in your Google Analytics reports only the first view will be shown (e.g. index.html). As Google suggests, you should use virtual page views. For Angular specifically, you can do that by dropping the pageview tracking code in your View Router.
If that sounds too complicated, you can take a look at Angularlytics. With a simple configuration and inclusion of the module into your Angular application, all of your views will be tracked automatically.

Related

Google Ads in Electron?

I'm writing an Electron app that I'd like to place Google ads in, but I'm not sure how to correctly do it.
I've created my ad snippet and put it in my app. The default snippet uses //googleads.g.doubleclick.net ... as the URL for the adsbygoogle.js file, so I had to change that to https://googleads.g.doubleclick.net ... because the Electron app uses file:/// to load the index page.
But after doing that, the adsbygoogle.js file throws up a 400 error which is strange.
And on top of that, I'm not sure how to handle a user clicking on ads. To get the link to my website working, I had to create a link that pointed to javascript:shell.openExternal('https://example.com'), but I'm not sure how to do that with external ads.
So how can I put ads in my Electron app?
Google AdSense is not allowed in any desktop applications.
From AdSense policy:
Google ads, search boxes or search results may not be:
Integrated into a software application of any kind, including toolbars.
Displayed in pop-ups or pop-unders.
Placed in emails, email programs, or chat programs.
Obscured by elements on a page.
Placed on any non-content-based page. (Does not apply to AdSense for search or mobile AdSense for search.)
Placed on pages published specifically for the purpose of showing ads.
Placed on pages whose content or URL could confuse users into thinking it is associated with Google due to the misuse of logos,
trademarks or other brand features.
Placed on, within or alongside other Google products or services in a manner that violates the policies of that product or service.
I don't sure about Electron but Node Webkit (very similar technology) allows creation app from any given url.
So, you can actually host your app in the web (with running AdSense ads on it) and create installation package for Node Webkit app.
When installed it will be just regular browser showing by default your web app (with AdSense).
There is no way (IMHO) to Google to distinct Chromium browser downloaded from your site or Download.com to same Chromium browser downloaded from google.com.
I think you can do some Iframe html tag and display your website with the ads in it !
but idk if this is count as a view.

Angulartics not tracking at all

I'm using angulartics for my application to track virtual page views on Google Analytics. This should be enabled by default but no visit to the page is tracked at all.
I should say that I wrapped the Google Analytics js code in a angular directive to be able to turn analytics off on my test server.
Otherwise its pretty standard, I included the angulartics source files in my index.html, added the module to my app.js and removed the ga('send', 'pageview') from the Google Code (as it is described in the docs).
I also found this hard to test. Should I see REST calls in the network console to verify its working? Because I'm not seing any (except the analytics code being loaded from the Google server).
Any idea what I am doing wrong?
Thanks,
Flosky
[edit]I should probably also mention that I'm using the angular ui router and not the default one[/edit]

How to get page.js to work in a single page AND multipage on the same site?

am using page.js for routing in a Grails application using '/' to point /HomeController/index to serve up a single page web application. I just installed Grails Spring Security Core plugin, and I am using the Grails scaffolding to create the User Admin/Permissions views with the goal of serving them in the traditional multi-page way to avoid having to do a lot of UI work on admin pages. The bulk of the application will be served using single page architecture, with just the admin pages being served multi-page.
In their documentation, page.js says, "By default when a route is not matched, page.js will invoke page.stop() to unbind itself, and proceed with redirecting to the location requested. This means you may use page.js with a multi-page application without explicitly binding to certain links." But, I cannot get it to work...
I am using page.js like so:
page('/', SCM.Dashboard.home);
page('/hx', SCM.HX.summary);
page('/hx/vendor', SCM.HX.vendors);
page('/hx/customer', SCM.HX.customers);
page('/customer/list', SCM.Customer.list);
page('/maintenance/activity', SCM.Maintenance.activity);
page();
When I click a link to '/user', based on their documentation, I expect it to forward directly to 'http://domain.com/user'. It adds the correct path to browser location bar (http://domain.com/user), but the browser never forwards to the page. In order to see the page, I have to click the link, and after the location bar has changed, if I refresh the browser window, the correct page appears - obviously unacceptable. Yet, I cannot find in their documentation how to implement this correctly. I have experimented with various settings for hours with no luck. If I comment out the page.js code above, the multi-page admin pages work fine, and I am able to navigate from page to page no problem. Has anyone solved this problem?
I just upgraded from version 1.4.0 to version 1.5.0 and it links between the Single page (Main app) and Multi-page (Admin functionality) portions of the application seamlessly with no configuration needed!! Excellent feature addition!

Universal Analytics tracking for embedded Flash content

We have a Flash (Flex) application embedded on a webpage. The webpage already has our Universal Analytics JavaScript code, and now we want to also track the application's events using Universal Analytics.
We can implement event tracking in the application directly using the Measurement Protocol. However, I'm wondering if that would mean that the stats coming from the application would be considered separate from what's coming from the Universal Analytics ga object on the page, i.e. not attributed to the same user/visitor.
Would it make sense to implement an approach where AS3 code would invoke methods of the page's ga JavaScript object instead?

Twitter Cards using Backbone's HTML5 History

I'm working on a web app which uses Backbone's HTML5 History option. In order to avoid having to code everything on the client and on the server, I'm using this method to route every request to index.html
I was wondering if there is a way to get Twitter Cards to work with this setup, as currently it can't read the page as everything is loaded in dynamically with Javascript.
I was thinking about using User Agents to detect whether it's the TwitterBot, and if it is, serving a static version of the page with the required meta-tags. Would this work?
Thanks.
Yes.
At one job we did this for all the SEO/search/facebook stuff etc.
We would sniff the user-agent, and if it was one of the following sniffers
Facebook Open Graph
Google
Bing
Twitter
Yandex
(a few others I can't remember)
we would redirect to a special page that was written to dump all the relevant data about the page for SEO purposes into a nicely formatted (but completely unstyled) page.
This allowed us to retain our google index position and proper facebook sharing even though our site was a total single-page app in backbone.
Yes, serving a specific page for Twitterbot with the right meta data markup will work.
You can test your results while developing using the card's preview tool.
https://dev.twitter.com/docs/cards/preview (with your static URL or just the tags).

Categories

Resources