Installing Pendo on TypeScript Apps

A customer was recently running into compilation errors when installing Pendo on an application built with typescript (Next.js). The recommendation below was provided and resolved the error they were seeing!

Error message: "Type error: Element implicitly has an 'any' type because index expression is not of type 'number'."

Recommendation: Use Next's Script component which is built for adding custom scripts in Next. There's some deeper docs on that here. The script contents is just a string, so there shouldn't be any TypeScript errors. They can paste the normal Pendo snippet there and inline reference variables for any value setting e.g. id: ${someVariable} Next.js have an example in their GitHub for how best to add Google Analytics' script, Pendo is essentially the same.
https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_app.js

Pendo Code Example:

<Script
            strategy="afterInteractive"
            dangerouslySetInnerHTML={{
            __html: `
              (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');

                      // Call this whenever information about your visitors becomes available
                      // Please use Strings, Numbers, or Bools for value types.
                      pendo.initialize({
                          visitor: {
                              id:              'VISITOR-UNIQUE-ID'   // Required if user is logged in
                              // email:        // Recommended if using Pendo Feedback, or NPS Email
                              // full_name:    // Recommended if using Pendo Feedback
                              // role:         // Optional

                              // You can add any additional visitor level key-values here,
                              // as long as it's not one of the above reserved names.
                          },

                          account: {
                              id:           'ACCOUNT-UNIQUE-ID' // Required if using Pendo Feedback
                              // name:         // Optional
                              // is_paying:    // Recommended if using Pendo Feedback
                              // monthly_value:// Recommended if using Pendo Feedback
                              // planLevel:    // Optional
                              // planPrice:    // Optional
                              // creationDate: // Optional

                              // You can add any additional account level key-values here,
                              // as long as it's not one of the above reserved names.
                          }
                      });
              })('YOUR-API-KEY-HERE');
            `,
            }}
          />

 

1

Comments

0 comments

Please sign in to leave a comment.

Didn't find what you were looking for?

New post