Pendo Setup

Overview

Pendo is a product analytics and in-app guidance platform designed for B2B SaaS applications. Unlike traditional web analytics, Pendo combines product usage data, user feedback, and in-app messaging to help product teams understand user behavior, drive feature adoption, and improve the user experience. Pendo's unique strength lies in its ability to track product usage at both the individual user level and across accounts (companies), making it ideal for B2B applications with multi-user accounts.

Key Capabilities

Product Analytics:

• Feature usage tracking and adoption metrics
• User journey mapping and funnel analysis
• Cohort-based retention analysis
• Account-level aggregation for B2B insights
• Automatic event capture for clicks, page views, and form submissions

In-App Guidance:

• Targeted guides and tooltips for user onboarding
• Feature announcements and product updates
• Multi-step walkthroughs for complex workflows
• NPS surveys and user feedback collection
• Resource center with self-service content

Visual Design Studio:

• No-code feature tagging (point-and-click to define features)
• Visual guide builder for creating in-app messages
• A/B testing for guides and messaging
• Segment targeting based on user/account attributes

Account-Based Analytics:

• Track usage at individual and account level simultaneously
• Understand which companies are using which features
• Identify expansion opportunities and at-risk accounts
• Executive dashboards for product-led growth metrics

When to Use Pendo

Ideal For:

• B2B SaaS applications with multi-user accounts
• Product teams driving feature adoption and engagement
• Customer success teams monitoring product usage
• Onboarding and user education initiatives
• Product-led growth strategies
• Understanding usage patterns across enterprise customers

Not Ideal For:

• B2C consumer applications (designed for B2B)
• Anonymous user tracking (requires user identification)
• Applications requiring minimal JavaScript overhead
• Simple marketing websites with low interaction

Implementation Phases

Phase 1: Discovery & Access

Account Setup and Configuration

1. Create Pendo Account: Sign up at pendo.io and complete onboarding
2. Obtain API Key: Retrieve your subscription's API key from Pendo settings
3. Define Visitor and Account Models: Plan your visitor (user) and account (company) data structures
4. Determine Installation Method: Choose between JavaScript snippet, npm package, or framework-specific integration

Visitor and Account Data Planning

Visitor Data (Individual Users):

// Plan which user properties to track
visitor: {
  id: 'user-123',              // Required: Unique user identifier
  email: 'user@example.com',   // Recommended: For targeting and search
  full_name: 'Jane Smith',     // Optional: Display name
  role: 'admin',               // Optional: User role/permissions
  department: 'Engineering',   // Optional: Business unit
  createdAt: '2024-01-15'     // Optional: Signup date
}

Account Data (Companies/Organizations):

// Plan which account properties to track
account: {
  id: 'company-456',           // Required: Unique account identifier
  name: 'Acme Corp',           // Recommended: Company name
  plan: 'enterprise',          // Optional: Subscription tier
  mrr: 5000,                   // Optional: Monthly recurring revenue
  industry: 'Technology',      // Optional: Industry classification
  size: 500                    // Optional: Employee count
}

Data Strategy Decisions:

• Which user properties are essential for segmentation?
• Which account properties help identify expansion opportunities?
• How will you handle free trial vs. paid users?
• What metadata helps with feature adoption analysis?
• Privacy considerations: what PII can be sent to Pendo?

Feature Tagging Strategy

Decide between code-based and visual tagging:

Environment Setup

Determine environment strategy:

• Separate Subscriptions: Dev, staging, production (cleaner separation, more cost)
• Single Subscription with Filtering: Use visitor/account properties to distinguish environments (simpler, potential data mixing)
• Production Only: Only track in production (common for B2B SaaS)

Phase 2: Instrumentation Build

Agent Installation

Install Pendo agent using your chosen method:

JavaScript Snippet (Recommended for most applications):

