Data attributes

The data attributes component is for analytics tracking. It allows you to add certain attributes in your HTML to communicate with Google Tag Manager (GTM) and send events and event data to Google Analytics (GA).

When to use this component

Use it to define any data attributes that you need in the component HTML.

How it works

The Document Object Model (DOM) looks for an element with data-(custom-tracking), data-track and data-track-. If it finds elements, it gathers the data from these attributes and pushes them into the data layer.

You need to provide the dataAttributes or dataTrackingAttributes as an array of name-value objects.

Example:

"dataAttributes": [
	
	{
	 "name": "track",
	 "value": "call_to_action"
	},
	{
	 "name": "track-context",
	 "value": "You might have funding"
	},
	{
	 "name": "content-type",
	 "value": "oa-funding-agreements"
	},
	{
	 "name": "track-method",
	 "value": "OA funding agreements card"
	},
	{
	 "name": "track-value",
	 "value": "<title>"
	},
	{
	 "name": "track-item-id",
	 "value": "<linkUrl>"
	}
]

Installation

To install the components, go to the get started guide for developers.

To use the Data attributes component, enter the following command in your Terminal:

npm install @springernature/elements

Help improve this page

If you’ve got a question, idea or suggestion about how to improve this component or guidance, post in the #ask-elements Slack channel.