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.
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
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.
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.
After querying this data from the DOM it can be easily reported to Dynatrace using
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.
Step #4: Analyzing and Presenting Client Side Measures
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.
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:
- Inject UEM
- Find information you want to report and query it by a technology of your choice (like jQuery)
- Send the information to Dynatrace
- 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!