<script>
(function(apiKey){
  (function(p,e,n,d,o){var v,w,x,y,z;o=p[d]=p[d]||{};
  o._q=o._q||[];v=['initialize','identify','updateOptions','pageLoad','track'];
  for(w=0,x=v.length;w<x;++w)(function(m){o[m]=o[m]||function(){
  o._q[m===v[0]?'unshift':'push']([m].concat([].slice.call(arguments,0)));
  };})(v[w]);y=e.createElement(n);y.async=!0;
  y.src='https://cdn.pendo.io/agent/static/'+apiKey+'/pendo.js';
  z=e.getElementsByTagName(n)[0];z.parentNode.insertBefore(y,z);
  })(window,document,'script','pendo');
})('YOUR-API-KEY-HERE');
</script>

NPM Package (For modern JavaScript applications):

npm install @pendo/agent

import * as pendo from '@pendo/agent';

pendo.initialize({
  apiKey: 'YOUR-API-KEY-HERE',
  visitor: {
    id: currentUser.id,
    email: currentUser.email
  },
  account: {
    id: currentUser.accountId,
    name: currentUser.accountName
  }
});

Initialization Implementation

Initialize Pendo after user authentication:

// Wait until you have user and account data
function initializePendo(user, account) {
  pendo.initialize({
    visitor: {
      id: user.id,
      email: user.email,
      full_name: user.fullName,
      role: user.role,
      createdAt: user.signupDate
    },
    account: {
      id: account.id,
      name: account.name,
      plan: account.subscriptionPlan,
      mrr: account.monthlyRevenue,
      employees: account.employeeCount
    }
  });
}

// Call after login or on page load for authenticated users
if (isAuthenticated) {
  const user = getCurrentUser();
  const account = getUserAccount();
  initializePendo(user, account);
}

SPA Integration

For single-page applications, call pageLoad() on route changes:

// React Router example
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();

  useEffect(() => {
    if (window.pendo) {
      window.pendo.pageLoad();
    }
  }, [location.pathname]);

  return <Routes>{/* ... */}</Routes>;
}

Custom Event Tracking

Track important business events:

// Track custom events
pendo.track('FeatureUsed', {
  featureName: 'Export Data',
  exportFormat: 'CSV',
  recordCount: 1000
});

pendo.track('PurchaseCompleted', {
  planType: 'Enterprise',
  billingCycle: 'Annual',
  amount: 12000
});

Updating Visitor/Account Data

Update data as user/account attributes change:

// Update visitor data (e.g., role change)
pendo.updateOptions({
  visitor: {
    role: 'admin' // Updated role
  }
});

// Update account data (e.g., plan upgrade)
pendo.updateOptions({
  account: {
    plan: 'enterprise',
    mrr: 10000
  }
});

Phase 3: QA & Launch

Agent Loading Verification

Confirm Pendo agent loads successfully:

// Check in browser console
console.log(window.pendo); // Should show pendo object
console.log(pendo.VERSION); // Shows agent version

Visitor/Account Identification Validation

Verify visitor and account data:

// In browser console
pendo.getVisitorId(); // Should return your visitor ID
pendo.getAccountId(); // Should return your account ID

// Check full visitor/account data
console.log(pendo.getVisitor());
console.log(pendo.getAccount());

Page Load Tracking

Verify page views are captured:

1. Navigate through your application
2. Open Pendo dashboard → Analytics → Pages
3. Confirm pages appear with accurate visit counts

Feature Tagging (If using visual tagging)

1. Open Pendo Designer (browser extension)
2. Tag features by clicking on UI elements
3. Name features descriptively (e.g., "Export Button", "Settings Modal")
4. Verify tags appear in Pendo dashboard

Custom Event Testing

Trigger custom events and verify in dashboard:

1. Execute actions that fire pendo.track() calls
2. Open Pendo dashboard → Analytics → Track Events
3. Confirm events appear with correct metadata

In-App Guide Testing

Create and test a simple guide:

1. Build a guide in Pendo dashboard
2. Target it to your test user/account
3. Navigate to the page where guide should appear
4. Verify guide displays correctly
5. Test guide interactions and completion

Cross-Browser Validation

Test Pendo across browsers and devices:

• Chrome, Firefox, Safari, Edge
• Mobile browsers (iOS Safari, Android Chrome)
• Check for console errors
• Verify guides render correctly

Configuration Reference

Initialization Options

