Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Conditionally check for PENDO_API_KEY before Pendo set up #11089

Merged
merged 1 commit into from
Oct 11, 2024
Merged

fix: Conditionally check for PENDO_API_KEY before Pendo set up #11089

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
190 changes: 96 additions & 94 deletions packages/manager/src/hooks/usePendo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,101 +42,103 @@ export const usePendo = () => {
const PENDO_URL = `https://cdn.pendo.io/agent/static/${PENDO_API_KEY}/pendo.js`;

React.useEffect(() => {
// Adapted Pendo install script for readability
// Refer to: https://support.pendo.io/hc/en-us/articles/21362607464987-Components-of-the-install-script#01H6S2EXET8C9FGSHP08XZAE4F

// Set up Pendo namespace and queue
const pendo = (window['pendo'] = window['pendo'] || {});
pendo._q = pendo._q || [];

// Define the methods Pendo uses in a queue
const methodNames = [
'initialize',
'identify',
'updateOptions',
'pageLoad',
'track',
];

// Enqueue methods and their arguments on the Pendo object
methodNames.forEach((_, index) => {
(function (method) {
pendo[method] =
pendo[method] ||
function () {
pendo._q[method === methodNames[0] ? 'unshift' : 'push'](
// eslint-disable-next-line prefer-rest-params
[method].concat([].slice.call(arguments, 0))
);
};
})(methodNames[index]);
});

// Load Pendo script into the head HTML tag, then initialize Pendo with metadata
loadScript(PENDO_URL, {
location: 'head',
}).then(() => {
window.pendo.initialize({
account: {
id: accountId, // Highly recommended, 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.
},
// Controls what URLs we send to Pendo. Refer to: https://agent.pendo.io/advanced/location/.
location: {
transforms: [
{
action: 'Clear',
attr: 'hash',
},
{
action: 'Clear',
attr: 'search',
},
{
action: 'Replace',
attr: 'pathname',
data(url: string) {
const idMatchingRegex = /(\/\d+)/;
const bucketPathMatchingRegex = /(buckets\/[^\/]+\/[^\/]+)/;
const userPathMatchingRegex = /(users\/).*/;
const oauthPathMatchingRegex = /(#access_token).*/;

if (idMatchingRegex.test(url)) {
// Replace any ids with XXXX and keep the rest of the URL intact
return url.replace(idMatchingRegex, '/XXXX');
} else if (bucketPathMatchingRegex.test(url)) {
// Replace the region and bucket names with XXXX and keep the rest of the URL intact
return url.replace(bucketPathMatchingRegex, 'XXXX/XXXX');
} else if (oauthPathMatchingRegex.test(url)) {
// Remove everything after access_token/
url.replace(oauthPathMatchingRegex, '$1');
} else if (userPathMatchingRegex.test(url)) {
// Remove everything after /users
return url.replace(userPathMatchingRegex, '$1');
}
return url;
if (PENDO_API_KEY) {
// Adapted Pendo install script for readability
// Refer to: https://support.pendo.io/hc/en-us/articles/21362607464987-Components-of-the-install-script#01H6S2EXET8C9FGSHP08XZAE4F

// Set up Pendo namespace and queue
const pendo = (window['pendo'] = window['pendo'] || {});
pendo._q = pendo._q || [];

// Define the methods Pendo uses in a queue
const methodNames = [
'initialize',
'identify',
'updateOptions',
'pageLoad',
'track',
];

// Enqueue methods and their arguments on the Pendo object
methodNames.forEach((_, index) => {
(function (method) {
pendo[method] =
pendo[method] ||
function () {
pendo._q[method === methodNames[0] ? 'unshift' : 'push'](
// eslint-disable-next-line prefer-rest-params
[method].concat([].slice.call(arguments, 0))
);
};
})(methodNames[index]);
});

// Load Pendo script into the head HTML tag, then initialize Pendo with metadata
loadScript(PENDO_URL, {
location: 'head',
}).then(() => {
window.pendo.initialize({
account: {
id: accountId, // Highly recommended, 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.
},
// Controls what URLs we send to Pendo. Refer to: https://agent.pendo.io/advanced/location/.
location: {
transforms: [
{
action: 'Clear',
attr: 'hash',
},
{
action: 'Clear',
attr: 'search',
},
{
action: 'Replace',
attr: 'pathname',
data(url: string) {
const idMatchingRegex = /(\/\d+)/;
const bucketPathMatchingRegex = /(buckets\/[^\/]+\/[^\/]+)/;
const userPathMatchingRegex = /(users\/).*/;
const oauthPathMatchingRegex = /(#access_token).*/;

if (idMatchingRegex.test(url)) {
// Replace any ids with XXXX and keep the rest of the URL intact
return url.replace(idMatchingRegex, '/XXXX');
} else if (bucketPathMatchingRegex.test(url)) {
// Replace the region and bucket names with XXXX and keep the rest of the URL intact
return url.replace(bucketPathMatchingRegex, 'XXXX/XXXX');
} else if (oauthPathMatchingRegex.test(url)) {
// Remove everything after access_token/
url.replace(oauthPathMatchingRegex, '$1');
} else if (userPathMatchingRegex.test(url)) {
// Remove everything after /users
return url.replace(userPathMatchingRegex, '$1');
}
return url;
},
},
},
],
},
visitor: {
id: visitorId, // 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.
},
],
},
visitor: {
id: visitorId, // 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.
},
});
});
});
}
}, [PENDO_URL, accountId, visitorId]);
};