Where should analytics script be put in a React app?

Question

Barion Pixel requires to put in code in my React app. When I put it in App.js or index.js, it raise an error. Do you have any idea where to put it? In index.html inhas no effect. Strange.

https://docs.barion.com/Implementing_the_Base_Barion_Pixel

<script>
        // Create BP element on the window
        window["bp"] = window["bp"] || function () {
            (window["bp"].q = window["bp"].q || []).push(arguments);
        };
        window["bp"].l = 1 * new Date();

        // Insert a script tag on the top of the head to load bp.js
        scriptElement = document.createElement("script");
        firstScript = document.getElementsByTagName("script")[0];
        scriptElement.async = true;
        scriptElement.src = 'https://pixel.barion.com/bp.js';
        firstScript.parentNode.insertBefore(scriptElement, firstScript);

        // Send init event
        bp('init', 'addBarionPixelId', 'BP-0000000000-00');
    </script>

I just show how error looks like:

Does this answer your question? [Adding script tag to React/JSX](https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx) — Agney, Apr 17 '20 at 19:51

score 0 · Answer 1 · answered Apr 17 '20 at 19:34

You can try using dangerouslySetInnerHTML:

    <script
      dangerouslySetInnerHTML={{
        __html: `
        // Create BP element on the window
        window["bp"] = window["bp"] || function () {
            (window["bp"].q = window["bp"].q || []).push(arguments);
        };
        window["bp"].l = 1 * new Date();

        // Insert a script tag on the top of the head to load bp.js
        scriptElement = document.createElement("script");
        firstScript = document.getElementsByTagName("script")[0];
        scriptElement.async = true;
        scriptElement.src = 'https://pixel.barion.com/bp.js';
        firstScript.parentNode.insertBefore(scriptElement, firstScript);

        // Send init event
        bp('init', 'addBarionPixelId', 'BP-0000000000-00');`
      }}
    />

Where should analytics script be put in a React app?

1 Answers1