Example of SPA Tracking file.

example.js

// user had a deposit, so we trigger our tracking event
Track.deposit(1234, {
	id: 4321,
	affiliation: 'Paypal',
	revenue: 10,
});

Track.js

import _ from 'lodash';
import Vue from 'vue';

const Tracking = {
	fbqActive: false,
	deposit(notificationID, deposit) {
		this.ecommerce(notificationID, deposit);
		this.fbq('Deposit', { value: deposit.revenue, currency: 'USD' });
		this.adwordConversion({
			google_conversion_label: 'someconversionlabel',
			google_conversion_value: deposit.revenue,
			google_conversion_currency: 'USD',
		});
	},

	newUser() {
		this.fbq('CompleteRegistration');
		this.adwordConversion({ google_conversion_label: 'somethinglabel' });
	},

	/**
	 * GA Ecommerce Tracking.
	 * Logs deposit values, marks notification as read.
	 */
	ecommerce(notificationID, deposit) {
		if (window.ga) {
			Vue.$ga.trackEvent('Deposit', 'ecommerce-notification', notificationID);
			window.ga('ecommerce:addTransaction', deposit);
			window.ga('ecommerce:send');
			Vue.$axios.post(`/api/user/notifications/mark-read/${notificationID}`);
		} else {
			Bugsnag.notify('TrackDeposit', 'GA Not Loaded', { notificationID }, 'info');
		}
	},

	/**
	 * Triggers FB Pixel Conversion event, examples:
	 * fbq('track', 'CompleteRegistration');
	 * fbq('track', 'Purchase', { value: 10.00, currency: 'USD' });
	 */
	fbq(...args) {
		if (window.fbq) {
			if (args[1]) return window.fbq('trackCustom', args[0], args[1]);
			return window.fbq('track', args[0]);
		}
		Bugsnag.notify('TrackDeposit', 'FBQ Not Loaded', null, 'info');
		return false;
	},

	/**
	 * Creates an adwords conversion, and loads script, based on passed config.
	 * Also creates a pixel tracking image.
	 */
	adwordConversion(config) {
		window.google_conversion_id = process.env.GOOGLE_CONVERSION_ID;
		window.google_conversion_language = 'en';
		window.google_conversion_format = '3';
		window.google_conversion_color = 'ffffff';
		window.google_remarketing_only = false;

		// Takes passed configs, and sets them on window object as well.
		_.map(config, (value, key) => { window[key] = value; });

		const script = document.createElement('script');
		script.setAttribute('type', 'text/javascript');
		script.setAttribute('src', 'https://www.googleadservices.com/pagead/conversion.js');
		document.body.append(script);
	},

	/**
	 * Prepares FBQ tracking for use.
	 * Uses provided script to write in FBQ Pixel.
	 * Noscript omitted, JS app wouldn't run regardless.
	 * Called when app loads, and user logs in. If calls twice, delays to prevent duplicates.
	 */
	setupFBQ(user) {
		if (this.fbqActive) return true;
		clearTimeout(this.fbqTimeout);
		this.fbqTimeout = setTimeout(() => {
			this.executeSetupFBQ(user);
		}, 500);
		return true;
	},

	executeSetupFBQ(user) {
		this.fbqActive = true;
		/* eslint-disable */
		!function(f,b,e,v,n,t,s)
		{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
		n.callMethod.apply(n,arguments):n.queue.push(arguments)};
		if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
		n.queue=[];t=b.createElement(e);t.async=!0;
		t.src=v;s=b.getElementsByTagName(e)[0];
		s.parentNode.insertBefore(t,s)}(window,document,'script',
		'https://connect.facebook.net/en_US/fbevents.js');
		fbq.disablePushState = true;
		if (user) {
			fbq('init', process.env.FACEBOOK_PIXEL_ID, {
				em: user.email,
				fn: user.displayname,
			});
		} else {
			fbq('init', process.env.FACEBOOK_PIXEL_ID);
		}
		fbq('track', 'PageView');
		/* eslint-enable */
	},
};

export { Tracking as default };