Youtube Iframe Embed won't autoplay on mobile - iframe

I need to make a Youtube embed autoplay on a page. Usually setting autoplay=1 would work if it was paired with mute=1 in the query string params.
This actually works fine on desktop, but it doesn't work on either Android or iPhone, no matter which browser.
Did something change with the autoplay policies which would totally disable autoplay on mobile?
Reproducable demo here - https://codepen.io/gogo_rulez/pen/YzYyXZL
<iframe width="560" height="315" src="https://www.youtube.com/embed/5UZND2KnuP4?mute=1&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; autostop; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


You can try following solution if you want to
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes">
</head>
<body>
<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: '100%',
videoId: 'osz5tVY97dQ',
playerVars: { 'autoplay': 1, 'playsinline': 1 },
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}
</script>
</body>
</html>
You can check more details here

Related

HTML custom tag for my consent cookie banner - is not display on the website GTM

So I am trying to setup a cookie consent banner and trigger Analytics when the user accept the service. This is my second attempt doing this(first time I failed miserable) and I am not sure if I am missing something, because in the research I did, looks pretty much straight forward but for some reason is not working for me.
This is the way my configuration looks on the GTM dashboard. So my Tag manager, where i have for now only two tags, one for the banner, that is a HTML custom Tag and the second that is for the Google Analytics.
This is the way my Custom HTML looks like.
When I try to run the GTM preview mode this is what I get. For me it's not clear, it says the Tag is triggered, however is not displayed on the preview mode, nor on the website
I also need to mention, that I placed the container on the website, and my code looks as follows(for now), also this is a SPA I also don't know if can be something related to that:
<!DOCTYPE html>
<html lang="">
<head>
<script type="text/javascript">
// create dataLayer
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
// set „denied" as default for both ad and analytics storage,
gtag("consent", "default", {
ad_storage: "denied",
analytics_storage: "denied",
wait_for_update: 2000 // milliseconds to wait for update
});
// Enable ads data redaction by default [optional]
gtag("set", "ads_data_redaction", true);
</script>
<!-- Google Tag Manager -->
<script type="text/javascript">(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-XXXXXX');</script>
<!-- End Google Tag Manager -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
I am not sure if I need to provide another type of information, so please let me know.
** EDIT **
Below the custom HTML Tag script, where the first script is just to include the main SDK script.
<script>
var cookie = document.createElement("script");
cookie.setAttribute(
"src",
"https://www.mywebsite.com/redesign-scripts/vendor/udg-uc-sdk.min.js"
);
cookie.setAttribute("id", "xxxxxxxx");
document.head.appendChild(cookie);
</script>
<script>
var GlobalConsent = GlobalConsent || {};
//Activate new modal style
GlobalConsent.NewModalSDK = true;
//Set language
GlobalConsent.Language = 'en';
//Set privacy shield content
window.ucPrivacyShield = {
bgimage: 'https://linktoimage.com/image.jpg',
consentunavailable: {
text: 'Die zur Anzeige notwendigen Inhalte konnten nicht geladen werden. Falls Sie einen AdBlocker verwenden, überprüfen Sie bitte dessen Einstellungen.'
},
consentservice: {
headline: 'Hinweis zur Datenverarbeitung',
text: 'Auf unserer Website stellen wir Inhalte von ###SERVICE### bereit. Um diese Inhalte zu sehen, müssen Sie der Datenverarbeitung durch ###SERVICE### zustimmen.',
buttons: {
consent: {
label: 'Zustimmmen'
},
privacy: {
label: 'Hinweise zum Datenschutz',
link: 'https://www.mywebsite.com/de/privacy/'
}
}
}
};
//Wait for UC SDK loading
window.addEventListener('ucReady', function (e) {
//Check Youtube & Vimeo iFrame consent
window.ucPrivacyShield.checkConsent({
mapContainer: document.getElementById('youtube-vimeo-iframe'),
processorId: ['_xxxxx', '-xxxxx'],
timeoutVar: {},
callbacks: {
success: function () {
var iFrame = document.getElementById('youtube-vimeo-iframe').getElementsByTagName('iframe')[0];
iFrame.src = iFrame.dataset.src;
},
p: undefined
}
});
}, false);
</script>
*U P D A T E
I was wondering if someone else have any idea about this, I still don't manage to solve the issue, And I was wondering if it related that the app is rendered client site, and someone when the google tag is trying to append the DOM it is still not there, I tried by wrapping the append inside a "onload" function, but did not worked as well

Did you check localStorage and cookies to ensure, that you don't have preexisting settings.
The banner is only displayed, when there are no preexisting settings in your web storage. Since there are "consents-initialized" dataLayer events displayed in your screenshot, this could be possible.

Exception in queued GPT command TypeError: googletag.SizeMapping is not a function

I'm trying to display ads on my test website before I use it for my live site.
I've placed the generated code from Admanager in the head and in the body of de webpage. The ad is showing fine, but when I resize my screen, the same ad is showing up on tablet and mobile. I've set different ads by using Sizemapping, and it's giving me this error in the chrome inspector:
Exception in queued GPT command TypeError: googletag.SizeMapping is not a function
at Arguments. ((index):70)
at Gk.push (pubads_impl_modern_2019112101.js?21065216:1)
at Nk (pubads_impl_modern_2019112101.js?21065216:1)
at pubads_impl_modern_2019112101.js?21065216:1
at dq (pubads_impl_modern_2019112101.js?21065216:1)
at pubads_impl_modern_2019112101.js?21065216:1
at pubads_impl_modern_2019112101.js?21065216:1
How can I fix this?
This is the code in my head:
<script data-ad-client="ca-pub-5630600850555485" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
googletag.defineSlot('/10643240/test_aanhetbouwen', [[300, 600], [300, 250], [728, 90], [970, 250], [320, 100]], 'div-gpt-ad-4873663-1').addService(googletag.pubads());
googletag.enableServices();
});
</script>
<!-- Start GPT Tag -->
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var gptadslots = [];
var googletag = googletag || {cmd:[]};
</script>
<script>
googletag.cmd.push(function() {
var mapping1 = googletag.SizeMapping()
.addSize([1024, 770], [[300, 600]])
.addSize([770, 400], [[300, 250]])
.addSize([1, 1], [[300, 250]])
.build();
//Adslot 1 declaration
gptadslots.push(googletag.defineSlot('/10643240/test_aanhetbouwen', [[300,250],[300,600]], 'div-gpt-ad-4873663-1')
.defineSizeMapping(mapping1)
.addService(googletag.pubads()));
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
<!-- End GPT Tag -->
And this is my code in the body:
<!-- GPT AdSlot 1 for Ad unit 'test_aanhetbouwen' ### Size: [[300,600]] -->
<div id="div-gpt-ad-4873663-1">
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-4873663-1'); });
</script>
</div>
<!-- End AdSlot 1 -->

Try to disable Adblock or any other advert-blocker.

Iframe option in google apps-script

Is it possible to display a website (eg. www.google.com ) using iframe in the sidebar of google docs while developing using app-script iframe .'X-Frame-Options' to 'same-origin' , error is occurring . I tried setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
Still the same error occurs.
Screenshot Link
Click this link for screenshot of error
===========
Code.gs
function onInstall(e) {
onOpen(e);
}
function onOpen(e){
var ui = DocumentApp.getUi();
ui.createMenu("IframeOptions").addItem("iFrame",'sviFrame').addToUi();
}
function sviFrame(){
var iframe = HtmlService.createHtmlOutputFromFile('Iframe').setSandboxMode(HtmlService.SandboxMode.IFRAME).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
/*var template = HtmlService.createTemplateFromFile('Iframe')
.evaluate()
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);*/
DocumentApp.getUi().showSidebar(iframe);
}
=============
Iframe.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<iframe src="https://www.google.com" height="1500" width="100%"></iframe>
</body>
<script>
alert(google.script.sandbox.mode);
</script>
</html>

Adword Conversation Tracking: Non-standard implementation error

I added Adword Conversation Tracking to my webshop.
I have Magento shop and inside of body tag I have following code:
<!-- Google Code for Conversion_Adwords_DrSchaette Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 123456789;
var google_conversion_language = "de";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "RstGBPX52wEEk8Dz4wS";
var google_conversion_currency = "EUR";
var google_conversion_value = 1.00;
var google_remarketing_only = false;
var google_conversion_order_id = "100031728";
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt=""
src="//www.googleadservices.com/pagead/conversion/123456789/?value=1.00&currency_code=EUR&label=RstGBPX52wEEk8Dz4wS&guid=ON&oid=100031728&script=0"/>
</div>
</noscript>
Google tag assistant report me following errors:
Code should be placed directly above the closing tag.
Conversion Value should be prefixed with standard currency.
Non-standard implementation
First error I know what it is, but second and third I don't know how to fix.

If the conversions are appearing properly in your AdWords account, then you can safely ignore these warnings. Google Tag Assistant can be a bit buggy sometimes.

Conversion tracking script - no HTTP response detected

I'm trying to insert a conversion tracking script into a thank you page that one is directed to upon completing a contact form. I'm working in Wordpress and using the WPWOX Custom Script Integration plugin to insert my script, which is as follows:
<!-- Google Code for contact-us/thank-you Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 978060811;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "OmTcCKWT6mQQi4yw0gM";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/978060811/?label=OmTcCKWT6mQQi4yw0gM&guid=ON&script=0"/>
</div>
</noscript>
However, when running Tag Assist I am given the error of "No HTTP response detected".
Any idea why I I'm getting the error? Here is the link to the thank you page http://expoprop.co.za/thank-you/

Resources