Skip to content

Quantum Metric

George Haberis edited this page Mar 2, 2023 · 4 revisions

Quantum Metric is an analytics and design platform for digital products. The Supporter Revenue team use it to better understand the customer journeys through our support.theguardian.com website. Quantum Metric have their own JavaScript SDK that runs on the support site, on condition a user has consented to this.

Initialisation

The module quantumMetric.ts contains the logic to add the script to the page. This logic checks a user's consent status and the enableQuantumMetric feature switch, if both conditions pass we add the script to the page.

When adding the script to the page we define a Script Integrity prop that instructs the browser to check the fetched script to ensure that the code is never loaded if the source has been manipulated.

Once the script has been loaded we are ready to track the events below.

Events

We can send custom events to Quantum Metric using the window.QuantumMetricAPI.sendEvent interface. The arguments passed to sendEvent are agreed in advance with Quantum Metric.

We can't guarantee Quantum Metric's script will be ready to accept sendEvent calls, so we have code to check it is ready before calling ``window.QuantumMetricAPI.sendEvent`.

sendEventABTestParticipations

Send AB test participations.

sendEventSubscriptionCheckoutStart

Paper/Guardian Weekly checkout has initialised.

sendEventSubscriptionCheckoutConversion

Paper/Guardian Weekly checkout has completed with a conversion.

sendEventContributionCheckoutConversion

Contribution/Supporter + checkout has completed with a conversion.

sendEventContributionCartValue

Sent on:

  • Contribution/Supporter + page load to indicate "cart value" at the start of the checkout.
  • Amount button click to indicate a change in "cart value".

sendEventContributionPaymentMethod

A user has selected a payment method on the checkout.

sendEventConversionPaymentMethod

Notifies QM of the payment method used for a conversion.

πŸ™‹β€β™€οΈ General Information

🎨 Client-side 101

βš›οΈ React+Redux

πŸ’° Payment methods

πŸŽ› Deployment & Testing

πŸ“Š AB Testing

🚧 Helper Components

πŸ“š Other Reference

1️⃣ Quickstarts

πŸ›€οΈ Tracking

Clone this wiki locally