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

@ -39,7 +39,7 @@ class ApplepayButton {
this.log = function() {
if ( this.buttonConfig.is_debug ) {
console.log('[ApplePayButton]', ...arguments);
//console.log('[ApplePayButton]', ...arguments);
}
}

View file

@ -88,6 +88,8 @@ return array(
->action_visible( 'axo_email_widget' )
->action_visible( 'axo_address_widget' )
->action_visible( 'axo_payment_widget' )
->action_visible( 'axo_privacy' )
->action_visible( 'axo_style_heading' )
->action_class( 'axo_enabled', 'active' )
->to_array(),
$display_manager
@ -104,9 +106,9 @@ return array(
->action_visible( 'axo_style_input_bg_color' )
->action_visible( 'axo_style_input_border_radius' )
->action_visible( 'axo_style_input_border_color' )
->action_visible( 'axo_style_root_border_width' )
->action_visible( 'axo_style_root_text_color_base' )
->action_visible( 'axo_style_root_focus_border_color' )
->action_visible( 'axo_style_input_border_width' )
->action_visible( 'axo_style_input_text_color_base' )
->action_visible( 'axo_style_input_focus_border_color' )
->to_array(),
)
),
@ -352,7 +354,7 @@ return array(
'requirements' => array(),
'gateway' => 'dcc',
),
'axo_style_root_border_width' => array(
'axo_style_input_border_width' => array(
'title' => __( 'Border Width', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
@ -362,7 +364,7 @@ return array(
'requirements' => array(),
'gateway' => 'dcc',
),
'axo_style_root_text_color_base' => array(
'axo_style_input_text_color_base' => array(
'title' => __( 'Text Color Base', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
@ -372,7 +374,7 @@ return array(
'requirements' => array(),
'gateway' => 'dcc',
),
'axo_style_root_focus_border_color' => array(
'axo_style_input_focus_border_color' => array(
'title' => __( 'Focus Border Color', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),

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;

View file

@ -160,6 +160,15 @@ class AxoManager {
'address' => $address_widget ?: 'render',
'payment' => $payment_widget ?: 'render',
),
'insights' => array(
'enabled' => true,
'client_id' => ( $this->settings->has( 'client_id' ) ? $this->settings->get( 'client_id' ) : null ),
'session_id' => substr( md5( WC()->session->get_customer_unique_id() ), 0, 16 ),
'amount' => array(
'currency_code' => get_woocommerce_currency(),
'value' => WC()->cart->get_total( 'numeric' )
)
)
);
}

View file

@ -28,7 +28,7 @@ class GooglepayButton {
this.log = function() {
if ( this.buttonConfig.is_debug ) {
console.log('[GooglePayButton]', ...arguments);
//console.log('[GooglePayButton]', ...arguments);
}
}
}