diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 673e3dfa5..5075a82ba 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,6 +2,7 @@ import {APP_BASE_HREF, isPlatformBrowser} from '@angular/common'; import {AfterViewInit, Component, HostListener, Inject, OnInit, PLATFORM_ID, ViewChild} from '@angular/core'; import {Event as RouterEvent, NavigationEnd, NavigationStart, Router,} from '@angular/router'; import {BiggiveMainMenu} from '@biggive/components-angular'; +import {MatomoTracker} from "ngx-matomo"; import {filter} from 'rxjs/operators'; import {DonationService} from './donation.service'; @@ -17,7 +18,6 @@ import { CookiePreferences, CookiePreferenceService } from "./cookiePreference.service"; -import {MatomoTracker} from "ngx-matomo"; @Component({ selector: 'app-root', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f20cc0af1..38cd51a8b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -48,7 +48,7 @@ const matomoTrackers = environment.matomoSiteId ? [ routeTracking: { enable: true, }, - requireCookieConsent: flags.cookieBannerEnabled, + requireCookieConsent: flags.cookieBannerEnabled, }), RouterModule.forRoot(routes, { bindToComponentInputs: true, diff --git a/src/app/donation-complete/donation-complete.component.ts b/src/app/donation-complete/donation-complete.component.ts index ef65b22de..9091d2ddd 100644 --- a/src/app/donation-complete/donation-complete.component.ts +++ b/src/app/donation-complete/donation-complete.component.ts @@ -227,8 +227,14 @@ export class DonationCompleteComponent implements OnInit { }); if (donation && this.donationService.isComplete(donation)) { + // This is linked to the Donation Complete goal in Matomo, so we don't need to separately + // `trackGoal()` for that. this.matomoTracker.trackEvent('donate', 'thank_you_fully_loaded', `Donation to campaign ${donation.projectId}`); + if (donation.tipAmount > 0 && environment.matomoNonZeroTipGoalId && donation.currencyCode === 'GBP') { + this.matomoTracker.trackGoal(environment.matomoNonZeroTipGoalId, donation.tipAmount); + } + this.cardChargedAmount = donation.donationAmount + donation.feeCoverAmount + donation.tipAmount; this.giftAidAmount = donation.giftAid ? 0.25 * donation.donationAmount : 0; this.totalValue = donation.donationAmount + this.giftAidAmount + donation.matchedAmount; diff --git a/src/app/donation-start/donation-start-form/donation-start-form.component.html b/src/app/donation-start/donation-start-form/donation-start-form.component.html index 38c5bbf1c..648658b7a 100644 --- a/src/app/donation-start/donation-start-form/donation-start-form.component.html +++ b/src/app/donation-start/donation-start-form/donation-start-form.component.html @@ -67,8 +67,13 @@

Tip Big Give

- Big Give doesn't charge platform fees. That means we're only able to continue offering our services thanks to - the generosity of donors who leave an optional tip amount here. + + Big Give doesn't charge platform fees. That means we're only able to continue offering our services thanks to + the generosity of donors who leave a tip. + + + Big Give is a registered charity (1136547), and since 2008, our aim has been to help thousands of charities double the difference of their donations. Thanks to the generosity of people like you who leave a tip, we can continue providing a match funding platform for the charities and causes you care about. +

@@ -104,6 +109,8 @@

Tip Big Give

slot="input" /> + +

Did you know Big Give is a charity, too? Tips help us provide a platform that doubles the difference of your donation to the causes closest to your heart. We truly appreciate any tip you can give - no matter the size.

Tip Big Give - +

How does Big Give use tips?

- -

- Big Give is a registered charity, no 1136547. We don’t charge charities for using our platform; we rely on the generosity of people who donate to leave a Voluntary Tip, which helps us run our match funding campaigns. -

-

Your tips will be going to:

- - -

- Thank you for your generosity! Your tips ensure that we can continue to support charities and causes that are important to you. -

+
+

+ Big Give is a registered charity, no 1136547. We don't charge charities for using our platform; we rely on the generosity of people who donate to leave a Voluntary Tip, which helps us run our match funding campaigns. +

+

Your tips will be going to:

+ +

+ Thank you for your generosity! Your tips ensure that we can continue to support charities and causes that are important to you. +

+
+
+

+ We don't charge charities for using our platform; instead, we rely on the generosity of people who donate to leave a Voluntary Tip, which helps us run our match funding campaigns. +

+

Everything we make goes back into supporting charities. Your tips will be:

+
    +
  • Doubling the difference onwards by providing match funding. Through tips, charities will receive funding in our open_in_new Anchor Match fund to help launch their campaigns.
    • +
  • Helping us maintain our website and support our team, so we can keep working with your favourite charities for many years to come.
    • +
+

Thank you! If you have any questions about tips, please contact us at hello@biggive.org.

+
diff --git a/src/app/donation-start/donation-start-form/donation-start-form.component.ts b/src/app/donation-start/donation-start-form/donation-start-form.component.ts index 7d89ed632..c2c16bc97 100644 --- a/src/app/donation-start/donation-start-form/donation-start-form.component.ts +++ b/src/app/donation-start/donation-start-form/donation-start-form.component.ts @@ -63,6 +63,10 @@ import {sanitiseCurrency} from "../sanitiseCurrency"; import {DonationTippingSliderComponent} from "./donation-tipping-slider/donation-tipping-slider.component"; import {MatomoTracker} from 'ngx-matomo'; +declare var _paq: { + push: (args: Array) => void, +}; + @Component({ selector: 'app-donation-start-form', templateUrl: './donation-start-form.component.html', @@ -78,6 +82,8 @@ export class DonationStartFormComponent implements AfterContentChecked, AfterCon @ViewChild('stepper') private stepper: MatStepper; @ViewChild('donationTippingSlider') private donationTippingSlider: DonationTippingSliderComponent|undefined; + alternateCopy = false; // Varies tip copy for A/B test. + stripePaymentElement: StripePaymentElement | undefined; cardHandler = this.onStripeCardChange.bind(this); @@ -269,6 +275,38 @@ export class DonationStartFormComponent implements AfterContentChecked, AfterCon ngOnInit() { if (isPlatformBrowser(this.platformId)) { this.stripeService.init(); + + // ngx-matomo sets up window._paq internally, and doesn't have + // A/B test methods, so we work with the global ourselves. + if (environment.matomoAbTest && globalThis.hasOwnProperty('_paq')) { + _paq.push(['AbTesting::create', { + name: environment.matomoAbTest.name, + percentage: 100, + includedTargets: [{"attribute":"url","inverted":"0","type":"any","value":""}], + excludedTargets: [], + startDateTime: environment.matomoAbTest.startDate, + endDateTime: environment.matomoAbTest.endDate, + variations: [ + { + name: 'original', + activate: (_event: any) => { + // No change from the original form. + console.log('Original test variant active!'); + } + }, + { + name: environment.matomoAbTest.variantName, + activate: (_event: any) => { + this.alternateCopy = true; + console.log('Copy B test variant active!'); + } + }, + ], + trigger: () => { + return true; + }, + }]); + } } this.setCampaignBasedVars(); diff --git a/src/environments/environment.interface.ts b/src/environments/environment.interface.ts index 3c234e0a0..e02100fd3 100644 --- a/src/environments/environment.interface.ts +++ b/src/environments/environment.interface.ts @@ -20,7 +20,7 @@ export interface Environment { /** Domain for cookies to be shared between donate-frontend, wordpress etc. * Currently, ".biggive.org" in production. */ - sharedCookieDomain: string; + sharedCookieDomain: string; /** Prefix for pages served by the SF Experience Cloud */ experienceUriPrefix: string, @@ -28,6 +28,13 @@ export interface Environment { getSiteControlId: string, identityApiPrefix: string, matomoSiteId: number | null, // null for no Matomo tracking. + matomoNonZeroTipGoalId: number | null, // Only tracks GBP campaigns; sends tip as value in £. + matomoAbTest?: { + name: string, + variantName: string, // The one that's not 'original'. + startDate: string, + endDate?: string, // Typically omit for dev/staging evaluation. + }, minimumCreditAmount: number, maximumCreditAmount: number, postcodeLookupKey: string, diff --git a/src/environments/environment.production.ts b/src/environments/environment.production.ts index 618a0e800..43833e950 100644 --- a/src/environments/environment.production.ts +++ b/src/environments/environment.production.ts @@ -16,6 +16,13 @@ export const environment: Environment = { getSiteControlId: '97792', identityApiPrefix: 'https://identity-production.thebiggive.org.uk/v1', matomoSiteId: 2, + matomoNonZeroTipGoalId: 11, + matomoAbTest: { + name: 'new_tip_copy_wgmf_2023', + variantName: 'test_b', + startDate: '2023/10/10 11:00:00 UTC', + endDate: '2023/10/18 12:00:00 UTC', + }, minimumCreditAmount: 500, maximumCreditAmount: 500_000, postcodeLookupKey: 'gq9-k9zYakORdv2uoY_yVw33182', diff --git a/src/environments/environment.regression.ts b/src/environments/environment.regression.ts index 2acbc007f..f8d18c5b4 100644 --- a/src/environments/environment.regression.ts +++ b/src/environments/environment.regression.ts @@ -24,6 +24,7 @@ export const environment: Environment = { getSiteControlId: '97792', identityApiPrefix: 'https://identity-regression.thebiggivetest.org.uk/v1', matomoSiteId: null, + matomoNonZeroTipGoalId: null, minimumCreditAmount: 500, maximumCreditAmount: 500_000, postcodeLookupKey: 'gq9-k9zYakORdv2uoY_yVw33182', diff --git a/src/environments/environment.staging.ts b/src/environments/environment.staging.ts index 877776d8b..3439f0120 100644 --- a/src/environments/environment.staging.ts +++ b/src/environments/environment.staging.ts @@ -22,6 +22,12 @@ export const environment: Environment = { getSiteControlId: '97792', identityApiPrefix: 'https://identity-staging.thebiggivetest.org.uk/v1', matomoSiteId: 4, + matomoNonZeroTipGoalId: 1, + matomoAbTest: { + name: 'new_tip_copy_2023_10_02_b', + startDate: '2023/10/02 18:30:11 UTC', + variantName: 'copy_b', + }, minimumCreditAmount: 500, maximumCreditAmount: 500_000, postcodeLookupKey: 'gq9-k9zYakORdv2uoY_yVw33182', diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 131230b85..9d6311db6 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -22,6 +22,12 @@ export const environment: Environment = { getSiteControlId: '97792', identityApiPrefix: 'http://localhost:30050/v1', matomoSiteId: 4, + matomoNonZeroTipGoalId: 1, + matomoAbTest: { + name: 'new_tip_copy_2023_10_02_b', + startDate: '2023/10/02 18:30:11 UTC', + variantName: 'copy_b', + }, minimumCreditAmount: 500, maximumCreditAmount: 500_000, postcodeLookupKey: 'gq9-k9zYakORdv2uoY_yVw33182',