Custom HTML Tag not firing in Google tag manager?

Question

    <script>
(function(){
var data = {
  "@context": "http://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": {{Page URL}}
  },
  "headline": {{SCHEMA - Article Headline}},
  "image": {
    "@type": "ImageObject",
    "url": {{SCHEMA - Article Image}},
    "height": 870,
    "width": 430
  },
  "datePublished": {{SCHEMA - Article datePublished}},
  "author": {
    "@type": "Person",
    "name": {{SCHEMA - Author Name}}
  },
   "publisher": {
    "@type": "Organization",
    "name": "example.com",
    "logo": {
      "@type": "ImageObject",
      "url": "http://www.example.com/ad/de.png",
      "width": 166,
      "height": 25
    }
  },
  "description": {{SCHEMA - Article Description}}
}

var dateModified = {{SCHEMA - Article dateModified}};

    if(dateModified){
      data.dateModified = dateModified;
    } else {
      data.dateModified = {{SCHEMA - Article datePublished}};
    }

var script = document.createElement(script);
script.type = "application/ld+json";
script.innerHTML = JSON.stringify(data);
document.getElementsByTagName('head')[0].appendChild(script);
})(document);
</script>

Here is the code that i am using as custom HTML tag that i create for my Blogpost. But while debugging the page this Custom HTML Tag is not firing. And some DOM element variable showing 'null' value. Here is the screenshot of my problems....