Advantages MetaTag 2

General performance improvements

MetaTag 2 will load and execute around 14% faster, than MetaTag 1.

Caching

MetaTag 2 splits its code into 2 different files. Each file has different “Cache strategies” assorted to it, making it possible to massively reduce the need for visitors to re-download scripts.

For basic information about “code splitting” and its benefits, please visit Google’s “web.dev”: Reduce JavaScript payloads with code splitting | Articles | web.dev

File 1 “Loader”: contains fast changing dynamic configuration and settings.
File 2 “Core”: contains main scripts including all modules and logic for advertisements.

	File 1”Loader”	File 2 “Core”

	File 1”Loader”	File 2 “Core”
Filename	metaTag.min.js	core.min.js (inc. version hash)
Size (g-zipped)	~25 kB	~35 kB
Cache time	15 minutes	indefinitely

Remove render-blocking components

MetaTag 2 will allow you to load the metaTag.min.js file as “non-blocking resource”, by using “async” or “defer” attributes when integrating the file.
With a new command queue, you can already query commands to MetaTag, without the need to wait for the file to load.
For more information about “render-blocking JavaScript” and how to avoid it, please visit: Eliminate render-blocking resources | Lighthouse | Chrome for Developers

To integrate MetaTag without render-blocking your website, you will need to take two steps:

1.) Implement MetaTag command queue into your website

Send commands to MetaTag by implementing the built-in “command queue”, found under the SDG.cmd namespace.
You can use all interface methods described in our documentation English MetaTag Documentation with this command queue.

_{Replace values from setZone(), setPageType() and registerSlot() with values from your website.}

Old integration, still works

<script>



  SDG.Publisher.setZone('homepage')
  SDG.Publisher.setPageType('rubrik')
  SDG.Publisher.registerSlot('sky', 'skyscraper').load()
  SDG.Publisher.registerSlot('banner2', 'billboard').load()
  SDG.Publisher.registerSlot('rectangle', 'rectangle').load()
  SDG.Publisher.registerSlot('rectangle2', 'lazyRectangle').load()
  
</script>

New and improved integration

<script>
  window.SDG = window.SDG || {};
  window.SDG.cmd = window.SDG.cmd || [];
  window.SDG.cmd.push(function() {
      SDG.Publisher.setZone('homepage')
      SDG.Publisher.setPageType('rubrik')
      SDG.Publisher.registerSlot('banner', 'leaderboard').load()
      SDG.Publisher.registerSlot('sky', 'skyscraper').load()
      SDG.Publisher.registerSlot('banner2', 'billboard').load()
      SDG.Publisher.registerSlot('rectangle', 'rectangle').load()
      SDG.Publisher.registerSlot('rectangle2', 'lazyRectangle').load()
  })
</script>

2.) Load metatag.min.js asynchronously

In your website locate the <script> tag, loading the file “metatag.min.js”. Attach a “async” or “defer” attribute to its script tag.

_{The URL for MetaTag 2 is website-specific. If you don’t have the URL for MetaTag for your website, contact your Ströer representative.}

Old integration, still works

<!DOCTYPE html>
<html>
  <head>
    <script src="http://cdn.stroeerdigitalgroup.de/metatag/live/beispielseite/metaTag.min.js" async type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

New and improved integration
_{(please note the word “async” inside the <script> tag)}

<!DOCTYPE html>
<html>
  <head>
    <script async src="http://cdn.stroeerdigitalgroup.de/metatag/live/beispielseite/metaTag.min.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

Avoiding “long tasks”, let website render first

MetaTag 2 is built upon the principal not to block the browser rendering the website. The browser (and ultimately the device of the user) should be in control of which critical tasks a website needs first.

Through using current JavaScript functionality like Promises, async/await and combining it with task management, MetaTag will frequently yield task execution to the browser, allowing it to prioritize website rendering and user input.

old MetaTag 1 tasks

MetaTag 2 with task management

This will help greatly when optimizing your website for Googles “Web Vitals”, like “Time to Interactive” and “Total Blocking Time”.
For more information about “long tasks” please see: Optimize long tasks | Articles | web.dev

Configure each AdSlot to your specific needs

MetaTag 2 allows to tailor each AdSlot to specific use-cases, giving you full control on how to display advertisements on different pages of a website.
Configure features like:

Labeling an AdSlot as “Advertisement”
Using ”lazy load”, requesting ads only after the slot is scrolled into view.
Reserving height and space for an AdSlot, to avoid “Cumulative Layout Shift”
Enabling “loading animations”, showing users where ads are currently loading and avoiding “blank spaces”.
Determine how ads should be positioned (centered or left).
Let advertisements scroll along with the user, should they be smaller than their reserved space

Example:

const myAdSlot = SDG.Publisher.registerSlot('banner', document.getElementById('myBannerContainer'));
myAdSlot.configure({
		reserveSpace: true,
		fixedHeight: 150,
		showAdvertLabel: true,
		centerAds: true,
		showLoadingAnimation: true,
		lazyLoad: true
}).load()

For details on the implementation, please refer to English MetaTag Documentation | Slot.configure ( configObject)[inlineExtension]

Ströer Digital Spezifikationen