google tag manager gives "mixed content" error

Question

I'm using google tag manager:

<script>
(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 = '//www.googletagmanager.com/gtm.js?id=' + i + dl;
    f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-XXXX');
</script>

But when I used https:// to call the page, it gave me mixed content error: 1) .... was loaded over HTTPS, but ran insecure content from 'http://www.youtube.com/iframe_api': this content should also be loaded over HTTPS. 2) .... was loaded over HTTPS, but ran insecure content from 'http://s.ytimg.com/yts/jsbin/www-widgetapi-vflFaZyew/www-widgetapi.js': this content should also be loaded over HTTPS.

I can't figure out why or how to fix this, could you please help? Thanks.

Answer 1

You may want to make sure that your tags (especially custom tags) are not specifying the http protocol. You can make URLs work on both http and https by not using the protocol portion of the URL. For example:

//www.google.com/

Answer 2

If your are using scully, this issue is discussed here.

Scully generates renders using http. So, the google tag manager script in your header will contain http request in all pages.

Solution 1

As SanderElias pointed out in the issue,

A quick solution would be a plugin that scans your results, and replaces http with https,
However, we are already looking into supporting https during development, which will solve your issue too.

So I used this plugin with this setup.

const RegexPlugin = getRegexPlugin();
setPluginConfig(RegexPlugin, {
    replacements: [{
        from: 'http:',
        to: 'https:'
    }]
});

This will indeed replace all http by https.

Warning: If you have links that only work with http, that will broke them all. So, I had to manually change it back to http after the scully post render.

Solution 2

Run scully in SSL mode.