Tracking fonts used on a website

[jalalk73666513]

Hi,

is there any way I can track page views based on fonts used on my website? It is possible to find out about used fonts by using the browser inspector. But is Analytics able to tell me how many page views on my site were for pages containing a specific font? Background: we use licensed fonts and need to be able to report on this metric for invoicing purposes.

Thx Jalal

[Eric_Vidana · Accepted solution]

Can you speak a bit more about how you are loading the custom fonts? Are you hosting the fonts, or are they hosted elsewhere? I am going to assume you are hosing since the font company is asking you to keep up with the downloads. 

Also, how comfortable are you with context data/processing rules and events/props? 

My initial thought is to check window.performance for a particular file to have been downloaded:

window.performance.getEntriesByName('https://www.example.com/fonts..woff2')

If you are loading through a script tag, then there are some other js things you can do. Anyhow, I would take that true/false marker of the file being called/loaded and pass into s.contextData.fontLoaded = true/false, and then use processing rules to either set an event or pass into a prop so that it comes along with the initial page load.

Haven't done it before ... but seems like it could work and I am sure there are some other ideas as well.

[jalalk73666513]

@Eric_Vidana Thanks for getting back to me so quickly! The websites are largely hosted by us, that's right. Some microsites are hosted elsewhere, though. In any case, we need to be able to report on page views of pages containing particular fonts. This is the basis for invoicing, like stated. Looks like there is no out of the box way of achieving it, but I'll definitely run your suggestion by our technical staff. Thanks again!