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.

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

feat: Add pageType to Checkout window #28

Merged
merged 2 commits into from
Nov 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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};
julianajlk marked this conversation as resolved.
Show resolved Hide resolved
[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);
Expand All @@ -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 %>,
grmartin marked this conversation as resolved.
Show resolved Hide resolved
apiVersion: 'v2/t',
multiparty: true,
taggy: { enabled: true },
Expand Down
5 changes: 4 additions & 1 deletion src/cohesion/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
5 changes: 1 addition & 4 deletions src/feedback/AlertMessage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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',
Expand Down
14 changes: 3 additions & 11 deletions src/payment/checkout/Checkout.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -45,6 +42,7 @@ class Checkout extends React.Component {

componentDidMount() {
this.props.fetchClientSecret();
window.chsn_pageType = PageData.PageType;
julianajlk marked this conversation as resolved.
Show resolved Hide resolved
}

handleRedirectToPaypal = () => {
Expand Down Expand Up @@ -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(),
Expand Down Expand Up @@ -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(),
};

Expand Down
5 changes: 1 addition & 4 deletions src/payment/checkout/payment-form/PlaceOrderButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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',
Expand Down
4 changes: 1 addition & 3 deletions src/payment/data/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
8 changes: 4 additions & 4 deletions src/payment/data/sagas.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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);
Expand Down
5 changes: 1 addition & 4 deletions src/payment/payment-methods/paypal/PayPalButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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',
Expand Down
Loading