How to url encode or base64 data for POST request?

[David_Lange]

I’m trying to move away from Zapier and leverage Airtable Automations, which looks promising as it can detect a new record in a view.

We leverage Airtable to do Account & Task Management. With Zapier, we’re able to use Mixpanel to do reporting and analysis about our utilization and operations. When a new task enters a view, send an event to Mixpanel.

Using the fetch API in the scripting block, I’m wondering how I’d be able to use Mixpanel’s HTTP spec and hit their /track endpoint. I’m hitting a roadblock because I’m not sure if I can encode the data properly using vanilla javascript. The data parameter accepts a JSON object, either URL encoded or base64 encoded.

I’d appreciate any advise on doing this properly.

Thanks!

[Bill_French]

Hi David, and welcome to the community!

David_Lange:

I’m not sure if I can encode the data properly using vanilla javascript.

Pretty sure you can - https://www.w3schools.com/jsref/jsref_encodeuri.asp

If sending the JSON payload encoded in the URL, you may run into issues if the JSON content is large. Typically, APIs also support POSTing the JSON data in the body of the request in which case you needn’t URL encode it but it must be passed as a serialized string using JSON.stringify().

[David_Lange]

so let’s say I have a JSON object:

{“event”: “Airtable Task Created”,
“properties”: {
“distinct_id”: “123”,
“token”: “145353”,
“prop”: “value1”
}
}

and I need to send that event to https://api.mixpanel.com/track

it accepts a data parameter which is the JSON either url encoded or base64 encoded per the docs here: https://developer.mixpanel.com/docs/http

If I POST this with the JSON data in the body of the request, it seems I’d need to do more than just JSON.stringify()

[Bill_French]

David_Lange:

If I POST this with the JSON data in the body of the request, it seems I’d need to do more than just JSON.stringify()

Yes - you’d need to use fetch() to POST the JSON paylod to that endpoint. However, this assumes the mixpanel API supports this method and I cannot imagine why they wouldn’t. However, it’s always good to read the API docs - and sure’nough - it does.

It might look something like this…

let myJSONObject = {
{
    "event": "Airtable Task Created",
    "properties": {
        "distinct_id": "123",
        "token": "145353",
        "prop": "value1"
    }
}

let thisURL = "https://api.mixpanel.com/track";
let postOptions = {
     method: "POST",
     headers: {
          'Accept' : 'application/json',
     },
     body: JSON.stringify(myJSONObject)
}
const postResults = await fetch(thisURL, postOptions);