Develop Reference

Event Tracking with Google Analytics in a Standalone HTML App

I work with internet connected touchscreens that can run HTML projects. The HTML projects must be self contained in that all assets like scripts, css, images, videos, etc... must be in the local file structure on the hardware in case the unit loses internet connectivity. The units have a built-in web server for this basic use with a chromium browser.
I'm wanting to track events on specified DOM elements using Google Analytics so those events can be recorded when the unit has an active internet connection.
For example... If a button is clicked to perform some sort of action on the page and in that action I want to include an audit call to send that event to my GA account. Pretty standard use of this: https://developers.google.com/analytics/devguides/collection/analyticsjs/events
However, I can't seem to figure out how to make this work on a page that isn't hosted on a typical website. Everything I'm finding doesn't deal with this specific scenario and always relies on a page hosted on a typical site.
How can I track events using Google Analytics on a standalone HTML page?
Thanks,
~Mike

Can you try with sending your events by using Google Tag Manager to Google Analytics.It is quite easy to implement.
Try with adding the Google Tag Manager code, you get once you create the account in tag manager.And add your analytics property id to a custom variable in tag manager.Then create a page view type tag with analytics property id.
sample link for your reference https://support.google.com/tagmanager/answer/6102821?hl=en
Once you are able to link tag manager to your HTML page you can start tracking the page view event.Similarly, you can track other types of events.

GA Basics – Best practices for page view tracking in dynamic PHP based sites

Sorry for the basic question, but I've been reading lots on this and haven't been able to piece together a solution (as a rookie developer) so thought maybe asking would be helpful to me and others in the same boat.
I'm attempting to install GA (gtag) on a PHP site. The initialisation code works fine, Google Tag Assistant is happy, but the site functions similar to a single page application whereby the content is all loaded in dynamically via js into a DIV (little floating overlays).
I've read that creating a separate analyticstracking.php file is a best practice for the inclusion of your tracking code on pages (using include_once), but doing this on the dynamically loaded php files seems to throw up an error within tag manager – "Same web property ID is tracked twice."
My assumption was that this was happening because the page name didn't change, which would be logical, but if true, how and where does one change the page name?
Is it best to do this as an event when the nav item loading content is clicked, or is it best to somehow include tracking data in the PHP files for loaded content (and how)? If the latter, is is possible to pass the page name to the included analyticstracking.php call on load?
Or perhaps I doing this all wrong and should I be using Google Tag Manager?
Thanks in advance,
Joel

Best solution for your situation i guess will be something called "virtual pageview". Google Analytics documentation describes it here: https://developers.google.com/analytics/devguides/collection/gtagjs/single-page-applications
In shortcut:
Include Google Analytics (or GTag) code only once, for example in head.
Every additional content loading (which is key for you and want to treat as a new pageview) should send JS code with new "virtual" pageview to GA with datas seted by you (like new pageview title, new pageview url etc.).
Forget about sending events in this case as a "core". Of course you can also track events with nav clicks but first implement virtual pageviews.

Prevent Google Tag Manager from reading input-elements

I'm implementing Google Tag Manager (GTM) on multiple web applications. One of these applications asks the user for personal information. There are good processes for auditing the application code, to make sure that the personal information is stored safely and does not leak.
However, implementing GTM will inevitably mean that the web analysts can write and deploy JavaScript code that reads these input-fields and sends the information to third-parties (such as Google Analytics).
Is there a way of preventing Google Tag Manager from being able to access the input fields where the user enters this information?

I haven't used this with GTM v2, but in v1 you can blacklist types of tags via the code in your page (this cannot be overriden by configuration in the GTM interface) - so you can prevent users from implementing custom HTML/JavaScript Tags that may include code to extract information from the page. Remember to also blacklist custom JavaScript macros as they could do the same.
If your pages writes any information to global javascript variables you also have to disable the JavaScript variable macro (which would allow a user to write an extraction function in a macro), and possibly the DOM element macro
Better still, don't do blacklist, create a whitelist.
In addition while many people may have permissions to add tags there should be only one person with the right to publish changes who signs off every new Tag. That way there is at least somebody responsible if things go awry.

How do JavaScript-based modal/popup services like KissInsights and Hello Bar work?

I'm developing a modal/popup system for my users to embed in their sites, along the lines of what KissInsights and Hello Bar (example here and here) do.
What is the best practice for architecting services like this? It looks like users embed a bit of JS but that code then inserts additional script tag.
I'm wondering how it communicates with the web service to get the user's content, etc.
TIA

