Skip to content

Instantly share code, notes, and snippets.

@JonAbrams
Last active October 19, 2017 21:47
Show Gist options
  • Save JonAbrams/ab7dbb6b28d1603489e1cb3049c7551e to your computer and use it in GitHub Desktop.
Save JonAbrams/ab7dbb6b28d1603489e1cb3049c7551e to your computer and use it in GitHub Desktop.
React component for loading Segment's library
import React from 'react';
import { string } from 'prop-types';
class SegmentLoader extends React.Component {
componentDidMount() {
const { segmentWriteKey } = this.props;
// Create a queue, but don't obliterate an existing one!
const analytics = (window.analytics = window.analytics || []);
// If the real analytics.js is already on the page return.
// If no write key is provided return.
if (analytics.initialize || !segmentWriteKey) 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 = key => {
// Create an async script element based on your key.
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src =
('https:' === document.location.protocol ? 'https://' : 'http://') +
'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);
};
// Add a version to keep track of what's in the wild.
analytics.SNIPPET_VERSION = '4.0.0';
// Load Analytics.js with your key, which will automatically
// load the tools you've enabled for your account. Boosh!
analytics.load(segmentWriteKey);
// 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();
}
render() {
return <div className="segment-loader" style={{ display: 'none' }} />;
}
}
SegmentLoader.propTypes = {
segmentWriteKey: string.isRequired,
};
export default SegmentLoader;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment