Maison > interface Web > js tutoriel > le corps du texte

Comment implémenter JavaScript pour vérifier si les annonces sur la page sont bloquées par les compétences AdBlock_javascript

WBOY
Libérer: 2016-05-16 16:32:08
original
2134 Les gens l'ont consulté

Tout le monde déteste les publicités. Lorsque je regarde la télévision, regarde des films, regarde Youku ou navigue sur le Web, je déteste aussi les publicités qui circulent partout. La publicité est une chose désagréable. Cependant, pour un webmaster/blogueur de petite et moyenne taille, la publicité est presque la seule source de fonds pouvant soutenir le fonctionnement normal du site/blog. Si un blogueur se contente de publier des articles de manière altruiste, très peu d’entre eux peuvent durer plusieurs années. La plupart perdent lentement leur enthousiasme.

Firefox et Google Chrome disposent tous deux de plug-ins qui peuvent bloquer les publicités sur les pages, les plus connus sont AdBlock et AdBlock Plus. Il y a quelques jours, j'ai réalisé une statistique pour voir combien d'utilisateurs ayant consulté le site Web utilisaient le plug-in AdBlock, et j'ai constaté que ce nombre représentait en réalité 1/5 du nombre total de visiteurs.

1/5 est un grand nombre. Comment pouvons-nous remplacer l'espace publicitaire par d'autres images sur les pages des 1/5 utilisateurs qui utilisent le plug-in AdBlock ? Pour ce faire, vous devez d'abord disposer d'un moyen de savoir que le plug-in AdBlock est actuellement utilisé dans le navigateur. Après quelques tests, j'ai découvert qu'AdBlock est très sensible aux mots comme "Ad" ou "Google AD". Tant qu'il y a le mot "Ad" dans l'ID ou le nom de classe CSS d'un certain élément de page, cet élément sera essentiellement être AdBlocked Le plug-in est bloqué, c'est-à-dire display:none:

.

Copier le code Le code est le suivant :


Avec cette règle, je peux utiliser JavaScript pour savoir si le plug-in AdBlock est activé dans le navigateur actuel. Tout d’abord, nous mettons le code publicitaire Google dans un div et mettons un nom de classe qui représente clairement Google AD dans le nom de classe CSS du div :

Copier le code Le code est le suivant :


Ensuite utilisez Js pour détecter en bas de page :

Copier le code Le code est le suivant :

if ($('.google-ad').height() == 0) showOtherImage();

Il y a un autre problème ici. Les publicités Google sont généralement affichées après le chargement du Dom. Afin de garantir la détection après le chargement des publicités Google, une fonctionnalité d'exécution différée doit être ajoutée au code js pour éviter une fausse détection :

Copier le code Le code est le suivant :

$(fonction(){
setTimeout(function(){
si ($('.google-ad').height() == 0)
showAutreImage();
},3000);
});

Que pouvons-nous faire dans la méthode showOtherImage(); Nous pouvons mettre des photos promotionnelles et des liens de JD.com, Dangdang, Amazon et d'autres sites Web, et percevoir des commissions, qui peuvent être considérées comme une petite compensation pour les pertes.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!