Merge pull request #312 from wmde/C23_Thank_You_00

Prepare thank you banner

README.md

@@ -60,6 +60,17 @@ tracking pixels inside the banner.
 1. Duplicate an existing folder with banner entry points, e.g. `banners/desktop`.
 2. Create a new campaign and its banner configuration in `campaign_info.toml`.
 
+## Developing and building "thank you" banners
+
+The "thank you" banners have a special configuration file, `campaign_info.thank_you.toml`.
+Edit this file for the necessary campaign and tracking parameters.
+
+To use this file instead of the standard `campaign_info.toml` file, run `npm run thankyou` instead of `npm run dev`.
+This environment does *not* use `nodemon` to watch for changes in `campaign_info.thank_you.toml`.
+If you change that file or one of the webpack configuration files, you need to restart the server.
+
+To build the "thank you" banners, run `npm run build:thankyou` instead of `npm run build`.
+
 ### Creating A/B tests
 
 TODO: Rewrite this section for different types of tests (text changes,

banners/thank_you/MembershipFormActions.ts

@@ -0,0 +1,35 @@
+/* eslint-disable camelcase */
+import { TrackingParameters } from '@src/domain/TrackingParameters';
+import { ImpressionCount } from '@src/utils/ImpressionCount';
+import { Locales } from '@src/domain/Locales';
+
+const MEMBERSHIP_FORM_URL = 'https://spenden.wikimedia.de/apply-for-membership';
+
+export interface MembershipFormActions {
+	create( extraUrlParameters: Record<string, string> ): string;
+}
+
+export class TrackingMembershipFormActions implements MembershipFormActions {
+	private _tracking: TrackingParameters;
+	private _impressionCount: ImpressionCount;
+	private readonly _locale: Locales;
+
+	public constructor( tracking: TrackingParameters, impressionCount: ImpressionCount, locale: Locales ) {
+		this._tracking = tracking;
+		this._impressionCount = impressionCount;
+		this._locale = locale;
+	}
+
+	public create( extraUrlParameters: Record<string, string> = {} ): string {
+		const urlParameters = new URLSearchParams( {
+			piwik_kwd: this._tracking.keyword,
+			piwik_campaign: this._tracking.campaign,
+			impCount: String( this._impressionCount.overallCountIncremented ),
+			bImpCount: String( this._impressionCount.bannerCountIncremented ),
+			locale: this._locale,
+			...extraUrlParameters
+		} );
+
+		return `${MEMBERSHIP_FORM_URL}?${urlParameters}`;
+	}
+}

banners/thank_you/banner_ctrl.de.ts

@@ -0,0 +1,52 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import PageWPORG from '@src/page/PageWPORG';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import { Translator } from '@src/Translator';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerCtrl.de.vue';
+import messages from './messages.de';
+import eventMappings from '../thank_you/event_map';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createTrackedURL, SUBSCRIBE_URL, USE_OF_FUNDS_URL } from './createTrackedURL';
+import { createThankYouSettings } from './settings';
+import { IntegerDe } from '@src/utils/DynamicContent/formatters/IntegerDe';
+import { Locales } from '@src/domain/Locales';
+
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 0 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 0
+	},
+	bannerProps: {
+		settings: createThankYouSettings( new IntegerDe(), page.getCampaignParameters().thankYouCampaign ),
+		subscribeURL: createTrackedURL( SUBSCRIBE_URL, page.getTracking(), impressionCount, Locales.DE ),
+		useOfFundsURL: createTrackedURL( USE_OF_FUNDS_URL, page.getTracking(), impressionCount, Locales.DE )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount, Locales.DE ) );
+
+app.mount( page.getBannerContainer() );

banners/thank_you/banner_ctrl.en.ts

@@ -0,0 +1,52 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import PageWPORG from '@src/page/PageWPORG';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import { Translator } from '@src/Translator';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerCtrl.en.vue';
+import messages from './messages.en';
+import eventMappings from '../thank_you/event_map';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createTrackedURL, SUBSCRIBE_URL, USE_OF_FUNDS_URL } from './createTrackedURL';
+import { createThankYouSettings } from './settings';
+import { IntegerEn } from '@src/utils/DynamicContent/formatters/IntegerEn';
+import { Locales } from '@src/domain/Locales';
+
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 0 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 0
+	},
+	bannerProps: {
+		settings: createThankYouSettings( new IntegerEn(), page.getCampaignParameters().thankYouCampaign ),
+		subscribeURL: createTrackedURL( SUBSCRIBE_URL, page.getTracking(), impressionCount, Locales.EN ),
+		useOfFundsURL: createTrackedURL( USE_OF_FUNDS_URL, page.getTracking(), impressionCount, Locales.EN )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount, Locales.EN ) );
+
+app.mount( page.getBannerContainer() );

banners/thank_you/banner_ctrl.wpde.ts

