README

Install this module to easily monitor and improve customer experience by tracking Core Web Vitals in New Relic by page type and enhancing your RUM setup.

🎉 If you are hosted on Adobe Commerce Cloud you already have New Relic with browser monitoring available! 🎉

Why install it?

By default New Relic is already tracking LCP, INP, and CLS on page views. This is recorded and queryable within New Relic. However you can only filter by some default values like domain or pageUrl. This granularity is insufficient for tracking changes and making targeted improvements on your ecommerce site.

To be able to make impactful changes we need to tbe able to answer questions like

What are customers experiencing on the whole domain?
What are customers experiencing on product pages?
What are customers experiencing in the checkout?

By adding this module you will have this level of detail and be able to make more informed decisions and stay ahead of any regressions.

Installation

composer require gene/module-newrelic-rum-page-type
bin/magento setup:upgrade

How it works

This module adds a custom attribute to the New Relic PageViewTiming data to set the current request type as pageType.

This allows you to query the tracked data in segments like

cms_index_index - the homepage
catalog_product_view - product pages
catalog_category_view - listings pages
checkout_index_index - the checkout

How to use

1. Prepare a New Relic dashboard

It is best to view this data within a New Relic dashboard. We have prepared a dashboard template for you to get started with

Copy the contents of dev/new-relic-cwv-dashboard.json into a text editor
Replace the dummy 1234567 account ID with your actual New Relic account ID
Replace www.example.com with your actual domain.
Log into New Relic
On the left panel click "Dashboards"
On the top right click "Import Dashboard"
Paste in the prepared JSON dashboard and import the "Core Web Vitals by PageType" dashboard.
You will now see a dashboard highlighting your Core Web Vitals.

This LCP/INP/CLS charts have a horizontal target line, your web vitals for desktop and mobile should be below this target line.

2. Deploy this module to production

Install this module on production. PageViewTiming metrics within New Relic will now have their pageType value attached.
Give it at least 24 hours for data to start filtering through, depending on your site and setup you may find patterns that some periods are slower when imports/exports are being triggered.

3. Make improvements for specific pageTypes

When no filter is applied you can see the overall scores for your website, as well as other key pageTypes.
By filtering through catalog_product_view, catalog_category_view, etc you can identify areas for improvement and whether they are most significantly affecting desktop or mobile devices.
Use the Chrome Performance Panel
1. Compare your experience to the experience of real users
2. Configure your environment to better match that of the real users
3. Investigate the additional panels, in particular the "rendering panel" can be very useful in improving CLS
After you deploy a fix it may take some time for it to become fully visible in your dashboard graphs.

4. Set up automated alerting

After you have improved your web vitals you want to monitor them to prevent regression.
From the dashboard click ... on the top right of CLS/INP/LCP
Create an alert condition
Follow instructions from https://docs.newrelic.com/docs/tutorial-create-alerts/create-an-alert/

Tips

Alerting on a 24-hour rolling window seems to be the most stable.
Have an alert for desktop, and one for mobile.
Have alerts for specific page types, so that you are quickly alerted when something goes awry.
Alerts can fire even when no deployments are made, changes in audience, third party tracking, or A/B testers may be the cause.

Caveats

New Relic RUM is not as complete as some other offerings, most notably it is missing LoAF. However, if you already have New Relic and are not currently looking at your RUM data then this module may be enough to get you kick-started on that journey and making targeted improvements.

gene / module-newrelic-rum-page-type

Maintainers

Details