Highlighted

AMPHTML ads not accepted by HTML5 validator

Community Beginner ,
Feb 20, 2020

Copy link to clipboard

Copied

Hello!

 

So, I decided to give it a go and created my first AMPHTML ad with Animate.

 

Now I have problem validating the ad with https://h5validator.appspot.com/

 

My ad doesn't pass the Advanced HTML5 check. I get the following error message:

 

One of your HTML5 assets is invalid and cannot be analyzed. Please correct any malformed assets and try again.

More details:
  • SVG_INVALID

 

Below you can see the source code of the ad. Would anyone here have an idea what could be the problem? I didn't modify the code in any way, it is exported from Animate.

 

 

 <!doctype html>
<html amp4ads>
<head>
	<!-- export v1.0.36-->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1">
	<style amp4ads-boilerplate>body{visibility:hidden}</style>
	<style amp-custom> img {position: absolute;} body {background-color: rgba(255,255,255,1.0000);}
	  svg {width: 300px; height: 300px; position: absolute;}     .hideForPreload { visibility: hidden; }   </style>
	<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
	<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
	<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>

<body  >
<amp-analytics type="googleanalytics" id="pageView">
<script type="application/json">
{
  "vars": {
	"account": "No ID found."
  },
  "triggers": {
	"trackPageview": {
	  "on": "visible",
	  "request": "pageview"
	}
  }
}
</script></amp-analytics>
<div id="svgWrapper" class="hideForPreload" >
	<svg style="width: 0; height: 0;">
		<defs>
			<g vector-effect="none" id="l0" >
                				    <g vector-effect="inherit" id="l0o0" style="transform: matrix(1.0000,0.0000,0.0000,1.0000,0.0000,0.0000); opacity: 1.0000; visibility: inherit;">
					<path vector-effect="inherit" fill="rgba(0,0,204,1.000)" stroke="none" d="M 300.0000 0.0000 L 0.0000 0.0000 L 0.0000 300.0000 L 300.0000 300.0000 L 300.0000 0.0000 "></path>
				    </g>
                			</g>
		</defs>
</svg>				<svg><use id="o0" xlink:href="#l0" ></use></svg>
	
</div>
<amp-animation layout="nodisplay" trigger="visibility">
	<script type="application/json">
		{"animations":[
         {
           "selector": "#svgWrapper",
           "duration":"1s",
           "iterations":1,
           "fill":"both",
           "keyframes": [
             {
               "offset" : 0,
               "visibility" : "inherit",
               "easing" : "step-start"
             },{
               "offset" : 1,
               "visibility" : "inherit",
               "easing" : "step-end"
              }
           ]
         },
{
	"selector" : "#o0",
	"duration" : "2s",
	"iterations" : "infinity",
	"fill" : "both",
	"keyframes" : [
		{
			"offset" : 0,
			"transform" : "matrix(1.0000,0.0000,0.0000,1.0000,0.0000,0.0000)",
			"opacity" : 1,
			"visibility" : "inherit",
			"easing" : "cubic-bezier(0.3333, 0.3333, 0.6667, 0.6667)"
		},
		{
			"offset" : 1,
			"transform" : "matrix(1.0000,0.0000,0.0000,1.0000,0.0000,0.0000)",
			"opacity" : 1,
			"visibility" : "inherit",
			"easing" : "step-end"
		}
	]
}
		]}
	</script>
</amp-animation>
</body>
</html>

 

TOPICS
Code, Error, Import and export, Product issue

Views

168

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

AMPHTML ads not accepted by HTML5 validator

Community Beginner ,
Feb 20, 2020

Copy link to clipboard

Copied

Hello!

 

So, I decided to give it a go and created my first AMPHTML ad with Animate.

 

Now I have problem validating the ad with https://h5validator.appspot.com/

 

My ad doesn't pass the Advanced HTML5 check. I get the following error message:

 

One of your HTML5 assets is invalid and cannot be analyzed. Please correct any malformed assets and try again.

More details:
  • SVG_INVALID

 

Below you can see the source code of the ad. Would anyone here have an idea what could be the problem? I didn't modify the code in any way, it is exported from Animate.

 

 

 <!doctype html>
