在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):holidaycheck/react-google-tag-manager开源软件地址(OpenSource Url):https://github.com/holidaycheck/react-google-tag-manager开源编程语言(OpenSource Language):JavaScript 100.0%开源软件介绍(OpenSource Introduction):react-google-tag-managerThis repository contains a react based implementation for Google's Tag Manager snippet. Motivation & ExpectationWe like to use Google's Tag Manager in our React Stack. We wrap it into a component because it makes it testable. And based on our agreement every component needs to be tested. Other requirements for the GTM implementation are:
How to useTo use it in your project run import React from 'react';
import gtmParts from 'react-google-tag-manager';
class GoogleTagManager extends React.Component {
componentDidMount() {
const dataLayerName = this.props.dataLayerName || 'dataLayer';
const scriptId = this.props.scriptId || 'react-google-tag-manager-gtm';
if (!window[dataLayerName]) {
const gtmScriptNode = document.getElementById(scriptId);
eval(gtmScriptNode.textContent);
}
}
render() {
const gtm = gtmParts({
id: this.props.gtmId,
dataLayerName: this.props.dataLayerName || 'dataLayer',
additionalEvents: this.props.additionalEvents || {},
previewVariables: this.props.previewVariables || false,
scheme: this.props.scheme || 'https:',
});
return (
<div>
<div>{gtm.noScriptAsReact()}</div>
<div id={this.props.scriptId || 'react-google-tag-manager-gtm'}>
{gtm.scriptAsReact()}
</div>
</div>
);
}
}
GoogleTagManager.propTypes = {
gtmId: React.PropTypes.string.isRequired,
dataLayerName: React.PropTypes.string,
additionalEvents: React.PropTypes.object,
previewVariables: React.PropTypes.string,
scriptId: React.PropTypes.string,
scheme: React.PropTypes.string,
};
export default GoogleTagManager; You can render this later simply by
In this example the google tag manager id, the dataLayer name, additional events and the script id where gtm script should be mounted are configurable through props:
Notes:
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论