diff --git a/.eslintignore b/.eslintignore index 846b63b..65588a7 100755 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,4 @@ coverage/* dist/ node_modules/ +src/segment.js diff --git a/config/webpack.common.config.js b/config/webpack.common.config.js index c28c753..c2d341d 100755 --- a/config/webpack.common.config.js +++ b/config/webpack.common.config.js @@ -4,6 +4,7 @@ const path = require('path'); module.exports = { entry: { + segment: path.resolve(__dirname, '../src/segment.js'), app: path.resolve(__dirname, '../src/index.jsx'), }, output: { diff --git a/config/webpack.dev.config.js b/config/webpack.dev.config.js index 4f6f2b0..9105eed 100755 --- a/config/webpack.dev.config.js +++ b/config/webpack.dev.config.js @@ -12,6 +12,7 @@ module.exports = Merge.smart(commonConfig, { entry: [ // enable react's custom hot dev client so we get errors reported in the browser require.resolve('react-dev-utils/webpackHotDevClient'), + path.resolve(__dirname, '../src/segment.js'), path.resolve(__dirname, '../src/index.jsx'), ], module: { diff --git a/src/segment.js b/src/segment.js new file mode 100644 index 0000000..1206ed6 --- /dev/null +++ b/src/segment.js @@ -0,0 +1,95 @@ +// The code in this file is from Segment's website, with the following update: +// - Pulls the segment key from configuration. +// https://segment.com/docs/sources/website/analytics.js/quickstart/ +import { configuration } from './config'; + +(function(){ + + // Create a queue, but don't obliterate an existing one! + var analytics = window.analytics = window.analytics || []; + + // If the real analytics.js is already on the page return. + if (analytics.initialize) return; + + // If the snippet was invoked already show an error. + if (analytics.invoked) { + if (window.console && console.error) { + console.error('Segment snippet included twice.'); + } + return; + } + + // Invoked flag, to make sure the snippet + // is never invoked twice. + analytics.invoked = true; + + // A list of the methods in Analytics.js to stub. + analytics.methods = [ + 'trackSubmit', + 'trackClick', + 'trackLink', + 'trackForm', + 'pageview', + 'identify', + 'reset', + 'group', + 'track', + 'ready', + 'alias', + 'debug', + 'page', + 'once', + 'off', + 'on' + ]; + + // Define a factory to create stubs. These are placeholders + // for methods in Analytics.js so that you never have to wait + // for it to load to actually record data. The `method` is + // stored as the first argument, so we can replay the data. + analytics.factory = function(method){ + return function(){ + var args = Array.prototype.slice.call(arguments); + args.unshift(method); + analytics.push(args); + return analytics; + }; + }; + + // For each of our methods, generate a queueing stub. + for (var i = 0; i < analytics.methods.length; i++) { + var key = analytics.methods[i]; + analytics[key] = analytics.factory(key); + } + + // Define a method to load Analytics.js from our CDN, + // and that will be sure to only ever load it once. + analytics.load = function(key, options){ + // Create an async script element based on your key. + var script = document.createElement('script'); + script.type = 'text/javascript'; + script.async = true; + script.src = 'https://cdn.segment.com/analytics.js/v1/' + + key + '/analytics.min.js'; + + // Insert our script next to the first script element. + var first = document.getElementsByTagName('script')[0]; + first.parentNode.insertBefore(script, first); + analytics._loadOptions = options; + }; + + // Add a version to keep track of what's in the wild. + analytics.SNIPPET_VERSION = '4.1.0'; + + // Load Analytics.js with your key, which will automatically + // load the tools you've enabled for your account. Boosh! + analytics.load(configuration.SEGMENT_KEY); + + // TODO: Move this page call if we start making page calls + // - during routing. + // Make the first page call to load the integrations. If + // you'd like to manually name or tag the page, edit or + // move this call however you'd like. + analytics.page(); + +})();