How to Implement Pendo in Angular 8+

Question

I am attempting to set up Pendo in my Angular 8 application. However, their documentation seems to be off. The example scripts don't match the actual scripts that are given to me in my control panel for Pendo. Also, their YouTube walk-throughs are 4 years old and look like they were written for Angular JS.

I followed the documentation located at https://support.pendo.io/hc/en-us/articles/360031862272-Installation-for-Single-Page-Frameworks

I placed the first part of my script on the index.html page just before the closing <body> tag.

I then placed the pendo.initialize in my authorization component.

However, that did not work. I get ERROR TypeError: "pendo.initialize(...) is not a function" in my browser console.

So I contacted support and they suggested that I run the pendo.initialize outside of Angular using an ngZone.

Does anyone have any idea what needs to be modified to initialize pendo without an undefined error?

So this is where I've ended up.

index.html

...
    <script>
        (function (apiKey) {
            (function (p, e, n, d, o) {
                var v, w, x, y, z; o = p[d] = p[d] || {}; o._q = [];
                v = ['initialize', 'identify', 'updateOptions', 'pageLoad']; 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');
        })('xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');
    </script>

</body>

In my login component

declare let pendo: any;
...
constructor(        
        private ngZone: NgZone
    ) {
...
}
...
private onAuthorizationResultComplete(authorizationResult: AuthorizationResult) {

        if (authorizationResult.authorizationState === AuthorizationState.unauthorized) {
            ...
        } else {
            this.httpClient.post(this.apiUrl, {}).subscribe(r => {
                this.ngZone.runOutsideAngular(function () {
                    pendo.initialize({
                        visitor: {
                            id: 'VISITOR-UNIQUE-ID-test'
                        },
                        account: {
                            id: 'ACCOUNT-UNIQUE-ID-test'
                        }
                    })('xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');
                });

                this.router.navigate(['/dashboard']);
            });

        }
    }
    ```

How did you work around the issue with IE not being able to run the Arrow function? If you launch this in IE, it will just error. Im curious if you have tested this — Judy007, Apr 13 '21 at 16:43

score 6 · Accepted Answer · answered May 07 '20 at 12:38

Here is a working version of all that it required for installing Pendo via the Index.html page, and then initializing the pendo object in the component that verifies a user is signed.

The key here is to not include the key with the pendo.initialize method.

Index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>AngularPendo</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <script>
        (function(apiKey) {
            (function(p, e, n, d, o) {
                var v, w, x, y, z;
                o = p[d] = p[d] || {};
                o._q = [];
                v = ['initialize', 'identify', 'updateOptions', 'pageLoad'];
                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');
        })('xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'); // The Pendo API must stay here with the rest of the Pendo snippet
    </script>
</head>

<body>
    <app-root></app-root>
</body>

</html>

Authorization component

import { Component, OnInit, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';

declare let pendo: any;

@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.scss']
})
export class SigninComponent implements OnInit {

  isAuthorized = true;
  // just need any API URL so we can get a response...doesn't need to be anything specific
  private apiUrl = 'https://api.github.com/users/godfathr';

  constructor(private router: Router, private ngZone: NgZone, private httpClient: HttpClient) { }

  ngOnInit() {
    this.onAuthorizationResultComplete(this.isAuthorized);
  }

  private onAuthorizationResultComplete(authorizationResult: boolean) {

    if (!authorizationResult) {
        console.log('I am not authorized');
    } else {
      console.log('I am authorized');
      // After verifying that a user is authorized, we put the pendo.initialize inside whatever
      // method we need for our app. In this case, it's a redirect to a landing page.
      // They important thing here is to remember not to include the API key with the initialize method.
      this.httpClient.get(this.apiUrl, {}).subscribe(r => {
            pendo.initialize({
                visitor: {
                    id: 'VISITOR-UNIQUE-ID-test'
                },
                account: {
                    id: 'ACCOUNT-UNIQUE-ID-test'
                }
            });

            this.router.navigate(['/authorized']);
        });
    }
  }
}

How did you work around the issue with IE not being able to run the Arrow function? — Judy007, Apr 13 '21 at 16:44
I'm not positive what you are referring to in particular. If you are referring to IE 11, we stopped supporting IE. In the browser settings, IE 9-11 is disabled. You can see it here: https://github.com/godfathr/angularPendo/blob/master/angular-pendo/browserslist The arrow function in the Typescript gets compiled. If you need to support IE11, remove "not" from the browser list for IE9-11 and then when you build your Angular project, the output should work in IE 11. — godfathr, Apr 14 '21 at 17:17

How to Implement Pendo in Angular 8+

1 Answers1