tracking loading times of 3rd party plugins in google analytics - javascript

I am using a 3rd party plugin service (POWr.io) to add elements to our online store built using Shopify. The plugin does not support script tags, so I was unable to add tags using the Google Tag Manager
I use a variety of plugins from this service, and I would like to be able to collect data on them, specifically measuring loading time for photo galleries, and setting up goals in Google Analytics for newsletter submissions.
I can add custom JS directly into the individual plugins (in this case a photo gallery), and I have loaded the Google Analytics Tracking Code Snippet successfully. I am currently using ga('send', 'pageview'); but I think I need to use a different command to collect loading time, I have tried following what is written here
However, I am not sure how to modify:
ga('send', 'timing', [timingCategory], [timingVar], [timingValue], [timingLabel], [fieldsObject]);
To get the results I need and into Google Analytics.
Likewise, for a form submission, I imagine I would need to use this:
ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
But, again, not sure what how to modify this for my use in a plugin.
Any advice anyone could offer would be greatly appreciated

To measure timing events you need to create a timestamp when the event starts, another when it ends, and the difference between the two you pass in as timing value.
timingCategory, timingVar and timingLabel are just arbitrary strings that appear as dimensions in your reports (like category, action and label in event tracking).
timingValue is:
timingValue integer yes The number of milliseconds in elapsed time to
report to Google Analytics (e.g. 20).
With user timings GA is not doing the actual measuring for you, you need to determine the time yourself and put it in as a metric.

Related

Append cookie value to query string on initial page load?

I have a situation and I am not sure how to solve it.
I am using a script in Google Tag Manager to define where marketing sources are coming from (i.e. organic search, organic social, paid search, referral, direct traffic, etc.).
I am taking the data from that script and storing it in a 1st party cookie & first party cookie variable.
However, I need the data from the cookie to populate in the URL query string, similar to how utms populate in a query string when someone clicks a Google Ad.
For example, when someone clicks on a Google ad, they arrive on the landing page and the URL looks something like this www.examplesite.com/?utm_source=Google&utm_medium=ppc&utm_campaign=example
I need similar functionality to that. So in my example, if someone came from an organic search result, I would want it to look like this:
www.examplesite.com/?Source=Organic&SourceDetail=Google.
Is this even possible to do on the initial page?
Yes, there are a few ways of going around it. I will only highlight the most elegant option, but first, you don't need to touch your query string. You can override the string that is being sent to GA with GTM. It's a lot more elegant than tinkering with the user-exposed front-end. Here is how:
That's how you override your location dimension (dl) in your pageview tag.
Now the only thing that remains is to make that custom javascript variable returning a string that would be just your current url with the proper utm-params appended to it.
This is a very clean and non-intrusive implementation. You can also do it on a GA settings variable level, which may be even a better solution, depending on your situation.
Also, you can override your source/medium using an event, rather than a pageview, but be careful with events. A change of source/medium will force GA to generate a brand new session for this user. That is done to be able to build different attribution models on the same dataset.

Google Anytics without javascript

We want to track the utm_source and utm_medium on Google Analytics on one of our clients site. We also want to get the conversion of the ad.
We can:
ga('send', 'pageview'); //Using our tracking number
This would work perfectly but our client will no allow js code added. We are thinking of using http://www.google-analytics.com/__utm.gif but according to doc, utmcc should pass the cookie values.
Is there any way we can use utm.gif with static parameter values?
<img src="http://www.google-analytics.com/__utm.gif?....">
You can use email tracking it works though the measurement protocol which is the same as the JavaScript library uses.
<img src="https://www.google-analytics.com/collect?v=1&..."/>
You can build up the hits as you wish.

JAVASCRIPT: How to track and log user events on a website(like Google Analytics)

I want to create an application like Google Analytics. I have taken Analytics.js code from Segment(open source analytics application Segment.com) which contains all the in-built functions to track User Events. I have also added async code to load Analytics.js into my website. Now I am Stuck. How can I collect those Event details occurring on my website and send it to my own server?
I assume your are collecting pageview data but you are stuck on event data, right? Try using event listeners in order to be able to collect whatever action takes place on the site.
For example, if you want to register when someone is using a textarea:
textarea.addEventListener(
'keyup',
sendInfoToAnalytics(),
true
);

any reason not to send data with events as opposed to custom dimensions?

