These methods are listed below with the example of adding product names, ordered from most preferred to least preferred, although any method is acceptable.
Data layer
This involves writing data into the window.dataLayer or window.digitalData object on the page.
An example for a product page using the digitalData object is:
<!-- W3C Digital Data Layer Start --><script type="text/javascript">
try {
var digitalData = {
"page": {
"pageInfo": {
"pageID": "Nikon Coolpix L30 - Cameras",
"destinationURL": "http://www.yoursite.com/product/3"
},
"category": {
"pageType": "product"
}
},
"product": [
{
"productInfo": {
//The name of the product
"productName": "Nikon Coolpix L30",
}
}
]
};
}catch(e){
}
</script>
<!-- W3C Digital Data Layer End -->
This means the product name would be available in the window.digitalData.product.productInfo.productName field.
You could also add a field to a dataLayer event, for example write to the ecommerce.checkout.products[0].name field of a checkout event on the cart page. The data would then be accessible at window.dataLayer[8].ecommerce.checkout.products[0].name.
Learn more in W3C Digital Data Layer.
Microdata ("Rich Snippets")
This utilises Schema.org format e.g.
<span itemprop="product-name">Product Name goes here</span>
Learn more in Product Microdata API.
Meta elements
This involves adding a field and it's value as separate attributes to a <meta> element e.g.
<meta name="product-name" content="Product Name goes here" />
More information about this method is available here:
Hidden elements using data attributes:
This involves adding an field and it's value to one attribute of an element e.g.
<div style="display:none" data-product-name="Product Name goes here" />
The advantage of this is that you can add multiple fields of data in one element.
More information about this method is available here:
JSON+LD data
This involves using the new JSON+LD schema to write data inside a Script node, which means it does not need to be added as an actual page element e.g.
<script type='application/ld+json'> {
"@context": "https://www.schema.org",
"@type": "product",
"name": "Product Name goes here ",
}
</script>
More information about this method available here:
FR HTML API
This involves adding data in a custom schema which is useful for person-level data such as email address and permission.
<div id="__tmsd"e="customers_email_address@none.none"
cid="39439493"
style="display: none;">
Learn more in HTML API overview.