Event Tracking with Google Analytics in a Standalone HTML App - javascript

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.

Related

Inject Hotjar tracking code to <head> in Retool - Hotjar fails to connect

I'm playing around with Retool as a live prototyping tool. It would be extremely helpful to be able to wire up Hotjar with it to see how users interact with the prototype.
Hotjar offers a tracking code that needs to be added to the element of the page. Then Hotjar can be connected and I assume opens the page and verifies that the tracking link is in place.
https://help.hotjar.com/hc/en-us/articles/115009336727-How-to-Install-Your-Hotjar-Tracking-Code
Retool doesn't officially allow accessing the documents element as it might interfer with its logic. However, it allows to specify and run JS.
I was able to write a function that is called on window.onload and injects the Hotjar snippet into the element of the page.
However, upon connecting Hotjar is not able to detect the Hotjar tracking code on my Retool page. My assumption is this is because at the time of checking the Retool DOM isn't exposing the tracking code.
Do you have any ideas how I could make this work instead?

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.

Where are website script sources coming from?

I have an unwanted Google Tag Manager popping up on my company's website. We have lost access to the old tag manager (hence the new one).
Using Chrome Dev tools I am able to see the unwanted tag id as a source (http://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX) along with the new correct tag. However, I am not able to work out where that script is coming from!
Is there anyway to work out what is injecting that script into our site?
Directly you won't be able to see which tag have been implement from old GTM. But on the basis of your analysis you might be able to figure out.
just take a look in your new GTM account and compare those tags whatever is there on your website by using TAG ASSISTENT (By GOOGLE). and also check goals, ecommerce and other configuration google analytics account , conversion tracking and remarketing in your adwords account.
if you haven't implement some of these tracking code using new GTM, there is chances that you had implemented through old GTM. In this case try to re-implement those tag using new GTM and then remove old GTM from backend.
NOTE: remove OLD GTM in case of suspicious activity otherwise not required just to avoid data lose

how to call chrome extension(Full Page Screen Capture) or 360browser’s screenshot

I want to save full web page as a image or a pdf.
I tried to use html2canvas but it doesn't support iframe element.
I tried to use phantomjs but it doesn't work in Windows Server 2003 Operation System.
I usually use 360 browsers' plugin and Google Chrome's Full Page Screen Capture.
How can I call the Chrome plugins using JavaScript?
You can use Full Page Screen Capture extension.
Regarding calling this extension by javascript:
As far as I know the externally_connectable is the only official way to call an extension or send messages (maybe with data) from a web page (using javascript) as mentioned here.
If extension not support being externally_connectable, this requires editing the extension and add predefined values for every single domain you wish to integrate with.
If this is the case we can play with a workaround to integrate with any website (and not to define any domains)
If you just want to notify the other side (extension) about some thing, you can use the native JS Event dispatching it on the document from one side(web page) and listening to it at document also from the other side(extension) as the document is shared between the extension content script pages and the web page.
You can't use JS CustomEvent to send data as every time you send data, you receive it empty as a result of sandbox effect of any extension.
If you want to share data (may be the limit of scrolling when taking the screenshot) so the only workaround I know so far is to have a combination between some sort of a storage and the JS native Event mechanism.
The solution in steps (suppose you need the web page to call and send some data to the extension):
Make an event on document from the web page.
Save the data temporarily inside any storage technology you prefer
(localStorage, the DOM itself, or what ever..)
Edit the extension and add event listener to receive the event at the other side (extension) by listening on the document.
Read data and remove it.

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?

Categories

Resources