pendo.initialize({
  // Required
  apiKey: 'YOUR-API-KEY',

  // Required visitor data
  visitor: {
    id: 'user-123',              // Required: unique user ID
    email: 'user@example.com',   // Recommended
    // ... additional visitor properties
  },

  // Required account data (for B2B)
  account: {
    id: 'account-456',           // Required: unique account ID
    name: 'Acme Corp',           // Recommended
    // ... additional account properties
  },

  // Optional configuration
  disableGuideCenterContentSearch: false,
  excludeAllText: false,
  excludeTitle: false,
  htmlAttributes: true,
  preventCodeInjection: false
});

Key Properties

Deployment Artifacts

Required Documentation

Implementation Guide

• API key for each environment
• Visitor data model with all tracked properties
• Account data model with all tracked properties
• Initialization timing and location in code
• SPA integration strategy (if applicable)
• Custom event catalog with naming conventions

Feature Tagging Documentation

• List of all tagged features
• Feature naming conventions
• Visual tagging vs. code-based tracking strategy
• Feature hierarchies and groupings

Guide and Messaging Strategy

• Guide use cases and target audiences
• Segment definitions for targeting
• Guide approval and testing process
• Content governance and ownership

Linked Runbooks

• Install or Embed the Tag or SDK - Installation methods and code examples
• Event Tracking - Custom event tracking and feature tagging
• Data Layer Setup - Visitor and account data structure
• Cross-Domain Tracking - Multi-domain tracking configuration
• Server-Side vs Client-Side - Client vs. server-side considerations

Validation Checklist

Pre-Launch

• Pendo agent installed and loading
• API key configured correctly
• Visitor identification implemented
• Account identification implemented (for B2B)
• Visitor/account data includes required properties
• Page load tracking working (including SPA navigation)
• Custom events tracked for key actions
• Features tagged (visual or code-based)
• Test guide created and displaying correctly

Post-Launch

• Visitor and account data appearing in Pendo dashboard
• Page views captured accurately
• Feature usage data populating
• Custom events recording
• Guides displaying to targeted users
• No JavaScript console errors
• Performance acceptable (no significant page load delay)
• Cross-browser compatibility verified

Troubleshooting Common Issues

Best Practices

1. Initialize After Authentication: Only initialize Pendo once you have user and account data
2. Use Meaningful IDs: Use stable, unique IDs for visitors and accounts (not session IDs)
3. Enrich Metadata: Include relevant visitor/account properties for better segmentation
4. Track SPAs Properly: Call pageLoad() on every route change in single-page apps
5. Name Features Consistently: Use clear, descriptive names for tagged features
6. Test Guides Thoroughly: Always test guides in staging before publishing to production
7. Monitor Performance: Track impact of Pendo agent on page load times
8. Update Data Dynamically: Use updateOptions() when user/account attributes change
9. Segment Thoughtfully: Create segments based on behavior, not just demographics
10. Privacy First: Only send necessary data; avoid sending sensitive PII

Success Metrics

Validate Implementation Success

Data Quality:

• 95%+ of authenticated sessions have visitor identification
• Account data populated for all B2B users
• Page views match expected traffic patterns
• Custom events fire consistently

Feature Adoption:

• Baseline feature usage established
• Key features tagged and tracked
• Usage trends visible in dashboards

Guide Performance:

• Guides display to targeted users
• Completion rates meet expectations
• User feedback (polls/NPS) captured

Change Log & Owners

Ownership Model

Product Team

• Responsibilities: Feature tagging, guide creation, analytics review
• Review Cadence: Weekly feature adoption reviews
• Contacts: Product manager, product ops

Engineering Team

• Responsibilities: Agent installation, code-based tracking, troubleshooting
• Review Cadence: With each deployment
• Contacts: Engineering lead, frontend team

Customer Success Team

• Responsibilities: Account health monitoring, usage analysis
• Training: Dashboard navigation, segment building
• Contacts: CS ops lead

Outstanding Tasks & Questions

• Finalize list of visitor properties to track
• Define account health scoring methodology
• Create standard segments for common analyses
• Build executive dashboards for product-led growth metrics
• Establish guide testing and approval process
• Document feature tagging conventions
• Plan quarterly data quality audits