Adding the
header: true

Doesn't appear to work, at least on a Bartik subtheme. It won't output anything. If I take that out, it loads the file in the footer as expected. This is a facebook pixel and needs to be in the head section.

This is the code in the theme.libraries.yml

facebook:
  header: true
  js:
    js/facebook-pixel.js: {}

I have no idea why this doesn't work.

Comments

nitin.k’s picture



/**
 * Implements hook_page_attachments().
 */
function module_name_page_attachments(&$page) {
  /**
   * Initial JS.
   */
  $javascript_header = "-----js code -----";

  $page['#attached']['html_head'][] = [
    // The data.
    [
      // Add a <script> tag.
      '#tag' => 'script',
      // Add JavaScript to the <script> tag.
      '#value' => \Drupal\Core\Render\Markup::create($javascript_header),
      // Give weight so it appears after meta tags, etc.
      '#weight' => -1,
    ],
    // A key, to make it possible to recognize this HTML <HEAD> element when altering.
    'key'
  ];


}
sachinsuryavanshi’s picture

Hi Nitin,

How to add External js?

e.g. <script src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.5/jquery.jcarousel.min.js"></script>

I want this in my head section \

Thanks,
Sachin

nitin.k’s picture

This thread might be helpful.

Yogesh Kushwaha’s picture

While adding key keep in mind it should be string value.
 

// This line should be on top.
use Drupal\Core\Render\Markup;

$script = 'console.log("Hello")';
// This is wrong.
$attachments['#attached']['html_head'][] = [
  [
    '#tag' => 'script',
    '#value' => Markup::create($script),
    '#weight' => -1,
  ],
  'key' => 'Google Ads Home',
];

/** Above code will generate a notice.
 * 	Notice: Undefined offset: 1 in 
 *  Drupal\Core\Render\HtmlResponseAttachmentsProcessor-//>processHtmlHead() (line 399 of 
 *  /var/www/winwin/web/core/lib/Drupal/Core/Render/HtmlResponseAttachmentsProcessor.php)
 */

// This one is correct.
$attachments['#attached']['html_head'][] = [
  [
    '#tag' => 'script',
    '#value' => Markup::create($script),
    '#weight' => -1,
  ],
  'ad_script',
];

--
Yogesh Kushwaha

rogerlenoir’s picture

hello,
I had the same problem ans i solve it with
https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-an...
in section "Asset loading order"

sreenivasparuchuri’s picture

In the yourtheme.libraries.yml we need to create a library like below

library-name:
  header: true
  js:
    https://external_js_url: { type: external,attributes: { async: true } }

and in the theme.info.yml we need to add this library then it will automatically comes in head tag, if we remove header:true it will come in body tag

rick_p’s picture

Thank you!!!

anoopjohn’s picture

lehmann91’s picture

Got the same question here. Please, notify me when you find the solution! 

Kind regards,

Katrina Lehmann

rick_p’s picture

This is your best bet if you don’t want to rely on an additional module to do it.

https://www.drupal.org/docs/theming-drupal/adding-stylesheets-css-and-ja...

See this section for loading in the header or footer, the footer is recommended if it doesn’t need to load before other scripts.

https://www.drupal.org/docs/theming-drupal/adding-stylesheets-css-and-ja...