Bereaksi + Router + Google Pengelola Tag

Saya telah menghabiskan sedikit waktu mengembangkan MVP di quickcypher.com. Saya ingin mulai memasukkan beberapa analitik, dan itu berfungsi dengan baik hanya untuk melacak total kunjungan, tetapi segalanya menjadi kacau ketika saya mencoba melacak URL yang berbeda di situs saya yang menggunakan React Router.

Pendekatan saya adalah ini: Siapkan tag GA yang diaktifkan di beberapa laman, menggunakan pemicu untuk peristiwa "tayangan laman" khusus. Ketika sesuatu terjadi, saya akan mengatur halaman lapangan ke "/ rap" misalnya. Saya menjalankan acara dalam metode "componentDidMount" pada komponen tingkat atas untuk setiap tampilan saya. Dengan menggunakan debugger, saya melihat acara tersebut menyala seperti yang diharapkan, tetapi seumur hidup saya, saya tidak bisa membuat GA mengakui acara tersebut. GA berfungsi seperti yang diharapkan ketika saya menyederhanakan tag untuk diaktifkan di "semua halaman", jadi saya berasumsi ini ada hubungannya dengan React.

Adakah yang berhasil menerapkan ini atau mengalami masalah serupa? Apakah pendekatan saya salah? Berharap untuk mendapatkan bimbingan... bersorak!


reactjs react-router google-tag-manager google-analytics analytics
person SleepyProgrammer    schedule 07.04.2015    source sumber

Jawaban (2)


arrow_upward
76
arrow_downward

Agak terlambat ke pesta di sini, tetapi router reaksi seharusnya tidak memerlukan kode khusus untuk berintegrasi dengan GTM. Letakkan saja skrip GTM di halaman Anda (segera setelah tag <body> pembuka seperti yang disarankan) dan biarkan aplikasi Anda berjalan seperti biasa.

Di GTM buat pemicu khusus untuk perubahan riwayat.

Contoh Pemicu GTM

Anda dapat mengaktifkannya pada semua perubahan riwayat.

semua riwayat berubah

Atau hanya pada sebagian saja. Hanya pada nama host produksi Anda, misalnya.

hanya pada produksi

Kemudian tambahkan tag untuk Google Analytics Anda (atau apa pun) dan konfigurasikan untuk mengaktifkan peristiwa perubahan riwayat Anda dengan mengklik "Lainnya" di bawah "Aktifkan" dan pilih pemicu yang dibuat di atas.

Contoh GA

Penting juga untuk mengubah Setelan Lanjutan tag kami agar diaktifkan satu kali per peristiwa, bukan satu kali per laman. Tanpa ini, tag hanya akan diaktifkan saat halaman pertama dimuat.

sekali per acara

person chrisguitarguy    schedule 31.05.2016
comment
Ini harus menjadi jawaban yang diterima. Sederhana dan berhasil. Jika Anda menginginkan contoh yang lebih rumit dengan peristiwa dan hal-hal lain, itu cerita lain. - person kjonsson; 07.06.2016
comment
@doublecheeseburger Anda juga dapat mengadakan semua acara di GTM, tetapi ini bisa menjadi sangat rumit. - person chrisguitarguy; 05.07.2016
comment
@chrisguitarguy Pada riwayat perubahan, reaksi masuk ke server (ajax) dan perbarui halaman setelah hasil dikembalikan dari server. Namun sebelum itu, perubahan riwayat diaktifkan dan kode tag dijalankan. Bagaimana kita bisa menangani situasi seperti itu dan menunggu sampai reaksi memperbarui halaman? - person Waqas Malik; 13.07.2017
comment
@WaqasMalik Saya sarankan menggunakan Lapisan Data GTM (hanya array global) dan memasukkan peristiwa khusus yang dapat didengarkan untuk memicu GA (atau tag lainnya) di GTM. - person chrisguitarguy; 13.09.2017
comment
Ini sepertinya tidak terpicu saat memuat halaman. Saya yakin Semua Halaman dan Perubahan Riwayat harus diaktifkan. - person Gabriel R.; 17.04.2019

arrow_upward
7
arrow_downward

Hal ini mungkin disebabkan oleh kesalahan konfigurasi akun Google Analytics Anda, namun dengan asumsi bahwa Anda dapat mengaktifkan kembali peristiwa tayangan laman awal ke GA, berikut adalah resep yang memanfaatkan kait willTransitionTo router reaksi. Ia juga menggunakan react-google-analytics. Pertama npm install react-google-analytics.

Kemudian konfigurasikan aplikasi Anda seperti ini:

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
var RouteHandler = Router.RouteHandler;
var ga = require('react-google-analytics');
var GAInitiailizer = ga.Initializer;

// some components mapped to routes
var Home = require('./Home');
var Cypher = require('./Cypher');

var App = React.createClass({
  mixins: [Router.State],
  statics: {
    willTransitionTo: function(transition, params, query, props) {
      // log the route transition to google analytics
      ga('send', 'pageview', {'page': transition.path});
    }
  },
  componentDidMount: function() {
    var GA_TRACKING_CODE = 'UA-xxxxx';
    ga('create', GA_TRACKING_CODE);
    ga('send', 'pageview');
  },
  render: function() {
    return (
      <div>
        <RouteHandler />
        <GAInitiailizer />
      </div>
    );
  }
});

var routes = (
  <Route path="/" handler={App} >
    <DefaultRoute handler={Home} />
    <Route name="cypher" path="/cypher" handler={Cypher} />
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler />, document.body);
});

module.exports = App;
person pxwise    schedule 29.04.2015
comment
Sepertinya saya tidak berhasil. Tidak ada metode yang dijalankan di Router. Saya menggunakan ReactRouter yang seharusnya menjadi kasus Anda juga. Apakah metode ini tidak digunakan lagi? - person sachinjain024; 07.03.2016
comment
Ya. React Router dihentikan .run pada React Router 1.0.0! github.com/reactjs/react-router/ gumpalan/master/panduan pemutakhiran/ - person Edoardo L'Astorina; 24.03.2016