@@ -0,0 +1,54 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+import { Translator } from '@src/Translator';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerCtrl.de.vue';
+import messages from './messages.de';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createTrackedURL, SUBSCRIBE_URL, USE_OF_FUNDS_URL } from './createTrackedURL';
+import PageWPDE from '@src/page/PageWPDE';
+import { TrackerWPDE } from '@src/tracking/TrackerWPDE';
+import eventMap from '../wpde_desktop/event_map';
+import { createThankYouSettings } from './settings';
+import { IntegerDe } from '@src/utils/DynamicContent/formatters/IntegerDe';
+import { Locales } from '@src/domain/Locales';
+
+// Tracking placeholders will be replaced by webpack string-replace-loader
+// using the campaign configuration ( campaign_info.toml ) for the correct values
+const tracking = {
+	campaign: '!insert-campaign-here!',
+	keyword: '!insert-keyword-here!'
+};
+
+const translator = new Translator( messages );
+const page = new PageWPDE( tracking );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new TrackerWPDE( 'FundraisingTracker', page.getTracking().keyword, eventMap, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 0
+	},
+	bannerProps: {
+		settings: createThankYouSettings( new IntegerDe(), page.getCampaignParameters().thankYouCampaign ),
+		subscribeURL: createTrackedURL( SUBSCRIBE_URL, page.getTracking(), impressionCount, Locales.DE ),
+		useOfFundsURL: createTrackedURL( USE_OF_FUNDS_URL, page.getTracking(), impressionCount, Locales.DE )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount, Locales.DE ) );
+
+app.mount( page.getBannerContainer() );

banners/thank_you/banner_var.de.ts

@@ -0,0 +1,52 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import PageWPORG from '@src/page/PageWPORG';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import { Translator } from '@src/Translator';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerVar.de.vue';
+import messages from './messages.de';
+import eventMappings from '../thank_you/event_map';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createTrackedURL, SUBSCRIBE_URL, USE_OF_FUNDS_URL } from './createTrackedURL';
+import { createThankYouSettings } from './settings';
+import { IntegerDe } from '@src/utils/DynamicContent/formatters/IntegerDe';
+import { Locales } from '@src/domain/Locales';
+
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 0 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 0
+	},
+	bannerProps: {
+		settings: createThankYouSettings( new IntegerDe(), page.getCampaignParameters().thankYouCampaign ),
+		subscribeURL: createTrackedURL( SUBSCRIBE_URL, page.getTracking(), impressionCount, Locales.DE ),
+		useOfFundsURL: createTrackedURL( USE_OF_FUNDS_URL, page.getTracking(), impressionCount, Locales.DE )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount, Locales.DE ) );
+
+app.mount( page.getBannerContainer() );

banners/thank_you/banner_var.en.ts

@@ -0,0 +1,52 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import PageWPORG from '@src/page/PageWPORG';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import { Translator } from '@src/Translator';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerVar.en.vue';
+import messages from './messages.en';
+import eventMappings from '../thank_you/event_map';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createTrackedURL, SUBSCRIBE_URL, USE_OF_FUNDS_URL } from './createTrackedURL';
+import { createThankYouSettings } from './settings';
+import { IntegerEn } from '@src/utils/DynamicContent/formatters/IntegerEn';
+import { Locales } from '@src/domain/Locales';
+
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 0 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 0
+	},
+	bannerProps: {
+		settings: createThankYouSettings( new IntegerEn(), page.getCampaignParameters().thankYouCampaign ),
+		subscribeURL: createTrackedURL( SUBSCRIBE_URL, page.getTracking(), impressionCount, Locales.EN ),
+		useOfFundsURL: createTrackedURL( USE_OF_FUNDS_URL, page.getTracking(), impressionCount, Locales.EN )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount, Locales.EN ) );
+
+app.mount( page.getBannerContainer() );

banners/thank_you/banner_var.wpde.ts

@@ -0,0 +1,54 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+import { Translator } from '@src/Translator';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerVar.de.vue';
+import messages from './messages.de';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createTrackedURL, SUBSCRIBE_URL, USE_OF_FUNDS_URL } from './createTrackedURL';
+import PageWPDE from '@src/page/PageWPDE';
+import { TrackerWPDE } from '@src/tracking/TrackerWPDE';
+import eventMap from '../wpde_desktop/event_map';
+import { createThankYouSettings } from './settings';
+import { IntegerDe } from '@src/utils/DynamicContent/formatters/IntegerDe';
+import { Locales } from '@src/domain/Locales';
+
+// Tracking placeholders will be replaced by webpack string-replace-loader
+// using the campaign configuration ( campaign_info.toml ) for the correct values
+const tracking = {
+	campaign: '!insert-campaign-here!',
+	keyword: '!insert-keyword-here!'
+};
+
+const translator = new Translator( messages );
+const page = new PageWPDE( tracking );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new TrackerWPDE( 'FundraisingTracker', page.getTracking().keyword, eventMap, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 0
+	},
+	bannerProps: {
+		settings: createThankYouSettings( new IntegerDe(), page.getCampaignParameters().thankYouCampaign ),
+		subscribeURL: createTrackedURL( SUBSCRIBE_URL, page.getTracking(), impressionCount, Locales.DE ),
+		useOfFundsURL: createTrackedURL( USE_OF_FUNDS_URL, page.getTracking(), impressionCount, Locales.DE )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount, Locales.DE ) );
+
+app.mount( page.getBannerContainer() );