Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.gatsbyjs.com/plugins/gatsby-plugin-segment-js below:

gatsby-plugin-segment-js | Gatsby

A lightweight & feature-rich Gatsby plugin to easily add Segment JS snippet to your site.

We’re looking for active contributors to this repo! If you’re interested, simply open an issue or PR of your own and indicate that you’d like to help. Check out our open issues and PRs. We also need to beef up testing. Contributors get to:

• manage versioning and deploys by publishing new versions to NPM
• determine which features get launched by merging pull requests
• oversee the community through commenting on and managing pull requests and issues

⚜️ Being an active contributor is great for the community and your engineering resume.⚜️

Packed with features:

• use multiple write keys (one for prod env, another optional one for dev)
• disable page view tracking (just in case you want to add it later manually)
• will use a default Segment code snippet (currently v4.15.3), or you can provide your own custom snippet

• NPM: $ npm install --save gatsby-plugin-segment-js
• YARN: $ yarn add gatsby-plugin-segment-js

In your gatsby-config.js file:

plugins: [
  {
    resolve: `gatsby-plugin-segment-js`,
    options: {
      
      
      
      prodKey: 'SEGMENT_PRODUCTION_WRITE_KEY',

      
      
      
      devKey: 'SEGMENT_DEV_WRITE_KEY',

      
      
      
      
      
      
      
      trackPage: true,

      
      
      
      
      
      
      
      
      
      trackPageImmediately: true,

      
      
      
      
      trackPageOnlyIfReady: false,

      
      
      
      
      
      
      
      
      trackPageOnRouteUpdate: true,

      
      
      
      
      
      
      
      
      trackPageOnRouteUpdateDelay: 50,

      
      
      
      
      
      
      
      trackPageWithTitle: false,
      
      
      
      
      
      
      delayLoad: false,

      
      
      
      
      delayLoadDelay: 1000,

      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      delayLoadUntilActivity: false,

      
      
      
      
      delayLoadUntilActivityAdditionalDelay: 0,

      
      
      
      
      
      
      
      manualLoad: false,

      
      
      
      
      
      
      
      host: 'https://override-segment-endpoint',

      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      customSnippet: '!function(){var analytics=window.analytics||[];...;analytics.load("${writeKey}");analytics.page();}}();'
    }
  }
];

A typical Segment setup using this plugin will add an initial “snippet” for Segment to the page. Once that snippet is there, it needs to be “loaded” completely by making a call to analytics.load(<your segment key here>) before it will actually send over any events to Segment. This load call causes a flurry of XHR calls, and some people seem to be quite concerned with having those calls not occur until after some delay - usually for SEO scores, though it’s not clear to me if the way Segment handles load calls will impact TTI, etc. Regardless, if you want this plugin to delay calling load, you have 2 options: 1. delayLoad: This will cause a straightforward delay before load is called. Use in conjunction with delayLoadDelay to tweak the amount of the delay. 2. delayLoadUntilActivity: This will wait to call load until either (a) the user triggers a “scroll” event or (b) the user triggers route change. This option will take precendence over the delayLoad option.

If you want to track events, you simply invoke Segment as normal in your React components — (window.analytics.track('Event Name', {...}) — and you should see the events within your Segment debugger! For example, if you wanted to track events on a click, it may look something like this:

class IndexPage extends React.Component {
    ...
    _handleClick() {
        window.analytics.track("Track Event Fired", {
            userId: user.id,
            gender: 'male',
            age: 33,
        });
    }
    render() {
        return (
            <p>
                <Link onClick={this._handleClick} to="/">
                    Click here
                </Link>{" "}
                to see a track event
            </p>
        );
    }
}

If you want to track pageviews automatically, set (or leave) trackPage to true in your gatsby-config.js file. What we mean by “automatically” is that we will intelligently decide how or when to invoke window.analytics.page() for you.

This involves identifying if the last page call was made while the User was on the same location.pathname as the previous page call. If they appear to be the same, we will skip the duplicate call.

This plugin can also leverage Gatsby’s onRouteUpdate API in the gatsby-browser.js file (link) if you so desire. This is accomplished by setting (or leaving) the trackPageOnRouteUpdate to true. If this option is enabled, we will make a page call every time that the onRouteUpdate handler is called. That includes the initial route, and any route changes.

If you only want to use this plugin to inject and load Segment, and not make any page calls, this can be done. Just set trackPage: false. But then you will have to make page calls yourself in your gatsby-browser.js file, like this:

exports.onRouteUpdate = () => {
  window.analytics && window.analytics.page();
};

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4