Analyze Client-Side Events in New Relic Insights with Browser Instrumentation

[this article was written by ankush rustagi]

on march 25th, the new relic insights team enabled a powerful new feature: browser instrumentation. this feature is designed to allow you to instrument and analyze more detailed data originating from your end users, and tag any event in your frontend code with javascript to send that event information into new relic insights via our js api. the api is designed so that new relic browser users can capture and analyze events, actions, route changes, or basically anything users might do on your site or application. with just a couple lines of code you can instrument your javascript application to send custom events—called pageactions—to insights.

what is browser instrumentation and why is it useful?

we added this capability to new relic insights to expand the kind of data you can analyze from new relic browser. to use this new feature set, you need to have an insights pro account, whether on a trial basis or as a paid user. you will also need to have a website or app with new relic browser installed. you can install the browser agent via a new relic apm agent , or by copying and pasting a code snippet into your html .

why this feature may matter to you:

• you can’t install the apm agent on your servers due to cdns, virtualization, etc., but you want to have visibility into user engagement and add custom business information via custom attributes.
• you want visibility into engagement with features that load data asynchronously or features that don’t cause a page load or server side transaction (video plays and pauses, clicks that open a modal, hover states, etc.).
• you can’t measure engagement effectively in your single page app (angularjs, ember.js, etc.).
• you want to see the frontend click-level engagement and server-side transactions in a single view.

the release of browser instrumentation includes:

• a new javascript snippet that sends data to our js api based on events you tag in your code with one to two lines of javascript. ( note: if you are injecting the browser js snippet via your apm agent, you will automatically be using the new js api, so you just need to tag events in your code. if you applied the snippet stand-alone, you will need to update to the latest version.)
• a new pageaction event in new relic insights for any of your instrumented events, which also has new default attributes, such as referrer url, current url, browser width and height, and time since page load.
• the ability to add custom attributes and events into new relic insights via the javascript snippet from new relic browser.
• for more detailed information, check out our documentation .

click to enlarge

some interesting use cases from our beta testers

as we have spoken with our customers throughout the beta testing period, we have seen a variety of different use cases as they played around with the new feature. below are a few sample use cases to understand the various ways in which this feature has expanded analysis capabilities within new relic insights.

e-commerce checkout flows

analyzing steps throughout the checkout process is a common practice for e-commerce companies. but one e-commerce company wants to know how long it takes for its users to complete each specific step, which gets complicated when there are multiple actions that occur on the same page as each user goes through the process. some questions the team has include:

• how long is each individual step for the user?
• how long does it take between landing on a page to filling out the first step?
• how long until the user clicks “next”?
• what does the funnel look like from checkout through each individual step, not just each page in the flow?

the company has found the answers to these questions by instrumenting several pageactions on its website to assess checkouts. now that it can see how long users take to check out, the company has a better understanding of what constitutes a successful conversion, which has allowed it to improve and increase conversion events on the site.

video engagement at media companies

a digital media company embeds videos on its website, to which it drives user traffic. the company knows that engaged users typically watch at least 50% of a video. via new relic insights pageviews, it can see that users are viewing the videos, but without being able to instrument the embedded video player, it cannot see when the users click pause or when they watch 50% of a video.

by instrumenting those events using the insights javascript api, the company is now better able to measure when users are engaged as well as which videos have the most engagement. by establishing and finding patterns in user engagement, it is easier for the company to identify which types of videos it should focus on driving its users to.

optimizing “learnboarding” at a saas company

an saas company has an onboarding process (which we call “ learnboarding ” internally) that all engaged users must complete in order to truly adopt the platform. it can see when users are accessing the learnboarding page on the site, but unfortunately the specific steps within the learnboarding process occur solely in the javascript and therefore cannot be identified via server-side instrumentation.

now the company instruments the learnboarding steps via the insights js api, which has allowed it to see which users have successfully completed the process and which haven’t. this has enabled the company to reach out to those users who didn’t finish and proactively ensure that they’ve received the onboarding and training they need to be successful in adopting the saas product.

how to get started

as demonstrated in the examples above, browser instrumentation can give you a powerful, new way to instrument and collect your data in new relic insights. it fills an important and meaningful need of our end users to get more detailed metrics from the client side of their applications.

you will need new relic browser installed on an app (even as a browser lite user) and new relic insights pro (either trial or paid) to access this feature set. if you are an existing lite or paid customer without access to insights pro, please contact a sales rep so they can provision you a pro trial. for new users, you can initiate an apm pro trial and get an insights pro trial as well.

to get started, read through our documentation and follow the instructions for updating your javascript snippet and tagging various events in your code.

happy querying!