You're right that usually it's simply a script that the customer embeds on their website. However, what comes after that is a bit more complicated matter.
1. Embed a script
The first step as said is to have a script on the target page.
Essentially this script is just a piece of JavaScript code. It's pretty similar to what you'd have on your own page.
This script should generate the content on the customer's page that you wish to display.
However, there are some things you need to take into account:
You can't use any libraries (or if you do, be very careful what you use): These may conflict with what is already on the page, and break the customer's site. You don't want to do that.
Never override anything, as overriding may break the customer's site: This includes event listeners, native object properties, whatever. For example, always use addEventListener or addEvent with events, because these allow you to have multiple listeners
You can't trust any styles: All styles of HTML elements you create must be inlined, because the customer's website may have its own CSS styling for them.
You can't add any CSS rules of your own: These may again break the customer's site.
These rules apply to any script or content you run directly on the customer site. If you create an iframe and display your content there, you can ignore these rules in any content that is inside the frame.
2. Process script on your server
Your embeddable script should usually be generated by a script on your server. This allows you to include logic such as choosing what to display based on parameters, or data from your application's database.
This can be written in any language you like.
Typically your script URL should include some kind of an identifier so that you know what to display. For example, you can use the ID to tell which customer's site it is or other things like that.
If your application requires users to log in, you can process this just like normal. The fact the server-side script is being called by the other website makes no difference.
Communication between the embedded script and your server or frames
There are a few tricks to this as well.
As you may know, XMLHttpRequest does not work across different domains, so you can't use that.
The simplest way to send data over from the other site would be to use an iframe and have the user submit a form inside the iframe (or run an XMLHttpRequest inside the frame, since the iframe's content resides on your own server so there is no cross domain communication)
If your embedded script displays content in an iframe dialog, you may need to be able to tell the script embedded on the customer site when to close the iframe. This can be achieved for example by using window.postMessage
For postMessage, see http://ejohn.org/blog/cross-window-messaging/
For cross-domain communication, see http://softwareas.com/cross-domain-communication-with-iframes

You could take a look here - it's an example of an API created using my JsApiToolkit, a framework for allowing service providers to easily create and distribute Facebook Connect-like tools to third-party sites.
The library is built on top of easyXDM for Cross Domain Messaging, and facilitates interaction via modal dialogs or via popups.
The code and the readme should be sufficient to explain how things fit together (it's really not too complicated once you abstract away things like the XDM).
About the embedding itself; you can do this directly, but most services use a 'bootstrapping' script that can easily be updated to point to the real files - this small file could be served with a cache pragma that would ensure that it was not cached for too long, while the injected files could be served as long living files.
This way you only incur the overhead of re-downloading the bootstrapper instead of the entire set of scripts.

Best practice is to put as little code as possible into your code snippet, so you don't ever have to ask the users to update their code. For instance:
<script type="text/javascript" src="http://your.site.com/somecode.js"></script>
Works fine if the author will embed it inside their page. Otherwise, if you need a bookmarklet, you can use this code to load your script on any page:
javascript:(function(){
var e=document.createElement('script');
e.setAttribute('language','javascript');
e.setAttribute('src','http://your.site.com/somecode.js');
document.head.appendChild(e);
})();
Now all your code will live at the above referenced URI, and whenever their page is loaded, a fresh copy of your code will be downloaded and executed. (not taking caching settings into account)
From that script, just make sure that you don't clobber namespaces, and check if a library exists before loading another. Use the safe jQuery object instead of $ if you are using that. And if you want to load more external content (like jQuery, UI stuff, etc.) use the onload handler to detect when they are fully loaded. For example:
function jsLoad(loc, callback){
var e=document.createElement('script');
e.setAttribute('language','javascript');
e.setAttribute('src',loc);
if (callback) e.onload = callback;
document.head.appendChild(e);
}
Then you can simply call this function to load any js file, and execute a callback function.
jsLoad('http://link.to/some.js', function(){
// do some stuff
});
Now, a tricky way to communicate with your domain to retrieve data is to use javascript as the transport. For instance:
jsLoad('http://link.to/someother.js?data=xy&callback=getSome', function(){
var yourData = getSome();
});
Your server will have to dynamically process that route, and return some javascript that has a "getSome" function that does what you want it to. For instance:
function getSome(){
return {'some':'data','more':'data'};
}
That will pretty effectively allow you to communicate with your server and process data from anywhere your server can get it.

You can serve a dynamically generated (use for example PHP or Ruby on Rails) to generate this file on each request) JS file from your server that is imported from the customers web site like this:
<script type="text/javascript" src="//www.yourserver.com/dynamic.js"></script>
Then you need to provide a way for your customer to decide what they want the modal/popup to contain (e.g. text, graphics, links etc.). Either you create a simple CMS or you do it manually for each customer.
Your server can see where each request for the JS file is coming from and provide different JS code based on that. The JS code can for example insert HTML code into your customers web site that creates a bar at the top with some text and a link.
If you want to access your customers visitors info you probably need to either read it from the HTML code, make your customers provide the information you want in a specific way or figure out a different way to access it from each customers web server.

How to write live testing app for HTML and JS and capture page load events

I'm writing an in-browser Chrome app that will allow users to edit HTML and JS code and then be able to test their changes live.
My current method of doing this is to create a new window with JavaScript, create an IFrame in that window, and then inject the user's HTML or JS code into the IFrame. The problem with this though, is that the page load events of the IFrame can't be used by the script being live-tested. My app could manually call testWindow.iframe.contentWindow.onload, but that wouldn't work with the various events and methods used by the different JS libraries for their "domready"-style events.
Perhaps this is not possible, and I'll just have to send the code to the server and have the server output it. I noticed apps like jsfiddle actually just ask what library and event you want.
Any ideas on how I can have live-testing in my app and still fire page loading events for the JS being tested?

You could use dispatchEvent on the iframe, which you know will be supported since you are making a Chrome app. Alternatively, for absolutely certain cross-browser compatibility (or some other reason) you could also send the script to your server (using Ajax) to be stored in a database, then linked to in the new window.

Just heard a lightening talk on http://vowsjs.org/ this evening. Haven't used it yet but I plan to explore this for testing web apps.