Cover photo
Petr Havlík (Pedro)
Works at Optimics
Attends University of Economics, Prague
Lives in Prague
241 followers|14,443 views


Petr Havlík (Pedro)

Shared publicly  - 
Be cool, useBeacon!
Leverage useBeacon And beforeunload In Google Analytics

Here's a tutorial with which you'll learn to leverage two cool JavaScript APIs to get more granular information on the time that users spend on your pages.

GA can't report time on page for bounced sessions or Exit Pages, since time measurement relies on subsequent pageview hits. 

With this solution, the browser will send the time spent on page when the beforeunload browser event is detected. This event is dispatched when the unload process begins, i.e. when the user has clicked a link or the close button of the browser tab / window. 

To make sure that the hit isn't cut off by the brutal unload process, we'll leverage the useBeacon field in Universal Analytics. This channels the hit through the navigator.sendBeacon() API, which protects the hit until it is completed.

Browser support is pretty sucky, but this means that the solution can only get better with time :-)

See also +Yehoshua Coren's impressive post on how to leverage this idea in actual analytics work:

#gde   #googleanalytics   #blogpost   #gtmtips  
Leverage the useBeacon field in Google Analytics and the beforeunload browser event to send an accurate time on page every time the user leaves a page.
3 comments on original post
Add a comment...

Petr Havlík (Pedro)

Shared publicly  - 
Wooohooo! :)
New Debug panel for Google Tag Manager

The debug panel got a major overhaul. It now reports each dataLayer push, with tags that fire upon that message (if there's an event included). Clicking a tag opens its properties, and you can view the macros by name OR value. 

You can also view the state of each macro upon each dL message, and you can view what the latest dL values are.

This should make debugging a breeze. Excellent addition to the toolbox!

3 comments on original post
Add a comment...

Petr Havlík (Pedro)

Shared publicly  - 
Good days (of more accurate data) ahead of us :-)
Beacon API just landed in Chrome Canary! Head to chrome://flags/#enable-experimental-web-platform-features, enable the flag, and give it a try!

What's Beacon API? It's a new mechanism to report analytics and similar data without blocking the browser: the payload is delivered in the background by the browser and does not block the page.. even across navigations. In other words, no need for sync-XHRs and other similar hacks to capture page navigation events, form submissions, etc. Think of it as <a ping> but more flexible and more powerful.


P.S. Firefox Nightly also has an implementation of Beacon:
8 comments on original post
Robert Kingston's profile photoPetr Havlík (Pedro)'s profile photo
true true ...
Add a comment...

Petr Havlík (Pedro)

Shared publicly  - 
When there is no screen, improvise :-) Funny times at #MeasureCamp
Add a comment...

Petr Havlík (Pedro)

Shared publicly  - 
Naslouchejte historii s  #googletagmanager  :-)
 ·  Translate
The History Listener tag

Oh, oh, I found this one this morning. If someone missed +Lukas Bergstrom's comment on +Claudia Kosny's post below, here's the quick'n'dirty.

There's a new listener which listens for history state changes. For example, browser Back and Forward buttons, calls to the window.history API etc. 

A simple use case for history state operations is if you have a one-page site, and you want to avoid unwanted behavior with browser Back and Forward. With a pushState() call, for example, you can "create" a static URL for the current state, even if such a URL doesn't actually exist.

With the History Listener, you can handle these changes in the history state, since they automagically create a new entry into the data layer, which you can then dissect and use as you wish. 

URL fragments
If you have a page with a lot of anchor links, for example, you can now track them with the history listener. If your History Listener is firing appropriately, as soon as someone clicks an anchor link, you'll see gtm.historyChange in your data layer, with gtm.newUrlFragment populated by the fragment (i.e. text after the #) of the link.

If you navigate to and from a URL anchor, you'll also see gtm.oldUrlFragment populated with the previous anchor.

Single Page Navigation
OK, let's say you have a single page on your site, where AJAX calls or similar create dynamic content.

With history.pushState(), you can set it up so that clicking an internal navigation link adds a browser history entry like, even though /thispage/ doesn't even exist. The point is that /thispage/ refers to the current state of your dynamic content.

Then, when someone navigates to Google, for example, and clicks the back button, you browser will try to fetch /thispage/ from your browser history. Now this will probably trigger a 404, but the trick is that it ALSO creates a popState() call, which creates another gtm.historyChange event! This event also has the gtm.newHistoryState object included, which you created in the first pushState().

To put it clearly:

1) You have a single-page site with dynamic content
2) You create a fabricated browser history entry to save current state
3) The visitor leaves your site and comes back via browser back button
4) You can use the History Listener to check if there was some state saved in (2)
5) You can provide the same state that was saved in (2)

I'll write a short tutorial about this as soon as I have a moment, but yet another exciting, if a bit more marginal, development in the GTM world :)

There are a bunch of images below to illustrate this new feature:
1) The History Listener tag
2) What gtm.historyChange looks like after jumping from anchor link to another (URL fragments)
3) What gtm.historyChange looks like after pushing a custom state into the browser history
4) What gtm.historyChange looks like after visitor returns to this custom browser history page via browser Back button
8 comments on original post
Add a comment...

Petr Havlík (Pedro)

commented on a video on YouTube.
Shared publicly  - 
what did you use to shoot this? DJI?

Petr Havlík (Pedro)

commented on a video on YouTube.
Shared publicly  - 
jaká je kvalita silnic? s ohledem na karbonové ráfky ... :)
 ·  Translate

Petr Havlík (Pedro)

commented on a video on YouTube.
Shared publicly  - 
guys, what cameras are you using for running? gopro? virb by garmin?

Petr Havlík (Pedro)

Shared publicly  - 
Merite uplne vsechno, ale nevite vubec nic :-)
Dnešní další natáčení na téma měření webů v roce 2014 s hostem Janem Tichým
 ·  Translate
View original post
Add a comment...
Merging GA data & "your" data

Would anybody be interested in a "live" demo of creating reports that combine web analytics data with information you have available in internal systems (think CRM etc.)? Examples:

- Calculating net profit and real ROI
- Conversion rates of product / categories
- Recency-Frequency Matrix

No DWH specialist needed, just a bit of SQL beauty and Excel (PowerPivot) magic.
Leho Kraav's profile photoPetr Havlík (Pedro)'s profile photoKeels's profile photo
This is now on the website, many thanks Keely 
Add a comment...

Petr Havlík (Pedro)

commented on a post on Blogger.
Shared publicly  - 
Is including Company names OK with TOS - PII ?
Acquisition. What percent of my traffic comes from industries I target. Telecom; Hi-tech/software companies .edu's. Percentage increase or decrease in traffic from industries I'm not targeting; Traffic volume and frequency from organizations our sales team targets offline. Behavior ...
Add a comment...
Any tips on places to stay in London? Anybody travelling from Prague as well?
Tim Stierman's profile photoPeter O'Neill's profile photoPetr Havlík (Pedro)'s profile photo
James, thanks so much for your answer -- there is a bunch of us coming from Czech Republic and we got place via AirBNB... See you at MeasureCamp!
Add a comment...
... dare to be different! :-)
Prague - Data - Triathlon
Bragging rights
Finished TOP10 AG at Nautica New York City tri in 2010. Best day of my life.
  • University of Economics, Prague
  • Masaryk's Grammar School, Pribor
Basic Information
UX, Web Analytics, Data Science, Growth Hacking
  • Optimics
    Analyst, 2012 - present
    Consultant, 2009 - 2011
Map of the places this user has livedMap of the places this user has livedMap of the places this user has lived
Nový Jičín - Southampton