How to add DocHead => Analytics @ Flow-router-ssr


#1

Can’t figure out how to add the analytics code using DocHead. Documentation assume that you more or less already understand it.

So where do i add ?

var gaScript = 'https://www.google-analytics.com/analytics.js';
DocHead.loadScript(gaScript, function() {
    // Google Analytics loaded
    ga('create', 'UA-XXXX-Y', 'auto');
    ga('send', 'pageview');
});

#2

Okay. This is just an example use of DocHead to load an script inside a component. You can put this code anywhere inside your component.

(Make sure to only run it once)

But adding the analytics code is not that hard. Create an html file and put the analytics code inside the tag and run ga code inside Meteor.startup()


#3

Am not using any HTML files. Did use it at my first try when doing tutorial on Meteor but then did use your Flow router ssr example at as my starting point and have continued built my project from that using only jsx for both layout and function components.

Trying to set other Meta works well in the source, but on the UI i get render error using a component like this

Meta = React.createClass({

  getDefaultProps: function () {
    'use strict';
    return {
      title: 'Error error'
    };
  },

  propTypes: {
    title: React.PropTypes.string
  },

  render() {

    var title = this.props.title;
    var metaInfo = {name: "viewport", content: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"};

    DocHead.addMeta(metaInfo);
    DocHead.setTitle(title);

  }

});

Putting it in parent components return will write out source but get unknow error in UI, Have a feeling am doing something wrong here and that it should not be put in render -> return @ parentComponent

Do you know any working example i can take a look at?

This is my error, guess it should not be returned in Parent render… where should it go ?

 if (format === undefined) {
      error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
    } else {
      var args = [a, b, c, d, e, f];
      var argIndex = 0;
      error = new Error('Invariant Violation: ' + format.replace(/%s/g, function () {
        return args[argIndex++];
      }));
    }

    error.framesToPop = 1; // we don't care about invariant's own frame
    throw error;
  }

#4

As already mentioned, as it should run once, render would not be the best place.
ComponentDidMount sounds better.
Still it is once per whole application run, so that mounting of whole app or Meter.startup sounds more natural.
I dont do React, so hard to help.