Extracting a cookie from browser

Hello folks!

I am trying to find some advice here. Here’s my thing:

I need to add to my events a cookie value (stored in the browser) it means I have to extract the value from the browser and set the user_id field with that value.
I can do so using GTM and accesing the cookie as explained here (Tag Guide | Snowplow Documentation), however, I need to perform the same action from outside GTM.

I am trying to use the javascript enrichment but since there is no document object, I can’t access document.cookie.

My questions:

Is there a way to access the cookies in the browser from the JS enrichement?

Is it possible to use some kind of axios call (or perform any http call) from the javascript enrichement?

Thank you

Hi @felipe_ache,

Is it the same cookie as the one set by the Collector, or a different one? What is the domain of the cookie? (I mean, how does it relate to the domain of the Collector?) Does this cookie get passed to your pipeline?

If the cookie domain is such that it does not even get sent to your pipeline, I think your only option is to extract it on the client side (as part of the Snowplow tracking code) and attach it to the event as an entity.

Hi Stanch,

Not, this is not a cookie setted by the Collector but for the website it self. The domain is not the Collector’s neither. I am affraid you are rigth but I am trying to get a bit of hope.

Do you know if it is possible to make a http call inside the javascript enrichement?

It’s possible, but we don’t recommend it. At least not without extensive performance testing. There will be a lot of events going through the pipeline, and making an external call can have a big effect on throughput/latency.

Thank you @stanch
so just for testing purposes, if I do a http call from the proccess function in the JS enrichement, should I use axios/fetch or HttpUrlConnection?

Hi @felipe_ache, I agree with @stanch that using HTTP calls from the JS enrichment is not a good idea and utilizing a client-side solution as part of the tracking code is the better way. Here’s how it could be done. To extract the cookie in question,

document.cookie.split(";").forEach(function(item) {
  if (item.indexOf("COOKIE_NAME") >= 0) {
    cookie_name = "COOKIE_NAME"
    cookie_value = item.split("=")[1]
    // do something with cookie_name and its cookie_value
    . . .
  }
});

where “COOKIE_NAME” is the cookie of your interest. The user_id could be assign at this stage if applicable.

Alternatively, you also could capture the cookie and add it to your event as a context (entity). This will allow working with it in JS enrichment and have its value assigned to user_id relatively easy. This does require a dedicated JSON schema, which could look something like

{
    "$schema": "http://iglucentral.com/schemas/com.snowplowanalytics.self-desc/schema/jsonschema/1-0-0#",
    "description": "Schema for cookie contexts",
    "self": {
        "vendor": "VENDOR",
        "name": "cookies",
        "format": "jsonschema",
        "version": "1-0-0"
    },

    "type": "object",
    "properties": {
        "cookie_name": {
            "type": "string"
        },
        "value": {
            "type": "string"
        }
    },
    "additionalProperties": false
}

Then in JS enrichment you extract the cookie value as per this guide. To assign the value to user_id, you use the setter setUser_id().

2 Likes