Insights preparation.

This commit is contained in:
Pedro Silva 2024-04-11 17:14:22 +01:00
parent 2f1c36af40
commit 9bf23550dd
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
9 changed files with 92 additions and 24 deletions

View file

@ -4,6 +4,7 @@ import DomElementCollection from "./Components/DomElementCollection";
import ShippingView from "./Views/ShippingView";
import BillingView from "./Views/BillingView";
import CardView from "./Views/CardView";
import PayPalInsights from "./Insights/PayPalInsights";
class AxoManager {
@ -55,10 +56,44 @@ class AxoManager {
console.log(this);
return this;
}
if (
this.axoConfig?.insights?.enabled
&& this.axoConfig?.insights?.client_id
&& this.axoConfig?.insights?.session_id
) {
PayPalInsights.config(this.axoConfig?.insights?.client_id, { debug: true });
PayPalInsights.setSessionId(this.axoConfig?.insights?.session_id);
PayPalInsights.trackJsLoad();
if (document.querySelector('.woocommerce-checkout')) {
PayPalInsights.trackBeginCheckout({
amount: this.axoConfig?.insights?.amount,
page_type: 'checkout',
user_data: {
country: 'US',
is_store_member: false,
}
});
}
}
}
registerEventHandlers() {
jQuery(document).on('change', 'input[name=payment_method]', (ev) => {
const map = {
'ppcp-axo-gateway': 'card',
'ppcp-gateway': 'paypal',
}
PayPalInsights.trackSelectPaymentMethod({
payment_method_selected: map[ev.target.value] || 'other',
page_type: 'checkout'
});
});
// Listen to Gateway Radio button changes.
this.el.gatewayRadioButton.on('change', (ev) => {
if (ev.target.checked) {
@ -83,7 +118,7 @@ class AxoManager {
if (this.status.hasProfile) {
const { selectionChanged, selectedAddress } = await this.fastlane.profile.showShippingAddressSelector();
console.log('selectedAddress', selectedAddress);
//console.log('selectedAddress', selectedAddress);
if (selectionChanged) {
this.setShipping(selectedAddress);
@ -103,11 +138,11 @@ class AxoManager {
this.el.changeCardLink.on('click', async () => {
const response = await this.fastlane.profile.showCardSelector();
console.log('card response', response);
//console.log('card response', response);
if (response.selectionChanged) {
console.log('response.selectedCard.paymentToken', response.selectedCard.paymentToken);
//console.log('response.selectedCard.paymentToken', response.selectedCard.paymentToken);
this.setCard(response.selectedCard);
this.setBilling({
@ -478,6 +513,15 @@ class AxoManager {
this.data.email = this.emailInput.value;
this.billingView.setData(this.data);
if (!this.fastlane.identity) {
log('Not initialized.');
return;
}
PayPalInsights.trackSubmitCheckoutEmail({
page_type: 'checkout'
});
const lookupResponse = await this.fastlane.identity.lookupCustomerByEmail(this.emailInput.value);
if (lookupResponse.customerContextId) {
@ -499,7 +543,7 @@ class AxoManager {
});
this.setCard(authResponse.profileData.card);
console.log('authResponse', authResponse);
//console.log('authResponse', authResponse);
this.setStatus('validEmail', true);
this.setStatus('hasProfile', true);
@ -522,7 +566,7 @@ class AxoManager {
this.setStatus('validEmail', true);
this.setStatus('hasProfile', false);
console.log('this.cardComponentData()', this.cardComponentData());
//console.log('this.cardComponentData()', this.cardComponentData());
this.cardComponent = await this.fastlane
.FastlaneCardComponent(
@ -620,6 +664,16 @@ class AxoManager {
this.el.axoNonceInput.get().value = nonce;
PayPalInsights.trackEndCheckout({
amount: this.axoConfig?.insights?.amount,
page_type: 'checkout',
payment_method_selected: 'card',
user_data: {
country: 'US',
is_store_member: false,
}
});
this.el.defaultSubmitButton.click();
}

View file

@ -1,4 +1,4 @@
export function log(...args) {
console.log('[AXO] ', ...args);
//console.log('[AXO] ', ...args);
}

View file

@ -11,43 +11,46 @@ class PayPalInsights {
/**
* @returns {PayPalInsights}
*/
static getInstance() {
static init() {
if (!PayPalInsights.instance) {
PayPalInsights.instance = new PayPalInsights();
}
return PayPalInsights.instance;
}
track(eventName, data) {
static track(eventName, data) {
PayPalInsights.init();
paypalInsight('event', eventName, data);
}
static config (clientId, data) {
PayPalInsights.init();
paypalInsight('config', clientId, data);
}
static setSessionId (sessionId) {
PayPalInsights.init();
paypalInsight('set', { session_id: sessionId });
}
static trackJsLoad () {
PayPalInsights.getInstance().track('js_load', { timestamp: Date.now() });
PayPalInsights.track('js_load', { timestamp: Date.now() });
}
static trackBeginCheckout (data) {
PayPalInsights.getInstance().track('begin_checkout', data);
PayPalInsights.track('begin_checkout', data);
}
static trackSubmitCheckoutEmail (data) {
PayPalInsights.getInstance().track('submit_checkout_email', data);
PayPalInsights.track('submit_checkout_email', data);
}
static trackSelectPaymentMethod (data) {
PayPalInsights.getInstance().track('select_payment_method', data);
PayPalInsights.track('select_payment_method', data);
}
static trackEndCheckout (data) {
PayPalInsights.getInstance().track('end_checkout', data);
PayPalInsights.track('end_checkout', data);
}
}

View file

@ -16,7 +16,7 @@ class BillingView {
const selectElement = document.querySelector(selectSelector);
if (!selectElement) {
return ${key};
return key;
}
const option = selectElement.querySelector(`option[value="${key}"]`);

View file

@ -16,7 +16,7 @@ class ShippingView {
const selectElement = document.querySelector(selectSelector);
if (!selectElement) {
return ${key};
return key;
}
const option = selectElement.querySelector(`option[value="${key}"]`);
@ -88,7 +88,7 @@ class ShippingView {
'valuePath': null,
},
phone: {
'selector': '#billing_phone_field', // There is no shipping phone field.
//'selector': '#billing_phone_field', // There is no shipping phone field.
'valueCallback': function (data) {
let phone = '';
const cc = data?.shipping?.phoneNumber?.countryCode;