Tracking your videos and ads with New Relic

From mobile devices and smart TVs to browser-based environments, New Relic provides agents and SDKs to analyze performance, detect anomalies, and track custom data to pinpoint issues. Because many of our customers are in the media and entertainment space, we listened to their feedback and found that there was a collective need to analyze the performance of their video players and ad placements in real-time. 

Traditional solutions in this space can be cumbersome and expensive, so we developed open-source trackers for most major video players and for Google publisher tags that work in combination with our existing browser and mobile agents. Using the Video agent for Video.js player quickstart, you can collect and calculate essential metrics such as: Player Load Time, Exits Before Video Start, Rebuffering Ratio, Bitrate, and more. 

Add the New Relic Video Tracking Solution

If your company delivers video content, adding a New Relic tracker is often just one additional line of code. At our Github page, you can find setup instructions for supported players such as HTML5, Video.js, AVPlayer, ExoPlayer, Roku, and more. We also provide dashboards for instant visibility and quick setup of alerts, and a Media Analytics UI for tracking all KPIs of your customer experience and media ingestion pipeline. Now we'll walk through an example of instrumenting a Video.js video player, so you can see how simple it is.

Pre-requisites

If you don't already have a New Relic account, you can sign up here to get your first 100GB of data free and unlimited basic users. You’ll also need Node.js and npm, and Git.

Add the tracker

Clone this repo on GitHub, which contains our Video.js video tracker and some sample JavaScript and HTML that you’ll use in this tutorial. If you’d like to follow along in your own environment, feel free to look through our supported players and platforms.

For this tutorial, we’ll use a guided installation via New Relic Instant Observability. This guided installation will automatically deploy dashboards and alerts into your account. To install, go to the Video agent for Video.js player quickstart, select Install quickstart and select an account to proceed.

Next, you’ll be prompted to install New Relic’s Browser Agent. Select See Installation Docs if you’d like to see the various ways to do that. 

For this example, we’ll just instrument via copy/pasting a JavaScript snippet. To do that, open one.newrelic.com and select the Add More Data button in the upper right. 

Then type browser into the search bar, select New Relic Browser, and choose the account where you want your data to reside. 

Next, select Copy/Paste JavaScript code. This example consists of just an HTML file, so we'll simply insert the script directly. Choose a name to use for your Browser application, such as Video Demo and then copy the resulting snippet. 

Now that you have that snippet on your clipboard, open up the Github repo we cloned earlier. 

From within the main directory, run npm install followed by npm run build in the command line to generate the tracker JavaScript. 

Within the project directory, navigate to the samples directory. Within it, create a new file named agent.js and paste the JavaScript snippet inside. You’ll also want to remove the <script> tags on the first and last lines of the file. (If you’ve lost your snippet, follow these instructions to get it back).

Note in the webm.html sample file, there are a few lines already included to instrument the video player: one <script> tag to include the agent JavaScript, and another line to wire up the tracker to the player.

Congratulations—you’ve instrumented the sample app with New Relic! Return to your I/O tab with the install progress and select Done for the Browser agent, and again for the Video.js tracker. 

The quickstart will now insert the alerts and dashboards into your account. If you closed the tab, you can access it from here. Just make sure to select the same account you put your Browser application into. Selecting See your data will take you to the dashboard, which for now will have no data. Let’s go generate some.

Generate data

In order for the New Relic Agent JavaScript to function correctly, we’ll need to start a simple local webserver and view the file that way. An easy way to do this is to use npm’s lightweight http-server. To run it, execute npx http-server from within the project directory and accept any install prompts if necessary. 

Next, from within the repo, run http-server and open up localhost:8080 in your browser (if you have something running on 8080, you can use -p when invoking http-server to choose another port). 

Navigate to the samples directory and select the webm.html to view the sample. Select the play button on the video player and let the video play for a minute or so. In your dashboard, you should now have data showing metrics from your user experience. (If no data appears, try following the troubleshooting steps for Browser and the Video.js tracker).

The quickstart has also put some alerts into your account (disabled by default). You can view the policy by navigating to your Alert Policy Page, if you’d like.

This tutorial walked through how the instrumentation process for Browser Monitoring and one of our video agents works. Now you have the tools to do this for your production application.