ตอบสนอง + เราเตอร์ + Google เครื่องจัดการแท็ก

ฉันใช้เวลาเล็กน้อยในการพัฒนา MVP ที่ Quickcypher.com ฉันต้องการเริ่มใส่การวิเคราะห์ และมันใช้งานได้ดีกับการติดตามการเข้าชมทั้งหมด แต่สิ่งต่างๆ กลับแย่ลงเมื่อฉันพยายามติดตาม URL ที่แตกต่างกันบนไซต์ของฉันที่ใช้ React Router

แนวทางของฉันคือ: ตั้งค่าแท็ก GA ที่เริ่มทำงานในบางหน้า โดยใช้ทริกเกอร์สำหรับเหตุการณ์ "การดูหน้าเว็บ" ที่กำหนดเอง เมื่อสิ่งต่างๆ เกิดขึ้น ฉันจะตั้งค่าหน้าฟิลด์เป็น "/rap" เป็นต้น ฉันกำลังเริ่มเหตุการณ์ในวิธี "componentDidMount" ขององค์ประกอบระดับบนสุดสำหรับแต่ละมุมมองของฉัน เมื่อใช้ดีบักเกอร์ ฉันเห็นเหตุการณ์เกิดขึ้นตามที่คาดไว้ แต่ตลอดชีวิตของฉัน ฉันไม่สามารถให้ GA รับทราบเหตุการณ์ได้ GA ทำงานตามที่คาดไว้เมื่อฉันลดความซับซ้อนของแท็กให้เริ่มทำงานใน "ทุกหน้า" ดังนั้นฉันจึงคิดว่ามันเกี่ยวข้องกับ React

มีใครประสบความสำเร็จในการดำเนินการนี้หรือประสบปัญหาที่คล้ายกันหรือไม่ แนวทางของฉันผิดทั้งหมดหรือเปล่า? หวังว่าจะได้รับคำแนะนำบ้าง...ไชโย!


reactjs react-router google-tag-manager google-analytics analytics
person SleepyProgrammer    schedule 07.04.2015    source แหล่งที่มา

คำตอบ (2)


arrow_upward
76
arrow_downward

มางานปาร์ตี้ที่นี่สายไปหน่อย แต่เราเตอร์ตอบสนองไม่ควรต้องใช้รหัสพิเศษในการรวมเข้ากับ GTM เพียงวางสคริปต์ GTM บนหน้าเว็บของคุณ (ทันทีหลังจากแท็กเปิด <body> ตามที่แนะนำ) และปล่อยให้แอปของคุณทำงานได้ตามปกติ

ใน GTM ให้สร้างทริกเกอร์ที่กำหนดเองสำหรับการเปลี่ยนแปลงประวัติ

ตัวอย่างทริกเกอร์ GTM

คุณสามารถเริ่มใช้งานได้กับการเปลี่ยนแปลงประวัติทั้งหมด

การเปลี่ยนแปลงประวัติทั้งหมด

หรือเฉพาะบางส่วนเท่านั้น เฉพาะในชื่อโฮสต์ที่ใช้งานจริงของคุณเท่านั้น เป็นต้น

เฉพาะการใช้งานจริง

จากนั้นเพิ่มแท็กสำหรับ Google Analytics ของคุณ (หรืออะไรก็ตาม) และกำหนดค่าให้เริ่มทำงานในเหตุการณ์การเปลี่ยนแปลงประวัติของคุณโดยคลิก "เพิ่มเติม" ใต้ "เริ่มทำงาน" และเลือกทริกเกอร์ที่สร้างขึ้นด้านบน

ตัวอย่าง GA

สิ่งสำคัญคือต้องเปลี่ยน การตั้งค่าขั้นสูง ของแท็กของเราให้เริ่มทำงานหนึ่งครั้งต่อเหตุการณ์ แทนที่จะเป็นหนึ่งครั้งต่อหน้า หากไม่มีสิ่งนี้ แท็กจะเริ่มทำงานเมื่อมีการโหลดหน้าเว็บครั้งแรกเท่านั้น

หนึ่งครั้งต่อเหตุการณ์

person chrisguitarguy    schedule 31.05.2016
comment
นี่ควรเป็นคำตอบที่ยอมรับได้ เรียบง่ายและได้ผล หากคุณต้องการตัวอย่างเหตุการณ์และสิ่งต่างๆ ที่ซับซ้อนกว่านี้ นั่นก็อีกเรื่องหนึ่ง - person kjonsson; 07.06.2016
comment
@doublecheeseburger คุณสามารถทำกิจกรรมทั้งหมดใน GTM ได้เช่นกัน แต่มันค่อนข้างยุ่งยาก - person chrisguitarguy; 05.07.2016
comment
@chrisguitarguy ในประวัติการเปลี่ยนแปลง ตอบสนองไปที่เซิร์ฟเวอร์ (ajax) และหน้าอัปเดตหลังจากผลลัพธ์ถูกส่งกลับจากเซิร์ฟเวอร์ แต่ก่อนหน้านั้น การเปลี่ยนแปลงประวัติจะเริ่มทำงานและโค้ดแท็กจะถูกดำเนินการ เราจะจัดการกับสถานการณ์ดังกล่าวและรอจนกว่า React จะอัพเดตเพจได้อย่างไร? - person Waqas Malik; 13.07.2017
comment
@WaqasMalik ฉันขอแนะนำให้ใช้ GTM Data Layer (เพียงอาร์เรย์ส่วนกลาง) และผลักดันเหตุการณ์ที่กำหนดเองที่สามารถรับฟังเพื่อทริกเกอร์ GA (หรือแท็กอื่น ๆ ) ใน GTM - person chrisguitarguy; 13.09.2017
comment
ดูเหมือนจะไม่ทริกเกอร์การโหลดหน้าเว็บ ฉันเชื่อว่าจำเป็นต้องเปิดใช้งานทั้งหน้าทั้งหมดและการเปลี่ยนแปลงประวัติ - person Gabriel R.; 17.04.2019

arrow_upward
7
arrow_downward

อาจเป็นเพราะการกำหนดค่าบัญชี Google Analytics ของคุณไม่ถูกต้อง แต่สมมติว่าคุณสามารถเริ่มเหตุการณ์การดูหน้าเว็บเริ่มต้นกลับไปที่ GA ได้ ต่อไปนี้เป็นสูตรที่ใช้แตะ willTransitionTo hook ของ react-router นอกจากนี้ยังใช้ react-google-analytics อีกด้วย ครั้งแรก npm install react-google-analytics

จากนั้นกำหนดค่าแอปของคุณดังนี้:

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
ฉันดูเหมือนจะไม่ทำงาน ไม่มีวิธีการทำงานบนเราเตอร์ ฉันใช้ ReactRouter ซึ่งควรเป็นกรณีของคุณเช่นกัน วิธีการนี้เลิกใช้แล้วหรือไม่? - person sachinjain024; 07.03.2016
comment
ใช่. React Router เลิกใช้. run ตั้งแต่ React Router 1.0.0! github.com/reactjs/react-router/ blob/master/upgrade-guides/ - person Edoardo L'Astorina; 24.03.2016