Prevent amp-iframe script from appearing more than once in document

[kevinlisota]

I need to add an amp-iframe to every page to support prebid user sync, like the instructions here: http://prebid.org/dev-docs/show-prebid-ads-on-amp-pages.html

My first attempt was to simply place the amp-iframe in my AMP footer template and then include the amp-iframe js extension in the header of every page.

However, in the case where there is existing iframe content within the AMP post, this plugin's iframe sanitizer kicks in and adds another copy of the amp-iframe js extension script to the header. This results in the following error:

The tag 'amp-iframe extension .js script' appears more than once in the document. This will soon be an error.

Next, I tried to insert the amp-iframe element via the_content filter, specifically targeting is_amp_endpoint. That included the amp-iframe element, but did not invoke the santizer to generate the requires amp-iframe script in the header.

I'm sure I'm missing something simple here. How would I embed an amp-iframe on every page (needs to be near bottom of page) and ensure that the amp-iframe js script is included once and only once on each page.

[westonruter]

What is the code you were using to add the amp-iframe JS extension? The best way to do so is something like this:

add_filter( 'amp_post_template_data', function( $data ) {
	$data['amp_component_scripts'] = array_merge(
		$data['amp_component_scripts'],
		array(
			'amp-iframe' => 'https://cdn.ampproject.org/v0/amp-iframe-latest.js',
		)
	);
	return $data;
} );

It will prevent duplicates from happening.

[kevinlisota]

Thanks. This is how I am injecting various scripts in the header, which caused the duplicates I mentioned.

function add_amp_scripts() {
	?>
	<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
    <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
    <script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
	<?php
}
add_action( 'amp_post_template_head', 'add_amp_scripts' );

[westonruter]

@kevinlisota great. If you switch to using the above amp_post_template_data filter then this should be fixed for you. You can add amp-social-share and any other such scripts alongside amp-iframe as I gave in my example in #1095 (comment)

[udegbunamchuks]

What is the code you were using to add the amp-iframe JS extension? The best way to do so is something like this:

add_filter( 'amp_post_template_data', function( $data ) {
	$data['amp_component_scripts'] = array_merge(
		$data['amp_component_scripts'],
		array(
			'amp-iframe' => 'https://cdn.ampproject.org/v0/amp-iframe-latest.js',
		)
	);
	return $data;
} );

It will prevent duplicates from happening.

Thanks a lot sir. Scripts appearing more than once were driving me nuts. This fixed them all.