如何为电子商务者实现react-google-tag-manager？

Question

不久前我一直在编程，对我来说很难理解如何结合这两个指令？

这个：

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 gtmId='GTM-12345' />

这是官方指令中的代码：

dataLayer = [{
'transactionId': '1234',
'transactionAffiliation': 'Acme Clothing',
'transactionTotal': '11.99',
'transactionTax': '1.29',
'transactionShipping': '5',
'transactionProducts': [{
    'sku': 'DD44',
    'name': 'T-Shirt',
    'category': 'Apparel',
    'price': '11.99',
    'quantity': '1'
}] }];

我也不明白为什么需要这些选项：AdditionalEvents，previewVariables，scriptId和scheme。