Every visit to a page on opentelemetryinpractice.net now generates OpenTelemetry traces! I can count pageloads, see which resources took the longest to fetch, and see how long WordPress takes to return data about each post.
Here’s what I did:
1. Installed a Headers & Footers plugin to this WordPress site. (We use the $25/month plan on WordPress.com, so this was easy.)
2. In the settings for that plugin, pasted these lines into the header section:
<script src="https://unpkg.com/@jessitronica/hny-otel-web@0.6.0/dist/hny.js"></script>
<script>window.Hny.initializeTracing({debug: false, apiKey: "your-honeycomb-ingest-api-key", serviceName: "otelinpractice"})</script>The first line brings in a wrapped version of the OpenTelemetry Web SDK. The hny.js file is one I created (GitHub, npm); it adds a property to the window object.
The second line uses that property to initialize tracing, giving it authorization data and a name for this site.
3. Got a Honeycomb ingest key. I made a new ingest key in a new environment in a free team. (Get yours here.)
A free Honeycomb team is the easiest way I’ve seen to receive OpenTelemetry data. It’ll be a joyous day if this site gets so popular we get exceed the free limit of 20 million events in a month.
4. Pasted that ingest key in for the apiKey field. Also, change the serviceName field.
That was it. I hit save, then visited the site (and did View Source to check that the script tags were added). Data showed up in Honeycomb.
How well does this work?
I’m not sure I see all page views — maybe when people navigate away from a page too quickly, the OpenTelemetry SDK doesn’t have time to send the data. I also don’t know whether it’ll work in all browsers; I didn’t add any polyfills.
But it’s better than nothing! It’s free, and it doesn’t do the third-party-cookie stuff that Google Analytics does.
Here’s a graph of documentLoad spans by url.path:
and if I click on the graph, I can see in the trace which page resource takes a while to load:
