Как реализовать реакцию-google-tag-manager для ecommers?

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'
}] }];

Я также не понимаю, зачем нам нужны эти параметры: дополнительные события, переменные предварительного просмотра, идентификатор сценария и схема.