feat: Add pageType to Checkout window (#28)

EDX-932 RV

public/index.html

@@ -23,7 +23,7 @@
     <% if (htmlWebpackPlugin?.options?.cohesionConfig) { %>
     <script>
       !function(co,h,e,s,i,o,n){console.log('Cohesion script running'); var d='documentElement';var a='className';h[d][a]+=' preampjs';
-      n.k=e;co._Cohesion=n;co._Preamp={k:s,start:new Date};co._Fuse={k:i};co._Tagular={k:o}; co.tagular = o;
+      n.k=e;co._Cohesion=n;co._Preamp={k:s,start:new Date};co._Fuse={k:i};co._Tagular={k:o};
       [e,s,i,o].map(function(x){co[x]=co[x]||function(){(co[x].q=co[x].q||[]).push([].slice.call(arguments))}});
       var b=function(){var u=h[d][a];h[d][a]=u.replace(/ ?preampjs/g,'')};
       h.addEventListener('DOMContentLoaded',function(){co.setTimeout(b,3e3);
@@ -37,7 +37,7 @@
               writeKey: '<%= htmlWebpackPlugin?.options?.cohesionConfig?.tagularWriteKey %>',
               sourceKey: '<%= htmlWebpackPlugin?.options?.cohesionConfig?.tagularSourceKey %>',
               cookieDomain: '<%= htmlWebpackPlugin?.options?.cohesionConfig?.tagularCookieDomain %>',
-              domainWhitelist: `<%= htmlWebpackPlugin?.options?.cohesionConfig?.tagularDomainWhitelist %>`,
+              domainWhitelist: <%= htmlWebpackPlugin?.options?.cohesionConfig?.tagularDomainWhitelist %>,
               apiVersion: 'v2/t',
               multiparty: true,
               taggy: { enabled: true },

src/cohesion/constants.js

@@ -4,7 +4,10 @@ export const ElementType = {
   Button: 'BUTTON',
 };
 
-export const PaymentTitle = 'Payment | edX';
+export const PageData = {
+  PaymentTitle: 'Payment | edX',
+  PageType: 'checkout',
+};
 
 export const EventMap = {
   ProductClicked: 'redventures.ecommerce.v1.ProductClicked',

src/feedback/AlertMessage.jsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { Alert } from '@openedx/paragon';
 import { ALERT_TYPES, MESSAGE_TYPES } from './data/constants';
 import { trackElementIntersection } from '../payment/data/actions';
-import { ElementType, PaymentTitle, IS_FULLY_SHOWN_THRESHOLD_OR_MARGIN } from '../cohesion/constants';
+import { ElementType, IS_FULLY_SHOWN_THRESHOLD_OR_MARGIN } from '../cohesion/constants';
 
 // Put in a message type, get an alert type.
 const severityMap = {
@@ -31,9 +31,6 @@ const AlertMessage = (props) => {
       entries.forEach(entry => {
         if (entry.isIntersecting && entry.target?.innerText.includes('added to basket')) {
           const tagularElement = {
-            title: PaymentTitle,
-            url: entry.target?.baseURI,
-            pageType: 'checkout',
             elementType: ElementType.Button,
             name: 'promotional-code',
             text: 'Apply',

src/payment/checkout/Checkout.jsx

@@ -9,10 +9,7 @@ import {
   intlShape,
 } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import {
-  ElementType,
-  PaymentTitle,
-} from '../../cohesion/constants';
+import { ElementType, PageData } from '../../cohesion/constants';
 
 import messages from './Checkout.messages';
 import {
@@ -45,6 +42,7 @@ class Checkout extends React.Component {
 
   componentDidMount() {
     this.props.fetchClientSecret();
+    window.chsn_pageType = PageData.PageType;
   }
 
   handleRedirectToPaypal = () => {
@@ -75,9 +73,6 @@ class Checkout extends React.Component {
 
     // Red Ventures Cohesion Tagular Event Tracking for PayPal
     const tagularElement = {
-      title: PaymentTitle,
-      url: window.location.href,
-      pageType: 'checkout',
       elementType: ElementType.Button,
       text: paymentMethod,
       name: paymentMethod.toLowerCase(),
@@ -133,10 +128,7 @@ class Checkout extends React.Component {
   handleSubmitStripe = (formData) => {
     // Red Ventures Cohesion Tagular Event Tracking for Stripe
     const tagularElement = {
-      title: PaymentTitle,
-      url: window.location.href,
-      pageType: 'checkout',
-      timestamp: Date.now(),
+      timestamp: Date.now().toString(),
       productList: this.getProductList(),
     };
 

src/payment/checkout/payment-form/PlaceOrderButton.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { StatefulButton } from '@openedx/paragon';
 import { trackElementIntersection } from '../../data/actions';
-import { ElementType, PaymentTitle, IS_FULLY_SHOWN_THRESHOLD_OR_MARGIN } from '../../../cohesion/constants';
+import { ElementType, IS_FULLY_SHOWN_THRESHOLD_OR_MARGIN } from '../../../cohesion/constants';
 
 const PlaceOrderButton = ({
   showLoadingButton, onSubmitButtonClick, stripeSelectedPaymentMethod, disabled, isProcessing,
@@ -24,9 +24,6 @@ const PlaceOrderButton = ({
       entries.forEach(entry => {
         if (entry.isIntersecting) {
           const tagularElement = {
-            title: PaymentTitle,
-            url: window.location.href,
-            pageType: 'checkout',
             elementType: ElementType.Button,
             position: 'placeOrderButton',
             name: 'stripe',

src/payment/data/actions.js

@@ -115,9 +115,7 @@ export const trackElementIntersection = tagularElement => {
   // Note: For the coupon code banner, we're using an elementViewed as a click event
   // ('BUTTON' on coupon Apply click, but it's when the banner is viewed).
   const viewedEvent = {
-    correlation: {
-      id: getCorrelationID(),
-    },
+    correlationId: getCorrelationID(),
     webElement: tagularElement,
   };
   tagularEvent('ElementViewed', viewedEvent);

src/payment/data/sagas.js

@@ -241,8 +241,8 @@ export function* handleSubmitPayment({ payload }) {
       // Metada for conversion_category and conversion_action:
       // Sucessful payment = 'Order' and 'Completed'
       // Failed payment = 'Enrollment' and 'Declined'
-      tagularElement.conversion_category = 'Order';
-      tagularElement.conversion_action = 'Completed';
+      tagularElement.category = 'Order';
+      tagularElement.action = 'Completed';
       yield put(trackPaymentButtonClick(tagularElement));
     }
   } catch (error) {
@@ -255,8 +255,8 @@ export function* handleSubmitPayment({ payload }) {
       } else {
         // RV tracking for failed Stripe Payment
         if (method === 'stripe') {
-          tagularElement.conversion_category = 'Enrollment';
-          tagularElement.conversion_action = 'Declined';
+          tagularElement.category = 'Enrollment';
+          tagularElement.action = 'Declined';
           yield put(trackPaymentButtonClick(tagularElement));
         }
         yield call(handleErrors, error, true);

src/payment/payment-methods/paypal/PayPalButton.jsx

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { trackElementIntersection } from '../../data/actions';
-import { ElementType, PaymentTitle, IS_FULLY_SHOWN_THRESHOLD_OR_MARGIN } from '../../../cohesion/constants';
+import { ElementType, IS_FULLY_SHOWN_THRESHOLD_OR_MARGIN } from '../../../cohesion/constants';
 
 import PayPalLogo from './assets/paypal-logo.png';
 import messages from './PayPalButton.messages';
@@ -19,9 +19,6 @@ const PayPalButton = ({ intl, isProcessing, ...props }) => {
         if (entry.isIntersecting) {
           const elementId = entry.target?.id;
           const tagularElement = {
-            title: PaymentTitle,
-            url: window.location.href,
-            pageType: 'checkout',
             elementType: ElementType.Button,
             position: elementId,
             name: 'paypal',