Block Elements / Hook / Head / Anti-flicker snippet

Hi David,

when setting up A/B Tests using Google Optimize two code snippets are needed in the HTML-Head and in a specific sequence.

(1) Optimize integration

<script src="https://www.googleoptimize.com/optimize.js?id=OPT-xxxxxxx"></script>

(2) Anti-flicker integration

<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'OPT-xxxxxx':true});</script>

When running an integration test in Chrome, I'm getting two errors.

The first I can address by integrating Google Optimize via Google Tag Manager instead. The second message however remains a challenge as Google suggests not to use Tag Manager for the integration of the anti-flicker snippet: https://support.google.com/optimize/answer/7100284?hl=en

Two questions:

A - Any thoughts as to why Google considers Hooks being legacy snippets?
B - Which configuration options can I use to change the sequence of snippets being loaded?

Thanks,
Jan