CODEWITHSUNDEEP
cssgoogle-tag-managertyposcripttypo3-11.x
Patricks
Patricks

Reputation: 769

TypoScript Insert HeaderData before Style Definitions

I need to insert some headerdata before Style Definitions. To be more precise I want to insert my google tag manager script before my style sheets due to the loading order of my font-family. At the moment I do it like this:

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>
    )
}

According to the Typo3 Documentation the headerdata "By default, gets inserted after all the style definitions." I think that means, that it also can be inserted before. But I don't know how. I also don't want to put the css in the headerdata because I cannot concatenate and compress them there.

Upvotes: 0

Views: 696

Answers (1)

Bernd Wilke πφ
Bernd Wilke πφ

Reputation: 10800

If you want it at first position you could modify 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 cleaner way would be to reorder the header elements with typoscript:

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

and then copy the file you can find under typo3/sysext/core/Resources/Private/Templates/PageRenderer.html to that location and change the order of the markers.
(Yes, it is an old style marker template file)

Now you can reorder additionalHeaders in front of any CSS or JS.

Upvotes: 3

Related Questions