I was recently asked to provide some analytics metrics around popular blog posts and popular authors. If you are a WordPress admin you might have been asked similar questions. As we use Dynatrace UEM (User Experience Management) for analytics and performance monitoring of our WordPress instance anyway I just went forward using it. What follows in this blog is a step-by-step tutorial in case you want to do the same on your WordPress powered blog, and the approach itself is of course also applicable for any other web application.

If you want to test this on your own and do not yet have Dynatrace, there is free trial available for any wishing to try it out.

Dynatrace Web Dashboard
Figure 1: Installing Dynatrace on WordPress gives you all the common web analytics insights including any custom captured business context data

Challenge: Capture Business Context Metrics on a performance optimized Web application

We always try to follow common WPO (Web Performance Optimization) best practices on our blog and therefore I configured client side caching wherever possible to improve performance for revisiting users. This is important because not every request actually reaches the PHP Engine, and thus most business questions cannot be answered by looking at requests that end up on the web server. Analyzing web or app server log files wouldn’t help either – even if you have the very fanciest log analytics solution. That’s why we need to capture data in the browser, for every user, regardless whether they get the content from local cache, CDN or our server.

Solution: Capture Context Data with Dynatrace UEM

Dynatrace captures so called “User Action PurePaths” out-of-the-box once you have Dynatrace UEM installed and enabled for your web server. These User Action PurePaths get captured in the browser through an automatically injected JavaScript Agent and therefore work on cached and non-cached content, for every user that reads our blog posts.

There are many out-of-the-box metrics for your most common web analytics use cases (Response Time, Browser Type, Referrer, Geo Location, # of DOM Elements, Rendering Time …). For WordPress specific context data – such as the author of a blog post – we can leverage the UEM JavaScript ADK. This extension allows us to capture additional context information such as the authors name from the web site loaded into the end users browser – whether retrieved from our web server or from a cache, and correlating it with all the other data that gets automatically captured.

Step #1: Enable UEM and Inject JavaScript ADK

Once you have enabled UEM for your web site Dynatrace automatically loads the core JavaScript agent on your page to capture the basic metrics. The JavaScript ADK (Agent Development Kit) extends the core JavaScript agent with an API to push custom events and metrics into Dynatrace. After including the ADK on our web site, this API is available through a global dynaTrace Object.

Step #2: Fetching and Reporting Data from DOM

So when a user opens a post we want to capture the authors name for our analytics. Obviously this information is contained on every post view.

Figure 2: Author of current post can be found on every blog page. This is the data we want to capture.

We will use jQuery to select this data. Most WordPress themes rely on jQuery and there should be no need to install or include it separately.
Looking at the HTML code of the authors name we see that it is wrapped by an href tag with the attribution rel='author' on it and that every blog post has a class single-post applied to the body tag. So using the jQuery selector .single-post a[rel="author"].text() will pick the authors name from the DOM. Please note that this is WordPress-theme specific – your mileage may vary.

Figure 2: Author of current post can be found on every blog page. This is the data we want to capture.

We will use jQuery to select this data. Most WordPress themes rely on it and there should be no need to install or include it separately.
Looking at the HTML code of the authors name we see that it is wrapped by an href tag with the attribute rel='author' on it and that every blog post has a class single-post applied to the body tag. So using the jQuery selector ‘.single-post a[rel="author"].text()' will pick the authors name from the DOM. Please note that this is WordPress-theme specific – your mileage may vary.

Chrome developer tools source view
Figure 3: Chrome developer tools source view makes it easy to spot which DOM Elements to query

After querying this data from the DOM it can be easily reported to Dynatrace using dynaTrace.reportString(key, value).

Here’s the complete code:

Step #3: Let’s test it

After accessing a few blog posts the User Actions PurePaths in Dynatrace client should reveal the author as well as the current used WordPress version.

User Action PurePath with author and WordPress version
Figure 4: User Action PurePath with author and WordPress version

Step #4: Analyzing and Presenting Client Side Measures

Now that the groundwork has been laid, analyzing and presenting the collected data is easy. Just add a measure of type JavaScript ADK String Value that filters by author_post_pageview and create a Business Transaction (BT) from it.

Extract captured data by creating a JavaScript ADK Measure
Figure 5: Extract captured data by creating a JavaScript ADK Measure

The created BT can now be used to create charts of all kinds within Dynatrace Client and our new Web UI. I chose a pie chart as it is a good way to represent discrete data.

Blog Post Views by Author Dashboard
Figure 6: Blog Post Views by Author Dashboard

We see clearly that my peer Andi Grabner rules it all – I really need to catch up 🙂

Conclusion: Follow these simple steps

This was only one example of collecting data from the client (=browser). Basically every piece of information available in browsers can be reported to Dynatrace and later be used for analytics or diagnostics. This adds a completely new dimension to your monitoring and is especially useful for reporting business relevant data.

Let me reiterate the steps to capture and analyze data captured in your browser:

  1. Inject UEM
  2. Include our JavaScript ADK
  3. Find information you want to report and query it by a technology of your choice (like jQuery)
  4. Send the information to Dynatrace
  5. Create a Business Transaction with a measure of type JavaScript ADK String value
  6. Use the BT to create charts and dashboards as needed

Your Next steps

  • Visit our dedicated webpage about WordPress monitoring to learn more about how Dynatrace supports WordPress.
  • Dynatrace 6.2 is out with a whole set of new features like a completely new Web Ui. Here’s a blog post on that.
  • If you haven’t tried Dynatrace yet there is a Free Trial available!