It seems that Custom Dimensions are the new way to send custom data from a website to GA. I'm new to GA but my manager has used GA in the past and I'm guessing this was before the CD structure existed in GA. Do you know when the CD structure was introduced in GA?
He has sent custom data to GA in the past using events. This seems like a viable way of sending data and another manager at my company had referred to this approach last week so it seems like maybe this was a standard approach before GA introduced CD's. So given the following request:
var myRequest =
{
UserID:1234,
SelectedReportType:1,
};
What are the tradeoffs between sending this request data to GA as a CD like this:
ga('set', 'dimension1', JSON.stringify(myRequest));
ga('send', 'pageview');
Vs sending this request data to GA as event data like this:
ga('send', 'event', {
'eventCategory':'MyWidgetUserSelection',
'eventAction':JSON.stringify(myRequest)
});
?
Custom dimension where introduced with the switch from "classic" Analytics to Universal Analytics (IIRC that was in 2012), where they replaced (more or less) custom variables.
"Classic Analytics" (not an official name, AFAIK the previous GA version did not have a name other than GA) was a pretty messy thing that pretty much used the technology of the original Urchin tracker (Urchin was a web tracking company Google acquired in the early 2000s and rebranded their product as Google Analytics). Classic analytics pre-computed a lot of data on the client side (using up to five different cookies), including traffic source attribution, before it made a rather convoluted image request to the Google server.
In contrast Universal Analytics was designed on top of a clean protocol, the measurement protocol. It is "universal" because any device or program that can make a http request can now send data to Google Analytics. Universal Analytics does not compute any data on the client side, the data is processed only after it arrives at the Google tracking servers.
"Classic" Analytics had up to five custom variables in different scopes (hit, session,user)). They were displayed in the "custom" menu item of the GA interface (which is still there, but is now useless unless you have old data that was collected with classic analytics). Five variables posed a pretty tight limit, plus it was not always easy to understand how exactly they were supposed to work. So people developed a habit of storing additional data not in custom variables, but in events.
Universal Analytics in the free (commercial) version offers 20 (200) custom dimensions in four different scopes, to wit hit, session, user and product (and an additional 20 (200) custom metrics, although very few people seem to use custom metrics). "Hit scope" means you can add a dimension to every single interaction. "Session scope" only retains the last value for a session. "User scope" is primarily for values that are set once per recurring user (i.e. a user turns into a customer). With the product scope you can add additional properties to the products in an ecommerce-transaction (or production impression etc. if you are using enhanced e-commerce tracking).
Conceptually event tracking and custom dimensions are not remotely comparable. A dimension is a property that is connected to an interaction hit (or a collection of interaction hits like a session or a user) and allows to break down metrics into indivual rows. For example the "pageview" metric can be broken down by page path or page title, which are automatically collected. You might add a custom dimension "page category" and you can break down your total number of pageviews into separate rows that show the number of pageviews per category.
Custom dimensions do not have their own report; you can select them as secondary dimension in a standard report, or create custom reports based on them. You can also use custom dimensions to segment sessions or users by the respective values for the dimension.
Events on the other hand are interactions in their own right, with their own set of default metrics and dimensions (in fact you can amend events with their own custom dimensions). Proper usage of events is to track interactions that not load a new page (or do not change the page content enough to warrant a pageview call).
You can use events for segmentation (i.e. "show only sessions where the user had a certain event"), but you cannot break down pageview metrics by event properties. That is actually the main difference.
A more practical concern is that events, unlike custom dimensions, count toward you data collection limit (the free version of Google Analytics allows for 10 mio hits per month only, although the limit is so far not strictly enforced). Since custom dimension are not interactions by themselved they do not count towards the quota.

Analytics on a bootstrap modal with pageview and time related metrics

I have a page (let's name it the overview page) with a lot of images of projects that on a click open a bootstrap (v3) modal with more info about that project. Each project also has its own page (single page).
I'd like to track pageviews for the projects when a user opens the modal with Google (universal) analytics. Now I'm planning on doing this by adding the following code to each link on the overview page:
onClick="ga('send','pageview','/url-to-project-page');"
I expect this works fine since I've seen this method in other posts regarding tracking pageviews on AJAX calls.
But I'm wondering how this affects time related metrics like average time on page, since analytics can't know when the modal is closed (the same as leaving a single page).
Does anyone know if the metrics will be comparable to a normal single page view, or will some parts of the metrics (I'm guessing time related metics) be off because analytics isn't able to track them?
If I understand it right, you want to track the opening of the modal as a pageview of the projects page. This can be accomplished with what you just said, but using a direct URL would be unwise in my humble opinion. You would be better off using a virtual URL(VURL) instead. Read more about virtual URLs here.
It is also available in Universal Analytics(UA) (analytics.js) and when you are sending such a pageview as you mentioned above, you are forcing GA to report a pageview of the specified URL. Your code,
(1) ga('send','pageview','/url-to-project-page'); will work.
In UA, ga('send','pageview'); is used to send the current pageview. If you need to send a virtual pageview (or a pageview which has not happened but you want to be recorded), you can also send it as:
(2)
ga('send', 'pageview', {
'page': '/url-to-project-page'
});
or as
(3)
ga('set', 'page', '/url-to-project-page');
ga('send', 'pageview');
or as
(4)
ga('send', {
'hitType': 'pageview',
'page': '/url-to-project-page'
});
The implementations 1, 2 and 4 are same, but 3 is different.
You can read more about the implementations here, here and here.
This would affect your pageviews count (you will see an increase), but would not increase your visits (as no user can 'land' on a virtual page (unless you make them do so)). This will impact your bounce rates, but it will not be 'off' in the sense that if they view your project in a modal, it means they have interacted with your site hence they should not be marked as a bounce, and this is what happens when you send a virtual pageview.
Though what you wanted to do was correct, your implementation suffers from not being able to differentiate modal views from actual project page views. I would overcome this by organising the VURL structure in a way that it makes sense and is semantic. As an example, instead of sending a VURL which corresponds directly to your project single page url, I would send it like: ga('send','pageview','/virtual/modal/url-to-project-page');
This way, you can filter out the VURLs by adding an exclude filter for /virtual from pageviews so that virtual pageviews are not shown. Also, you can view total pageviews for project pages by using /url-to-project-page. Also, you can view all virtual pageviews resulting from the opening of modals by using /virtual/modal.
Time on Page and Pageviews/Visit and such metrics will change, but it depends on how you see it, whether as an error or improvement in accuracy. Time on Page is recorded for the virtual pageviews until the user navigates to a new page, or a request to report a VURL is sent, or until the session is closed (whichever happens first).
Hope that helps! :)

Categories

Resources