### Installing React GTM Module (Bash)

Source: https://github.com/sooro-io/react-gtm-module/blob/main/README.md

Instructions on how to install the @sooro-io/react-gtm-module package using either npm or yarn package managers. Requires Node.js and a package manager installed.

```bash
npm install @sooro-io/react-gtm-module
# OR
yarn add @sooro-io/react-gtm-module
```

--------------------------------

### Migrating to New Module (Bash)

Source: https://github.com/sooro-io/react-gtm-module/blob/main/README.md

Instructions for migrating from the original react-gtm-module to the @sooro-io/react-gtm-module by uninstalling the old package and its types, then installing the new one using npm. Requires Node.js and npm.

```bash
npm uninstall react-gtm-module @types/react-gtm-module
npm install @sooro-io/react-gtm-module
```

--------------------------------

### Uninstalling and Installing React GTM Modules

Source: https://github.com/sooro-io/react-gtm-module/blob/main/README.md

Provides the command-line steps using yarn to remove the old `react-gtm-module` package along with its TypeScript types and install the new `@sooro-io/react-gtm-module`.

```shell
yarn remove react-gtm-module @types/react-gtm-module
yarn install @sooro-io/react-gtm-module
```

--------------------------------

### Configuring Initial Events (JavaScript)

Source: https://github.com/sooro-io/react-gtm-module/blob/main/README.md

Provides an example of using the events property within the tagManagerArgs object to push additional events to the dataLayer during TagManager initialization, specifically after the gtm.js event. Requires TagManager.initialize.

```javascript
const tagManagerArgs = {
    gtmId: 'GTM-xxxxxx',
    events: [
        {
            event: 'consent_loaded',
            consentAnalytics: true,
            consentAds: false,
            consentPreferences: true,
        },
    ],
}
```

--------------------------------

### Initializing React GTM Module (JavaScript)

Source: https://github.com/sooro-io/react-gtm-module/blob/main/README.md

Shows how to import the TagManager module and initialize it with a Google Tag Manager container ID. This should be done in the main application entry point, like index.js. Requires the module to be installed and a valid GTM ID.

```javascript
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'

// start changes
import TagManager from '@sooro-io/react-gtm-module'

const tagManagerArgs = {
    gtmId: 'GTM-xxxxxx', // replace with your GTM container ID
}

TagManager.initialize(tagManagerArgs)
// end changes

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
)
```

--------------------------------

### Configuring Initial DataLayer (JavaScript)

Source: https://github.com/sooro-io/react-gtm-module/blob/main/README.md

Provides an example of including initial dataLayer properties (currency, language) directly within the tagManagerArgs object when initializing the TagManager module. These properties are added before the gtm.js event. Requires TagManager.initialize.

```javascript
const tagManagerArgs = {
    gtmId: 'GTM-xxxxxx',
    dataLayer: {
        currency: 'USD',
        language: 'en',
    },
}
```

--------------------------------

### Configuring GTM Environments (JavaScript)

Source: https://github.com/sooro-io/react-gtm-module/blob/main/README.md

Demonstrates how to include the auth and preview parameters in the tagManagerArgs object to target specific Google Tag Manager environments during initialization. These values must be obtained from the GTM environment snippet. Requires TagManager.initialize and a configured GTM environment.

```javascript
const tagManagerArgs = {
    gtmId: 'GTM-xxxxxx',
    auth: '6sBOnZx1hqPcO01xPOytLK', // add here the value of gtm_auth
    preview: 'env-staging', // add here the value of gtm_preview
}
```

--------------------------------

### Configuring CSP Nonce (JavaScript)

Source: https://github.com/sooro-io/react-gtm-module/blob/main/README.md

Shows how to add a nonce property to the tagManagerArgs object during TagManager initialization to support Content Security Policy (CSP). The nonce value must match the value generated on the server. Requires TagManager.initialize and a server-generated nonce.

```javascript
const tagManagerArgs = {
    gtmId: 'GTM-xxxxxx',
    nonce: 'KCenr5lELncZ6JJlHmerd9aIjddJfBEZ', // from you server
}
```

--------------------------------

### Updating React GTM Module Import Path

Source: https://github.com/sooro-io/react-gtm-module/blob/main/README.md

Illustrates the necessary change in the import statement to reference the new `@sooro-io/react-gtm-module` package instead of the old `react-gtm-module`.

```diff
- import TagManager from 'react-gtm-module'
+ import TagManager from '@sooro-io/react-gtm-module'
```

--------------------------------

### Configuring Custom GTM Source URL (JavaScript)

Source: https://github.com/sooro-io/react-gtm-module/blob/main/README.md

Demonstrates how to specify a custom URL for the GTM script using the source property in the tagManagerArgs object during TagManager initialization. This is used when serving Google scripts from a tagging server. Requires TagManager.initialize and a valid custom script URL.

```javascript
const tagManagerArgs = {
    gtmId: 'GTM-xxxxxx',
    source: 'https://gtm.example.com/gtm.js', // URL including script!
}
```

--------------------------------

### Updating React GTM Module Initialization Arguments

Source: https://github.com/sooro-io/react-gtm-module/blob/main/README.md

Demonstrates the required modification when initializing the React GTM module, specifically changing the `events` property to `dataLayer` within the configuration object passed to the initialization function.

```diff
const tagManagerArgs  = {
    gtmId: 'GTM-xxxxxx',
-   events: {
-       currency: 'USD',
-       language: 'en',
-   },
+   dataLayer: {
+       currency: 'USD',
+       language: 'en',
+   },
}
```

--------------------------------

### Pushing Data to Custom DataLayer (JavaScript)

Source: https://github.com/sooro-io/react-gtm-module/blob/main/README.md

Demonstrates how to specify a custom dataLayer name when pushing data using TagManager.dataLayer, useful for scenarios requiring multiple dataLayers. Requires the TagManager module and configuration for multiple dataLayers if applicable.

```javascript
TagManager.dataLayer({
    dataLayer: {
        event: 'identified',
        userId: 'dc26b3de-5186-4fa5-a89a-60762111a5b4',
    },
    dataLayerName: 'personalInformation',
})
```

--------------------------------

### Pushing Data to DataLayer (JavaScript)

Source: https://github.com/sooro-io/react-gtm-module/blob/main/README.md

Illustrates how to use the TagManager.dataLayer function within a React component to push an event and associated data to the Google Tag Manager dataLayer. It shows how to set and unset properties. Requires the TagManager module to be imported.

```javascript
import React from 'react'
import TagManager from 'react-gtm-module'

const Home = () => {
    TagManager.dataLayer({
        dataLayer: {
            event: 'home_viewed',
            // add other properties to set a value
            // to unset a property use undefined as value
        },
    })

    return (
        <div>
            <h1>Home</h1>
        </div>
    )
}

export default Home
```

--------------------------------

### Configuring Custom DataLayer Name (JavaScript)

Source: https://github.com/sooro-io/react-gtm-module/blob/main/README.md

Shows how to set a custom name for the dataLayer object using the dataLayerName property within the tagManagerArgs object during TagManager initialization. Requires TagManager.initialize.

```javascript
const tagManagerArgs = {
    gtmId: 'GTM-xxxxxx',
    dataLayerName: 'personalInformation',
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.