How do I track a button click on page

For engineers
1

I want to track a button click/submit on my page, currently all I see is trackLinkClick.

Also I would like to send some custom contexts with the button submit.

How do I implement in in the code?

1 Like
2

Hi @Mounika_M
trackLinkClick is certainly one way to do this. By using this event you will end up generating events with the link_click schema (as seen here: ). As you can see from this schema, you only need to specify the target_url, the other properties can be null if they are not relevent for you.
You can also add custom contexts to this by adding them as an array in the final parameter of the trackLinkClick function call.
For example:

window.snowplow_name_here('trackLinkClick', 'http://www.example.com', 'first-link', ['class-1', 'class-2'], '', 'this page', [{
    schema: "iglu:com.example_company/page/jsonschema/1-2-1",
    data: {
        pageType: 'test',
        lastUpdated: new Date(2014,1,26)
    }
},
{
    schema: "iglu:com.example_company/user/jsonschema/2-0-0",
    data: {
      userType: 'tester'
    }
}]);

Alternatively you could create a self desribing event of your own design. This would require you to create your own schema for the button click event and upload this to your own Iglu Schema Repository.
With that done, you could then send an event like this:

window.snowplow_name_here('trackSelfDescribingEvent', {
    schema: 'iglu:com.acme_company/button_click/jsonschema/1-0-0',
    data: {
        button_name: 'form_3_submit',
        button_context: 'submission'
    }
});

And again, you could append custom contexts as an additional last parameter to this function call.

An example of a suitable custom schema for the button_click event I described above would look like this:

{
    "$schema": "http://iglucentral.com/schemas/com.snowplowanalytics.self-desc/schema/jsonschema/1-0-0#",
    "description": "Occurs when a user clicks a button",
    "self": {
        "vendor": "com.acme",
        "name": "button_click",
        "format": "jsonschema",
        "version": "1-0-0"
    },
    "type": "object",
    "properties": {
        "button_name": {
            "type": "string"
        },
        "button_context": {
            "type": [
                "number",
                "null"
            ]
        }
    },
    "required": ["button_name"],
    "additionalProperties": false
}
3

Thanks @PaulBoocock I tried the LinkClick without custom contexts and it works, but when I tried your example of a suitable custom schema for the button_click event “$schema”: “http://iglucentral.com/schemas/com.snowplowanalytics.self-desc/schema/jsonschema/1-0-0#”

Our snowplow mini instance is not able to receive the custom context data. Not sure what is causing the issue here, did you encounter this before?

4

@Mounika_M, you need to know more about custom events to make it work. Please, refer to this wiki section to familiarize yourself with the concept before diving into it:

To be able to capture custom events, you would have to create and host the corresponding JSON schema yourself. When it comes to Snowplow Mini, you need to upload the JSON schema to Mini’s built-in Iglu server - either via UI in Control Plane or using API, https://github.com/snowplow/snowplow-mini/wiki/Usage-guide.

1 Like
5

Thanks I was wondering if there is an easy way o do without need to upload the JSON schema to Mini’s built-in Iglu server.

6

The only way to do it without creating your own custom schema would be to use the Schemas that are available on Iglu Central, a Snowplow hosted repository of Schemas.
You can see the available Schemas here: https://github.com/snowplow/iglu-central/tree/master/schemas

As an example, you can see the Link Click Schema you used earlier here: https://github.com/snowplow/iglu-central/blob/master/schemas/com.snowplowanalytics.snowplow/link_click/jsonschema/1-0-1

Bare in mind, most of the Schemas hosted at Iglu Central have been designed with a specific use case in mind that is often built in to our trackers. This is why we suggest you make your own schema for your specific business use cases. However, if you just want to test custom contexts without building your own, then you could attach something simple like the “GDPR” context: https://github.com/snowplow/iglu-central/blob/master/schemas/com.snowplowanalytics.snowplow/gdpr/jsonschema/1-0-0