In our Drupal projects, we have requirements to add some kind of inline javascript code, like adding GTM script. This can be in the page header or page bottom as per requirements. So in the blog, we will see how we can achieve this by both methods.<\/p>\n
Drupal provides hooks to do this in a proper way. To add the inline javascript code in the page header, we can use hook_page_attachments()<\/a>, and for the page bottom, we can use hook hook_page_bottom() <\/a><\/p>\n Let\u2019s understand this with examples.<\/p>\n Method 1: Add inline Javascript code in page header<\/strong><\/p>\n Method 2: Add inline Javascript code in page bottom<\/strong><\/p>\n You can add this JS script for global or page specific as per your requirements. For that, add conditions before rendering the markup. Also, we can add the same by using route and controller.<\/p>\n If you still have questions, comment and join the discussion. I will be adding different ways in the upcoming blogs. Stay tuned.<\/p>\n In our Drupal projects, we have requirements to add some kind of inline javascript code, like adding GTM script. This can be in the page header or page bottom as per requirements. So in the blog, we will see how we can achieve this by both methods. Drupal provides hooks to do this in a […]<\/p>\n","protected":false},"author":1508,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":112},"categories":[3602],"tags":[4884,5212],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57278"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1508"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=57278"}],"version-history":[{"count":5,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57278\/revisions"}],"predecessor-version":[{"id":57354,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57278\/revisions\/57354"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=57278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=57278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=57278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\/**\r\n* Implements hook_page_attachments().\r\n*\/\r\nfunction\u00a0MYMODULE_page_attachments<\/strong>(array &$attachments)\u00a0{\r\n\/\/ You can optionally perform a check to make sure you target a specific page.\r\nif\u00a0(\\Drupal::routeMatch()->getRouteName() ==\u00a0'some.route') {\r\n\/\/ Add our JS.\r\n$attachments['#attached']['html_head'][] = [\r\n[\r\n'#tag'\u00a0=>\u00a0'script',\r\n'#attributes'\u00a0=> [\r\n'type'\u00a0=>\u00a0'text\/javascript',\r\n],\r\n'#value'\u00a0=> \\Drupal\\Core\\Render\\Markup::create('console.log(\u201cThis\u201d is my javascript code);\u2019),\r\n],\u00a0\u00a0'key_for_this_snippet',\r\n];\r\n}\r\n}<\/pre>\n\/**\r\n* Implements hook_page_bottom().\r\n*\/\r\nfunction MYMODULE_page_bottom<\/strong>(array &$page_bottom) {\r\n$user = \\Drupal::currentUser();\r\n$page_bottom['pixelthis_sticky_banner'] = [\r\n'#markup' => \\Drupal\\Core\\Render\\Markup::create('console.log(\u201cThis\u201d is my javascript code);\u2019),\r\n'#cache' => [\r\n'contexts' => ['user'],\r\n'tags' => ['user:' . $user->id()],\r\n],\r\n];\r\n}<\/pre>\n