Configuring User-ID in Google Analytics via Custom Script on Softr

Custom Coding
1

Hello everyone,

I am reaching out to the community as I am encountering an issue with the automatic configuration of Google Analytics in my application on Softr. I followed the instructions provided here: Softr Google Analytics Integration but it seems that this setup does not retrieve the User-ID information, which is crucial for determining whether a user is logged in or not (more information on User-ID here: Google Analytics User-ID in french).

I am looking for advice or examples on how to configure the User-ID via a custom script in Softr. If anyone has successfully done this or has knowledge on how to go about it, I would be extremely grateful for your assistance.

I am open to any suggestions or recommendations and thank you in advance for your time and expertise.

:sunflower:

2

I have made this with an alternative way but terribly not performant for a good tracking, nobody knows how to do it with User-ID ? thanks

<script>
    document.addEventListener("DOMContentLoaded", function() {    
        if (window.logged_in_user && window.logged_in_user['softr_user_email']) {
            gtag('event', 'user_status', {'user_status': 'connected'});
        } else {
            gtag('event', 'user_status', {'user_status': 'disconnected'});
        }
    });
</script>
3

Hi Lea,

I donā€™t deal with analytics so I might not be the best person :sweat_smile: but:

Canā€™t you replace softr_user_email by the airtable field name where the ID lies in?

Like

<script>
    document.addEventListener("DOMContentLoaded", function() {    
        if (window.logged_in_user && window.logged_in_user['ID_field']) {
            gtag('event', 'user_status', {'user_status': 'connected'});
        } else {
            gtag('event', 'user_status', {'user_status': 'disconnected'});
        }
    });
</script>
4

Also, just checked the Gtag docs you need a data layer with Gtag.
(ref: ą¤”ą„‡ą¤Ÿą¤¾ ą¤²ą„‡ą¤Æą¤°  |  Tag Manager  |  Google for Developers)

maybe this one could do the trick:

<script>
  var userStatus = window.logged_in_user && window.logged_in_user['ID_field'] ? 'connected' : 'disconnected';

  dataLayer.push({
    'event': 'userStatusChanged',
    'userStatus': userStatus
  });
</script>

Or this one, more globalā€¦

<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>

<script>
  window.dataLayer = window.dataLayer || [];

  function gtag() {
    dataLayer.push(arguments);
  }

  gtag('js', new Date());
  gtag('config', 'TAG_ID');
</script>

<script>
  var userStatus = window.logged_in_user && window.logged_in_user['ID_field'] ? 'connected' : 'disconnected';

  dataLayer.push({
    'event': 'userStatusChanged',
    'userStatus': userStatus
  });
</script>

Two first scripts in the header, third script in the footer

5

Thank you for your response, Matthieu. Iā€™m still finding things a bit unclear. I tried implementing your code, but Iā€™m not certain it achieves what I had envisioned. It appears that ā€˜User-IDā€™ is not a tag that can be manipulated. Iā€™ve reviewed the documentation you provided, but it remains unclear to me.

6

Ok, so I took a course about GA4 and Tag manager :sweat_smile:

So as a good start this is what you should do =>

You would need to set a cookie first:
To be placed in the header, at page level:

You need to change ā€˜IDā€™ , in const userID according to the field name in your users table in Airtable

<script>
function set_user_id_cookie(cookieName, userID, isLoggedIn) {
  let expirationDays = -1; // Expired

  if (isLoggedIn) {
    expirationDays = 7;
  }

  const expirationDate = new Date();
  expirationDate.setDate(expirationDate.getDate() + expirationDays);

  const cookieString = isLoggedIn ?
    `${encodeURIComponent(cookieName)}=${encodeURIComponent(userID)}; expires=${expirationDate.toUTCString()}; path=/` :
    `${encodeURIComponent(cookieName)}=; expires=${expirationDate.toUTCString()}; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`;

  document.cookie = cookieString;
}

const cookieName = 'cookieLoggedinuser';
const userID = window.logged_in_user && window.logged_in_user['ID'];
const isLoggedIn = Boolean(userID);

if (userID) {
  set_user_id_cookie(cookieName, userID, isLoggedIn);
} else {
  // User is not logged in, remove the cookie
  set_user_id_cookie(cookieName, null, false);
}
</script>

Then you will need to add a variable in the google tag manager. Variable type will be ā€œ1st Party Cookieā€. Cookie name will be ā€˜cookieLoggedinuserā€™ (as I named it in the script creating the cookie).

For clarity, name the variable as ā€œcookie - airtableuseridā€.

Then go back to the tag you created. In the tag configuration (so maybe there is one related to loggedin/not loggedin? Or the tag you created is already the right one?) go to ā€œfields to setā€, enter as field name ā€˜user_idā€™ and as value your cookie variable.

And now you have the ID of the user (meaning the Airtable ID linked to GA4 and GTM).

Then I suppose you will be able to work properly with:
Or maybe withoutā€¦ :man_shrugging:

<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>

<script>
  window.dataLayer = window.dataLayer || [];

  function gtag() {
    dataLayer.push(arguments);
  }

  gtag('js', new Date());
  gtag('config', 'TAG_ID');
</script>

<script>
  dataLayer.push({
    'event': 'userStatusChanged',
    'value': ???
  });
</script>

In the dataLayer.push => Change the event name by the one you have in your tag manager
And then ā€¦ find something to put instead of the ??? .

Anyway. The most important is the first setup with cookie and linking the cookie to GA4. Then La couche de donnĆ©es  |  Tag Manager  |  Google for Developers should me more clear to know how to properly work with the dataLayer.push

Unfortunately I canā€™t help more for this, as it would need an entire course (and knowledge I donā€™t have yet).

1 Like