The Agent

Since I started working at Pendo, people often ask, “What is Pendo?” From an engineering perspective, if Pendo is one thing it would be what we call “The Agent.” The agent is a bundled set of JavaScript code that makes use of almost every capability inside of a web browser. When our customers want to take advantage of everything Pendo does (web analytics, page interaction recordings, guide delivery, and so much more), all they need to do to get started is add a script tag that downloads the agent on their page, and the agent takes it from there. It’s a simple process for our customers, but there is a lot of work going on behind the scenes.

Of course, our customers don’t want us sending them some behemoth script every time a user goes to their site, so we take great care in keeping the delivery size small. It’s currently under 64kb! We don’t throw a giant framework into the agent. We write everything in Vanilla JavaScript (learn more about Vanilla JS here) with the exception of a few small libraries for JavaScript utility methods and simplified DOM selection.

Our team

What does that mean for hiring? When we interview front end candidates we stress the importance of having a solid technical foundation with the language itself and not simply familiarity with Angular or React…or Ember or Meteor or Aurelia or Vue or Knockout. Our web application uses Angular, though, so we do spend the majority of our time writing Angular code.

The Agent

When a company adds the agent to their site, it begins recording every user interaction. It tracks pageviews, mouse clicks, form submissions, and basically anything that helps tell the story of how your customers use your product. We don’t do sampling, we know who did what, not just what similar users tend to do on your site. Then we aggregate that data, and once you’ve taken insights from it, the agent will help guide your users by injecting guides right into your site. Want to explain how to use a new feature? Give us a selector and the agent will find that feature and display an easy-to-use guide.

There are two possible ways we could capture every event. We could naively walk the entire DOM tree and add event handlers for every element we care about, which would be expensive and add a bunch of weight to the page. A much better solution is to attach event handlers at the top of the document, utilizing the browser’s event propagation to feed the listener everything we care about.  Why attach a listener to an anchor tag when the click event gives you that element anyway? The agent attaches top level event handlers, and then sends the important parts of the event data captured to our database. This data is then aggregated with the billions of other events the agent records to produce insightful metrics about how users interact with a customer’s product.

What it does

The agent’s work is only half done now. When customers load the agent, it requests and displays specific guides built for specific segments of users.  If a page needs to display a guide, we send the browser a bundle of HTML, CSS, and JavaScript, which the agent uses to build a guide. The agent does a simple element look up and attaches the assembled guide element onto the page right alongside the relevant part of our customer’s application.

If this sounds like an oversimplification- it’s because it really is. There are all sorts of concerns that come from all the complexities of modern browsers. The agent needs to handle browser storage, cross-frame requests, different browser implementations for basically anything, different URL patterns, protection from XSS attacks, caching, and efficient content delivery. I mean, remember quirks mode?

Working with the agent can be really intimidating, but it’s also a cool and unique challenge.

If you know your JavaScript inside and out, and you want an interesting challenge, find where you fit on our engineering team.