How to configure the GTAG User Id in external JS file by picking PHP variable?

Question

As PHP use in the backend, to configure the inline user id just give a echo of the variable $userId, for ex:

   if (isset($userId)) {
        $gacode = "ga('create', 'xxx', 'auto', {'userId': $userId});";
        echo sprintf($gacode, $userId);
        }     
   else {
        $gacode = "ga('create', 'xxx', 'auto');";
        echo sprintf($gacode);
        }

But how I want to use the tracking code in a file .js external (called at the bottom of the page’s HTML .php), instead of using inline, that doesn’t work.

The tracking code is basically this:

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'XXXXXXX', { 'user_id': 'USER_ID' });

This code is in the file I created gtag_user.js, I placed below the tagmanager lib (at the end of the page where the variable $userId is declared).

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX"></script>
<script src="https://www.site.com/view/js/gtag_user.js"></script>

Where USER_ID must be equal to the variable $userId PHP. I made a few attempts with ajax but it didn’t work either. Is it possible? How?

Answer 1

As the file containing the HTML is .php you can do this:

<script>const USER_ID = '<?php echo $userId; ?>';</script> <!-- aqui é declarada a constante -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX"></script>
<script src="https://www.site.com/view/js/gtag_user.js"></script>

In the script you need to change and put the constant in the object:

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'XXXXXXX', { 'user_id': USER_ID }); // retirei as aspas

This way you can use anywhere you need it. Example:

<script>

    if(USER_ID == ''){
        // usuario não está logado
    } else {
        // verifica o usuário
    }

</script>

Another way is to generate the script with php:

// user id
$userId = 12345;
// arquivo JS
$arquivo = file_get_contents("https://www.site.com/view/js/gtag_user.js");
// substitui tudo o que tier USER_ID pelo valor $userId
$script = str_replace("USER_ID", $userId, $arquivo);
// mostra o resultado
echo "<script>$script</script>";

Using cookies

In the comments the OP revealed another way to work using cookies. To illustrate, I created the following example:

php generates the cookie:

    if (isset($userId)) {
        setcookie("USER_ID", $userId, time()+3600, "/");
    }   

And the value is recovered by javascript:

    const getUserId = () => {
        let val = null;
        decodeURIComponent(document.cookie).split(";").forEach(item => {
            let i = item.split("=");
            if(i[0] === 'USER_ID'){
                val = i[1].trim();
            }
        });
        return val;
    } 

    const USER_ID = getUserId(); // recupera o valor

With that, the constant USER_ID can be used in other scripts.