How to use Yandex.Metrika in Meteor+React app?

Question

I have a Meteor app, all UI components are built with React. I use FlowRouter for routing.

Now I want to add analytics with Yandex.Metrika service.

I found this package for React: https://github.com/narkq/react-yandex-metrika

But I how I have to use it? For what reason do I need <YM /> component from this example?

import {Initializer as YM} from 'react-yandex-metrika';

// Use the initializer to add the script to your page somewhere.
var MyComponent = React.createClass({
  render: function() {
    return (
      <div>
        // SNIP
          <YM />
        // SNIP
      </div>
    );
  }
});

And where should I initialize the tracker object? I read this:

// This is supposed to be executed only in browser and only once.
// Because of that, the most sensible place for this code is right after you javascript bundle.
ym.init([987654321]);

But what is javascript bundle and where should I place my im.init(id) code?

Actually all what I need is to have funsctions to send data to Metrika, such as hit (pageview analog rom ga), reachGoal and so on.

thank you for your answers!

Answer 1

For what reason do I need component from this example?

You need it to load metrika's main code

How metrika works: webmaster (you) inserts small piece of js code (loader) to all pages. this code append async script with main code (it's a bit bigger than loader) and create instance of metrika object ('counter') - new Ya.Metrika(...params). Instance will be available in global variable named yaCounterXXXXX, where XXXXX is your counter's id.

So, <YM /> component is loader from previous paragraph.

Actually all what I need is to have funsctions to send data to Metrika, such as hit (pageview analog rom ga), reachGoal and so on.

There is doc about that at the bottom of readme. But I don't see filter by counter id for that methods. Maybe I make a pr to add this functionality. In any case you can use global variable yaCounterXXXXX like this yaCounterXXXXX.hit(url, params) or yaCounterXXXXX.reachGoal(goalId, params)

I hope I helped you.