Sustituir iframe bloqueado por tracking

sustituir iframe bloqueado por trackingSi queremos sustituir un iframe bloqueado por «tracking» publicitario u otro motivo, lo primero que hemos de hacer es detectar cuando dicho iframe ha sido bloqueado y no se está mostrando en la página del usuario. Como es obvio, para hacer esto hemos de interactuar con el html que se muestra en su lado y proceder en consecuencia.

Ahora bien, esta es una tarea bastante más fácil de plantear que de llevar a la práctica, porque cuando el contenido de un iframe no se muestra no hay ninguna forma elegante de descubrirlo y menos aún de solucionarlo: se puede usar javascript para hacerlo, pero muchos navegadores bloquean los scripts por seguridad y esto va a resultar poco útil en la mayoría de los casos.

Sustituir un iframe bloqueado por «tracking» publicitario

Si el propósito de nuestro iframe es el de contener un enlace publicitario que nos permita monetizar nuestra web, podemos enfocar nuestro problema desde un punto de vista simplificado: sustituimos el iframe bloqueado por una imagen que contiene un simple enlace publicitario con nuestro “id” que envíe al usuario que haga uso de él a la página publicitaria enlazada.

Pero, claro está, la pregunta es la misma de antes:

¿Cómo determinamos si el iframe ha sido bloqueado o no?

Pues bien, la respuesta simple es que no necesitamos determinar tal bloqueo, solo hemos de hacer flotar el iframe sobre el contenedor de la imagen, cuyos tamaños habremos igualado previamente, y también tenemos que desactivar los eventos “on click” en el propio iframe

Como resulta evidente, sustituir un iframe bloqueado por “tracking” resta algo de funcionalidad al iframe en aquellas páginas en las que se muestra su contenido y este no está bloqueado: eventos del puntero y ratón, pero el enlace secundario siempre estará activo y el “tracking” funcionará allí donde el iframe se muestre correctamente…

<div style="position: relative; width: 468px; height: 60px; left: 50%; margin-left: -234px;">
	<div style="width: 468px; height: 60px; position: relative; top: 0px; left: 0px;">
	        <a href="https://www.amazon.es/tbyb/huc?tag=TuIDafiliado-21">
                        <img src="https://lesidea.com/cajondesastre/wp-content/uploads/2021/10/imagen_amazon_468X60.jpg" alt="Na de na" />
                </a>
		<div style="width: 468 px; height: 60px; position: absolute; opacity: 0; pointer-events: none; top: 0px; left: 0px;">
			<iframe style="border: none;" src="https://rcm-eu.amazon-adsystem.com/e/cm?o=30&p=13&l=ur1&category=pw&banner=0ZATS4G1GHSWMYRRE7G2&f=ifr&linkID=3d9f8c9a9963261d4659ceaab136a696&t=lesidea-21&tracking_id=lesidea-21" width="468" height="60" frameborder="0" marginwidth="0" scrolling="no">
			</iframe>
		</div>
        </div>
</div>