fix(hotjar): add hotjar data-hj-allow-iframe attribute to iframes & add missing wss://*.hotjar.com in CSP

proeung commented 1 year ago

Issue

Fixes https://jira.wh-sdlc.watson-health.ibm.com/browse/MERATIVE-769

Description

Changed

This PR adds the data-hj-allow-iframe attribute to the <iframe> embeds that are used within the site (eg. PDF Viewer, YouTube Embed).
This is needed because the default Hotjar solution natively blocks iFrame from screen recordings and heatmaps - this does not allow us to fully analyze certain asset types. See solution doc - https://help.hotjar.com/hc/en-us/articles/115011624347
Add missing wss://*.hotjar.com to the CSP.json that got removed - https://github.com/hlxsites/merative2/pull/253/files

Design Specs

N/A - no impact to page design

Test URLs

Before (Changes from main): https://main--merative2--hlxsites.hlx.page/documents/ebook/achieving-the-benefits-of-ai
After (Changes from this PR): https://fix-hotjar-iframe-attribute--merative2--proeung.hlx.page/documents/ebook/achieving-the-benefits-of-ai

Testing Instruction

Screen Shot 2023-06-27 at 4 25 41 PM

Inspect a PDF Viewer/Case Study page (eg. https://fix-hotjar-iframe-attribute--merative2--proeung.hlx.page/documents/ebook/achieving-the-benefits-of-ai).
Ensure that the data-hj-allow-iframe attribute is added to the iframe code (eg. <iframe data-hj-allow-iframe=""></iframe>)
Inspect a page with a video player (eg. https://fix-hotjar-iframe-attribute--merative2--proeung.hlx.page/drafts/putra/test-blog-detail-page).
Ensure that the data-hj-allow-iframe attribute is added to the iframe code (eg. <iframe data-hj-allow-iframe=""></iframe>)

aem-code-sync[bot] commented 1 year ago

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed. In case there are problems, just click the checkbox below to rerun the respective action.