Utilize TypoScript to inject HeaderData prior to implementing Style Definitions

My goal is to include my Google Tag Manager script before the style definitions in order to optimize the loading order and prioritize font-family rendering. Currently, I achieve this by:

page.includeCSS {
file1 = fileadmin/templates/css/bootstrap.css
page.includeCSS.file1.media = all 
file2 = fileadmin/templates/css/style.css
page.includeCSS.file2.media = all 
file3 = fileadmin/templates/fontawesome/css/all.min.css 
page.includeCSS.file3.media = all 
}

page.headerData {            
    10 = TEXT 
    10.value (
       <script data-cookieconsent="ignore">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','GTM-XXXXXXXXXX');</script>
    )
}

The default behavior of Typo3 inserts headerdata after style definitions, but I believe it can also be placed before. However, I am unsure of how to accomplish this without compromising CSS concatenation and compression.

cssgoogle-tag-managertyposcripttypo3-11.x

Answer №1

To make it appear at the top, you could adjust the <head> tag:

page.headTag (
<head>
<script data-cookieconsent="ignore">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','GTM-XXXXXXXXXX');</script>
)

A more organized approach would be to rearrange the header elements using typoscript:

config {
    pageRendererTemplateFile = EXT:site_config/Resources/Private/Templates/templateFile.html
}

Then, locate and copy the file under 

typo3/sysext/core/Resources/Private/Templates/PageRenderer.html
to that location and alter the placement of the markers.
(Yes, it is an old-style marker template file)

Now you can reorder additionalHeaders above any CSS or JS scripts.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the height of flex items to 100%

I'm currently diving into the world of flexbox by exploring various tutorials. Here's an example I created without utilizing Flex. Instead, I relied on float:left. Check out the example: https://jsfiddle.net/arhj8wxg/4/ I attempted to convert t ...

htmlcssflexbox

The secret to achieving perfectly even spacing along the vertical axis

I'm working on a card design that contains a div with 3 elements - 2 headers and a paragraph. I need to ensure there is consistent spacing between each element and the top/bottom of the card. Currently, there seems to be too much margin after the last ...

htmlcss

CSS Problem with Image Overlapping

Attached is an image that I would like to design in HTML. It has been quite successful, but when testing it on different resolutions, the red box seems to move around. The design was created with 100% width and height. <style type="text/css"> ...

htmlcss

Explore all dropdowns in Bootstrap by hovering over them

I am looking to have all my dropdown menus appear on hover in any of the menu items. I currently have this code snippet: ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; } The problem is that it only works for one menu item at a time, d ...

cssdrop-down-menu

Creating a sleek CSS drop-down navigation menu

I seem to be facing an issue with the side navigation drop down menu. Below are the link and CSS code: <nav id="nav"> <div class="menu-main_nav-container"><ul id="menu-main_nav" class="menu"><li id="menu-item-270" class="menu-it ...

cssnavigation

Activate the CSS on a click event using the onClick method

I am trying to implement a transition that triggers when clicking on a specific div element. Currently, the transition only occurs with the active css class. How can I achieve this effect by simply clicking on the div itself? I am using reactjs and believe ...

javascriptcssreactjs

Tips for adjusting the animation position in Off-Canvas Menu Effects

I am currently utilizing the wave menu effect from OffCanvasMenuEffects. You can view this menu in action below: ... // CSS code snippets here <link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/f ...

javascriptjquerycsssvg

Store user input in a paragraph

I want to create a unique program that allows users to input text in a field, and when they click "Start", the text will appear in a paragraph backwards. I plan to use Html, jQuery, and CSS for this project. Can anyone provide guidance on how to achieve th ...

javascriptjqueryhtmlcss

The Function(JS) is specifically designed to only function within the topmost div or quote

Currently, I am facing an issue with a function I have implemented. This function adds a blur effect to words in a Blockquote when the page is loaded. However, I need this function to work for all Blockquotes and different divs on the page, not just the to ...

javascripthtmlcssanimation

What's causing this element to overlap the previous one (apologies, once more)?

This is the code: <form id="the_form" action="">ev </div> <!-- final pay_block --> <div class="linea"/> <div class="spacer"/> The "linea" element is currently overlapping the buy button because a margin-bottom of 15px has be ...

csshtml

What is the best way to position an image in the center of the screen with uniform margins around it?

Could someone please help me figure this out? I've been attempting for some time but can't seem to make it work with the bottom margin. This website in the fashion industry showcases what I'm trying to achieve: It's designed to be resp ...

javascriptjqueryhtmlcss

"Remaining Elements" within a CSS Design

I am faced with a challenge where I have 4 elements nested inside a container element. The height of the container should be set to 100% of the browser window. The inner elements need to stack vertically, with the first two and last elements having a natur ...

htmlcsslayoutpositioning

The footer is floating somewhere in the middle of the page, not at the bottom

Currently working on a webpage with the Twitter Bootstrap Framework. The footer is supposed to be at the bottom of each page with lots of content, but on one sub-page it's appearing in the middle instead: http://gyazo.com/45232ab25cdeb7705f9775a969051 ...

htmlcsstwitter-bootstrap

Add a unique design to a list element with CSS

I've successfully arranged a simple list in a line with a background image for all items. However, I want to have a different background image for specific list items (List item 3) without resorting to using !important. Below is the code I am currentl ...

htmlcss

Is it possible to enable auto-completion for IDs in a separate CSS file using WebStorm 7?

I am new to using WebStorm 7 and currently working on building a simple HTML/CSS website. Initially, I included my CSS within the HTML file using the style tag, but now I have decided to move it to a separate file. Auto completion is functioning for all h ...

htmlcsswebstorm

Executing cssnano Using the Command Prompt

Although I'm not an expert in node JS, I have come across cssnano as a JavaScript tool for minifying CSS, which apparently does a more sophisticated job compared to the outdated YUI compressor. My only issue is that I am struggling to understand how t ...

cssnode.jsjarcmdyui

What is the best way to center text vertically in a <div> using CSS?

This is my first attempt at creating a chrome extension, and I am currently working on centering text. Right now, I am using text-align: centre; to align the text horizontally, but I am struggling to figure out how to align it vertically. As a result, my t ...

htmlcssgoogle-chromegoogle-chrome-extension

Navigating through a modal without affecting the main page's scroll position

My webpage has some content, and I also have a modal that pops up on top of it. The problem I'm facing is that when I try to scroll the contents within the modal, only the contents behind it scroll instead. Below is the CSS code: html, body { b ...

htmlcssmodal-dialog

Creating a dynamic feature in React where multiple icons change color individually when hovered over, all implemented

I'm looking to customize the icons in my footer by changing their colors when users hover over them. I have already created a CSS class with the necessary hover effects, but now I want to pass a parameter in my JSX file that specifies which color shou ...

htmlcssreactjshoverfont-awesome

Enhance the bubble charts in Kendo UI Graph by adding dimension and depth to the bubbles for a more visually

Is there a way to create a relief effect on the bubbles in Kendo UI Bubble charts? Currently, all bubbles appear flat with the 15 provided themes. You can see an example here: It would be great to have a 3D-style option similar to the pie chart (Uniform s ...

csskendo-uitelerikstylesbubble-chart