I am using reactjs and react GA for google analytic integration i have the following error in the console:
Uncaught (in promise) Error: _registerComponent(...): Target container is not a DOM element.
at invariant (bundle.js:2844)
at Object._renderNewRootComponent (bundle.js:41047)
at Object._renderSubtreeIntoContainer (bundle.js:41137)
at Object.renderSubtreeIntoContainer [as unstable_renderSubtreeIntoContainer] (bundle.js:41079)
at OverlayTrigger.renderOverlay (bundle.js:85430)
at OverlayTrigger.componentDidUpdate (bundle.js:85319)
at measureLifeCyclePerf (bundle.js:90119)
at bundle.js:90773
at CallbackQueue.notifyAll (bundle.js:39950)
at ReactReconcileTransaction.close (bundle.js:95219)
I am trying to resolve the issue using several resources.But i couldn't find a solution.
Code: Videoplayer.jsx
import React, {Component} from 'react';
import {Link} from 'react-router';
import videojs from 'video.js';
import {Image, Modal} from 'react-bootstrap/lib';
import 'videojs-contrib-hls';
import GA from '../GA.jsx';
const liveVideoUrl = 'http://vid-129002.hls.chinanetcenter.broadcastapp.agoraio.cn/live/';
class VideoPlayer extends Component {
constructor(props) {
super(props);
this.hideModal = this.hideModal.bind(this);
this.state = {showPopup: false};
this.broadcastData = this.props.broadcastData;
this.videoUrl = this.broadcastData.recordedUrl;
this.videoType = 'video/mp4';
let videoStreamName = this.broadcastData.streamId;
this.live = null;
if (this.broadcastData.status !== 'RECORDED') {
this.videoUrl = liveVideoUrl + videoStreamName + '/playlist.m3u8';
this.live = (<Image className="live-logo" src="/images/svg/live.svg"/>);
this.videoType = 'application/x-mpegURL';
}
}
componentDidMount () {
const
self = this,
options = {
autoplay: true,
controls: true,
preload: "auto",
hls: {
withCredentials: true
}
};
const playerTarget = 'play_video';
this.player = videojs(this.videoNode, options);
this.player.src({
src: this.videoUrl,
type: this.videoType,
});
this.player.on('ended', () => {
self.setState({showPopup: true});
});
if (this.player.play()) {
GA.ManualGA(playerTarget);
}
}
componentWillUnmount() {
this.player && this.player.dispose();
this.player = null;
}
hideModal() {
this.setState({showPopup: false});
}
render() {
let screenShotUrl = this.broadcastData.screenShotUrl;
let downloadLinkNode = [];
if (screenShotUrl == null) {
screenShotUrl = '/images/default-screenshot.png'
}
const style = {
"backgroundImage": "url(" + screenShotUrl + ")"
};
if (this.showBanner) {
if (this.isIphone) {
downloadLinkNode.push(<Link key="appStore" className="btn btn-default btn-home-bg-one" target="_blank" to={"https://itunes.apple.com/us/app/speakerswire/id100000?mt=8"}>
<Image src="/images/appstore.png" alt="google play" data-ga="app_dld_aftervideo_ios_click" /></Link>);
} else {
downloadLinkNode.push(<Link key="playStore" className="btn btn-default btn-home-bg-two" target="_blank" to={"https://play.google.com/store/apps/details?id=com.kryptolabs.android.speakerswire&hl=en"}>
<Image src="/images/playstore.png" alt="google play" data-ga="app_dld_aftervideo_android_click"/></Link>);
}
} else {
downloadLinkNode.push(<Link key="appStore" className="btn btn-default btn-home-bg-one" target="_blank" to={"https://itunes.apple.com/us/app/speakerswire/id100000?mt=8"}>
<Image src="/images/appstore.png" alt="google play" data-ga="app_dld_aftervideo_ios_click"/>
</Link>
);
downloadLinkNode.push(<Link key="playStore" className="btn btn-default btn-home-bg-two" target="_blank" to={"https://play.google.com/store/apps/details?id=com.kryptolabs.android.speakerswire&hl=en"}>
<Image src="/images/playstore.png" alt="google play" data-ga="app_dld_aftervideo_android_click"/>
</Link>
);
}
return (
<div>
<div className="blur-bg" style={style}/>
<video className="video-js vjs-sublime-skin vjs-big-play-centered" data-setup='{ "inactivityTimeout": 0 }' ref={ r => { this.videoNode = r; } }/>
{this.live}
<Modal show={this.state.showPopup} dialogClassName="app-download-play-end" onHide={this.hideModal}>
<Modal.Header closeButton />
<Modal.Body>
<Image src="/images/swoo-logo-popup.svg" className="logo"/><br/>
<Image src="/images/svg/logo_black.svg"/>
<div className="title">To view more broadcasts, install SWOO app</div>
<h5>Get the App</h5>
{downloadLinkNode}
</Modal.Body>
</Modal>
</div>
);
}
}
export default VideoPlayer
GA.JSX
function GA(ReactGA) {
const objects = ['channel_click', 'channel_home_click', 'share_btn_click', 'share_btn_click', 'terms_cond_click', 'privacy_policy_click', 'discover_btn_click', 'profile_btn_click', 'app_dld_close_btn_click', 'top_broadcaster_click', 'app_dld_andoid_btn_click', 'broadcast_live_click', 'broadcast_recorded_click',
'app_dld_ios_btn_click', 'app_dld_ios_homebtn_click', 'app_dld_andoid_homebtn_click', 'app_dld_aftervideo_android_click', 'app_dld_aftervideo_ios_click', 'play_video', 'pause_video'];
ReactGA.initialize('UA-96792697-3');''
document.addEventListener('click',(e) => {
let target = e.target.getAttribute('data-ga');
let additional_value = e.target.getAttribute('data-value');
if (objects.indexOf(target) >= 0) {
ReactGA.event({category:'swoo', action: target});
}
});
function ManualGA(target) {
ReactGA.event({category:'swoo', action: target});
}
}
export default GA;
Index.jsx:
import React from 'react';
import {render} from 'react-dom';
import {Router, Route, IndexRoute, browserHistory, Redirect} from 'react-router';
import {Provider} from 'react-redux';
import Layout from './components/layout/layout.jsx';
import HomePageContainer from './containers/homePageContainer.jsx';
import SearchPageContainer from './containers/searchPageContainer.jsx';
import configureStore from './store/configureStore.jsx';
import BroadcastDetailContainer from './containers/broadcastDetailContainer.jsx';
import GA from './components/GA.jsx';
//import ManualGA from './components/GA.jsx';
import ReactGA from 'react-ga';
/////////-- Static Pages --///////////
import PrivacyPolicyContainer from './containers/privacyPolicyContainer.jsx';
import PrivacyPolicyforwebContainer from './containers/privacyPolicyforwebContainer.jsx';
import TermsofServiceContainer from './containers/termsOfService.jsx';
import TermsofServiceforwebContainer from './containers/termsofServiceforwebContainer.jsx';
import NotFoundPage from './containers/notFoundPage.jsx';
require("./stylesheets/customResponsive.css");
require("./stylesheets/customStyle.css");
require("./stylesheets/videojs.css");
ReactGA.initialize('UA-96791297-3');
GA(ReactGA);
//ManualGA(ReactGA);
/////////-- End Static Pages --///////////
const store = configureStore();
function fireTracking() {
ReactGA.pageview(window.location.pathname);
}
render
(
<Provider store={store}>
<Router onUpdate={fireTracking} history={browserHistory}>
<Route component={Layout}>
<Redirect from='/' to='/home'/>
<Route path="/home" component={HomePageContainer}/>
<Route path="/search" component={SearchPageContainer}/>
<Route path="/broadcast/:broadcastId" component={BroadcastDetailContainer}/>
<Route path={"/privacy-policy"} component={PrivacyPolicyContainer}/>
<Route path={"/privacy"} component={PrivacyPolicyforwebContainer}/>
<Route path={"/terms-of-service"} component={TermsofServiceContainer}/>
<Route path={"/tos"} component={TermsofServiceforwebContainer}/>
<Route path="*" component={NotFoundPage} />
</Route>
</Router>
</Provider>,
document.getElementById('container')
);
In videoPlayer.jsx I am getting the abbove error at
if (this.player.play()) {
GA.ManualGA(playerTarget);
}
