Implement Structured Data Breadcrumbs Using GTM

dataLayer structure

We'll start with dataLayer. Let's assume that your developers are not utter tools and you have dataLayer implemented on your website. Ideally, it should be a custom build.

This is how another article on this website looks like in dataLayer. You can see that it has all the necessary variables we'll need to use in implementing the breadcrumbs.

I know what you're thinking. "Our dataLayer isn't as elegant and succinct as this." That's all right; you have options.

If your site is running on WordPress, use a plug-in. GTM4WP is a really good one. Then look at the dataLayer it generates and modify tags and variables accordingly.

In case your site is not running on WordPress, talk to your IT and prepare them for building a custom dataLayer. Then give us a call to help you out with building the dataLayer properly.

Build the variables

Before we delve deeper, make sure you have all your dataLayer variables named in your GTM.

Let's create your custom JS variable by copying and pasting the following code. Don't forget to name it. In this example, we went for the strikingly original name of cjs.schema~breadcrumbs.

function () {
  var breadcrumbsArray = [{
    "@type" : "ListItem",
    "position": 1,
    "name" : "{{dl.breadcrumb~L1}}",
    "item" : "{{dl.breadcrumb~L1_URL}}"
    },
    {
    "@type" : "ListItem",
    "position": 2,
    "name" : "{{dl.breadcrumb~L2}}",
    "item" : "{{dl.breadcrumb~L2_URL}}"
    },
    {
    "@type" : "ListItem",
    "position": 3,
    "name" : "{{dl.breadcrumb~L3}}",
    "item" : "{{dl.breadcrumb~L3_URL}}"
    },
    {
    "@type" : "ListItem",
    "position": 4,
    "name" : "{{dl.breadcrumb~L4}}",
    "item" : "{{dl.breadcrumb~L4_URL}}"
    },
    {
    "@type" : "ListItem",
    "position": 5,
    "name" : "{{dl.breadcrumb~L5}}",
    "item" : "{{dl.breadcrumb~L5_URL}}"
    }];
  var filtered = breadcrumbsArray.filter(function(el) { return el.item != "undefined"; });
  return filtered
}

The most interesting bit is the line before the return statement. It filters out all ListItems that are undefined.

Filtering out undefined items comes in handy when you have a page that sits deep inside the site architecture and you don't want to send excessive and useless data to Google. For example, breadcrumbs on the Analytics page look like this: Home -> Services -> Analytics -> undefined -> undefined. We wouldn't want to send the last two items to Google, so the function removes them.

Create the Custom HTML Tag

Copy and paste the following code.

<script>
(function () {
var jsonData = {
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement" : {{cjs.schema~breadcrumbs}}
}
var el = document.createElement('script');
el.type = 'application/ld+json';
el.innerHTML = JSON.stringify(jsonData);
document.head.appendChild(el);
})();
</script>

Set the Tag firing options to Once per event.

Trigger the tag

Due to our dataLayer structure, we are triggering the tag on the custom event "pageview", but you can just as easily trigger it on the "DOM Ready" event.

Publish & validate

Make sure there are no mistakes in the current version of the GTM container and hit that Publish button like you're being paid for it.

Go to Google's Rich Results Test tool and see whether you implemented the Breadcrumbs object properly.