add different fields to a JSON request to a subscription endpoint

For practicing tracking event, I need to integrate different fields to a JSON request to a subscription endpoint. Here are the 3 fields :

• “deviceType”: (string) “mobile”, “tablet” or “desktop”
• “userAgent”: (string) the direct value of navigator.userAgent
• “sourceForm”: (string) “top” or “bottom” ( I have two different button for the same action, to register, at the top and at the bottom of the page)

Here is the code :

function bindSubscriptionButton(btnId, nameId, emailId, nameErrorId, emailErrorId) {
            var button = document.getElementById(btnId);
            if (button) {
                button.addEventListener("click", function (e) {
                    hideErrors();
                    var name = document.getElementById(nameId).value;
                    var email = document.getElementById(emailId).value;
                    var nameError = document.getElementById(nameErrorId);
                    var emailError = document.getElementById(emailErrorId);
                    if (!name) {
                        nameError.innerHTML = "Name ist erforderlich";
                        nameError.hidden = false;
                    }
                    if (!email) {
                        emailError.innerHTML = "E-Mail is required";
                        emailError.hidden = false;
                    } else if (!isEmailValid(email)) {
                        emailError.innerHTML = "E-Mail is not valid";
                        emailError.hidden = false;
                    }
                    if (name && email && isEmailValid(email)) {
                        hideErrors();
                        sendDataToServer(name, email, undefined)
                    }
                }, false);
            }
        }
        bindSubscriptionButton("subscriptionButton", "nameInput", "emailInput", "nameInputError", "emailInputError");
        bindSubscriptionButton("subscriptionButton2", "nameInput2", "emailInput2", "nameInputError2", "emailInputError2");
    }

    function sendDataToServer(name, email, referralCode) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
             if (this.readyState == 4 && this.status == 200) {
                var response = this.response ? JSON.parse(this.response) : null;
                goToSuccessPage();
             }
        };
        var data = {
            email: email,
            firstName: name,
            lang: "en",
        };
        
        xhttp.open("POST", serverURL, true);
        xhttp.setRequestHeader("Content-type", "application/json");
        xhttp.send(JSON.stringify(data));
    }

I would like to add deviceType, userAgent and sourceForm to this object :

var data = {
                email: email,
                firstName: name,
                lang: "en",
            };

For the deviceType, I also need to pass this function :

const deviceType = () => {
    const ua = navigator.userAgent;
    if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
        return "tablet";
    }
    else if (/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(ua)) {
        return "mobile";
    }
    return "desktop";
};

For the sourceForm, I need to pass an extra argument for ‘source’ here :

bindSubscriptionButton("subscriptionButton", "nameInput", "emailInput", "nameInputError", "emailInputError");
            bindSubscriptionButton("subscriptionButton2", "nameInput2", "emailInput2", "nameInputError2", "emailInputError2");

and pass it through all the way to here :

if (name && email && isEmailValid(email)) {
                        hideErrors();
                        sendDataToServer(name, email, undefined)
                    }

Thanks a lot for your help

Answer

You can “integrate” the values simply by setting more properties on the data object as you’re creating it.

For the sourceForm, you can pass the value through into your sendDataToServer function via the bindSubscriptionButton function exactly as you described, and then set its value in your data object.

For the deviceType and userAgent, I would suggest modifying the deviceType function so it returns both the user agent string and the derived device type value in a single object. You can then copy the property values into equivalent properties in the data object.

For example:

bindSubscriptionButton("subscriptionButton", "nameInput", "emailInput", "nameInputError", "emailInputError" "top");
bindSubscriptionButton("subscriptionButton2", "nameInput2", "emailInput2", "nameInputError2", "emailInputError2", "bottom");

and

function bindSubscriptionButton(btnId, nameId, emailId, nameErrorId, emailErrorId, sourceFrom) {
....
sendDataToServer(name, email, undefined, sourceFrom);
....

and

const deviceType = () => {
    const ua = navigator.userAgent;
    var devType = "";

    if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
        devType = "tablet";
    }
    else if (/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(ua)) {
        devType = "mobile";
    }
    else { devType = "desktop"; }

    return { "deviceType": devType, "userAgent": ua };
};

and

function sendDataToServer(name, email, referralCode, sourceFrom) {
....
    var dt = deviceType();

    var data = {
        email: email,
        firstName: name,
        lang: "en",
        deviceType: dt.deviceType,
        userAgent: dt.userAgent,
        sourceFrom: sourceFrom
    };
....