Get UserID with Custom JS on client side

Community Support
1

Description

On a Rocket.Chat cloud hosted instance, is there a way to use Admin>Layout>Custom Scripts to retrieve the userID, email, user name, or custom field of a user during that (logged-in) user’s session?

The API can provide this information of course, but I don’t know how I’d authenticate (using custom JS on client side). As a work around, there might be some way to pull username off the DOM (would have to be on each page load), but I haven’t found it.

Background

  • My company has several “campuses” and I’ve successfully used “custom fields” + the API to assign a campus to each user profile.
  • I’ve also implemented Google Tag Manager, and I would like to track users by “campus” using Google Tag Manager. To do this, during each user’s session, I want to access that user’s custom field so I can push that value (eg. “New York City”) to Google Tag Manager’s data layer. (I have tried pushing test strings to the data layer using JS in “custom scripts”, so I know that part works)
  • If it’s not possible to access the custom field directly, if I can access the user’s UserID, email, or user name, I can use that information to call a database elsewhere and get the information.

Server Setup Information

  • Version of Rocket.Chat Server: 3.2
    Hosted on the Rocket.Chat cloud
2

Thought I’d bump this - does anyone have any suggestions?

3

Answering my own question here, in case it’s helpful to others.

The root of the problem was that I didn’t know how to log into the API from within a user session.
The userID and Token are stored in the Local Session under
meteor.UserID and meteor.loginToken. Easy to see in the Chrome Debugger:


image
image1670×592 59.5 KB



To get it working, I created a custom HTML tag in Google Tag Manager. (I’d post another pic but “new users can only post one picture :roll_eyes:”)


Here’s the code (note we’re using some olde schoole JavaScript here (v5) because Google Tag Manager requires it):

<script>
  
var userCampus;
function getUserCampus(url) {

    var localUserId = localStorage.getItem('Meteor.userId');
    var localAuthToken = localStorage.getItem('Meteor.loginToken');

    var myHeaders = new Headers();
    myHeaders.append("X-User-Id", localUserId);
    myHeaders.append("X-Auth-Token", localAuthToken);

    var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
    };

    return fetch(url, requestOptions)
    .then(function (response) {
        return response.json();
    })
    .then(function (result) {
        userCampus = result.customFields;
        return userCampus
    })
    .then(function (userCampus) {
        window.dataLayer.push(userCampus)
        window.dataLayer.push({'event': 'campusEvent'});
    })
    .catch(function (error) {
        console.log('error', error);
    });

};

var APIURL = window.origin.concat('/api/v1/me')
getUserCampus(APIURL);

</script>

That’s it! (Feel free to yell at me if you find problems with this approach. Always happy to learn.)