<html amp4ads>
<head>
	<!-- export v1.0.36-->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1">
	<style amp4ads-boilerplate>body{visibility:hidden}</style>
	<style amp-custom> img {position: absolute;} body {background-color: rgba(255,255,255,1.0000);}
	  svg {width: 300px; height: 300px; position: absolute;}     .hideForPreload { visibility: hidden; }   </style>
	<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
	<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
	<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>

<body  >
<amp-analytics type="googleanalytics" id="pageView">
<script type="application/json">
{
  "vars": {
	"account": "No ID found."
  },
  "triggers": {
	"trackPageview": {
	  "on": "visible",
	  "request": "pageview"
	}
  }
}
</script></amp-analytics>
<div id="svgWrapper" class="hideForPreload" >
	<svg style="width: 0; height: 0;">
		<defs>
			<g vector-effect="none" id="l0" >
                				    <g vector-effect="inherit" id="l0o0" style="transform: matrix(1.0000,0.0000,0.0000,1.0000,0.0000,0.0000); opacity: 1.0000; visibility: inherit;">
					<path vector-effect="inherit" fill="rgba(0,0,204,1.000)" stroke="none" d="M 300.0000 0.0000 L 0.0000 0.0000 L 0.0000 300.0000 L 300.0000 300.0000 L 300.0000 0.0000 "></path>
				    </g>
                			</g>
		</defs>
</svg>				<svg><use id="o0" xlink:href="#l0" ></use></svg>
	
</div>
<amp-animation layout="nodisplay" trigger="visibility">
	<script type="application/json">
		{"animations":[
         {
           "selector": "#svgWrapper",
           "duration":"1s",
           "iterations":1,
           "fill":"both",
           "keyframes": [
             {
               "offset" : 0,
               "visibility" : "inherit",
               "easing" : "step-start"
             },{
               "offset" : 1,
               "visibility" : "inherit",
               "easing" : "step-end"
              }
           ]
         },
{
	"selector" : "#o0",
	"duration" : "2s",
	"iterations" : "infinity",
	"fill" : "both",
	"keyframes" : [
		{
			"offset" : 0,
			"transform" : "matrix(1.0000,0.0000,0.0000,1.0000,0.0000,0.0000)",
			"opacity" : 1,
			"visibility" : "inherit",
			"easing" : "cubic-bezier(0.3333, 0.3333, 0.6667, 0.6667)"
		},
		{
			"offset" : 1,
			"transform" : "matrix(1.0000,0.0000,0.0000,1.0000,0.0000,0.0000)",
			"opacity" : 1,
			"visibility" : "inherit",
			"easing" : "step-end"
		}
	]
}
		]}
	</script>
</amp-animation>
</body>
</html>

 

TOPICS
Code, Error, Import and export, Product issue

Views

169

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 20, 2020 1
New Here ,
Feb 26, 2020

Copy link to clipboard

Copied

@tanelij39936801 found a solution yet? please share if there any. 

 

I am facing the same issue. I know the AMPHTML plugin is in beta but a quick fix could be a great help.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 26, 2020 0
Community Beginner ,
Feb 26, 2020

Copy link to clipboard

Copied

Hello Vichili

 

Unfortunately I didn't find a solution yet.

 

However, I'm pretty sure the problem lies within the <svg><use></use></svg> tag, since after removing this tag the error doesn't appear anymore. Unfortunately, this also breaks the ad as well since content't of the ad won't show if you remove it.

 

You could find a workaround to this, but in my opinion it doesn't make sense as ads should work after you export them from Animate. If they don't, its pretty much useless to create them in this format as we don't want to stay hassling with the source code after exporting the ad.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 26, 2020 0
New Here ,
Feb 26, 2020

Copy link to clipboard

Copied

Thanks for the quick reply mate!

 

Like you said it sould work well after exporting from Animate and i dont got the time from the client to workaround with the tags. 

 

Not intrested to go for any other tools as i have so much years of experiance working with Adobe Flash. 

 

Lets see.

 

Thank you,

Vichili

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 26, 2020 0
Community Beginner ,
Feb 26, 2020

Copy link to clipboard

Copied

Hopefully they will fix it soon. As you said, its still beta, and because of this issue, its useless for commercial use at the moment. Another problem is that at least for me, I needed to downgrade my Animate to version 19 to be even able to create these ads.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 26, 2020 0