web-dev-qa-db-fra.com

Est-il possible d’utiliser Google Adsense asynchrone, c’est-à-dire non bloquant?

Je sais qu'il existe une méthode asynchrone d'utilisation de Google Analytics mais existe-t-il une solution similaire pour adsense? Je ne parviens pas à en trouver un parmi mes recherches en cours. Je me demandais s’il manque un truc commun?

performancepage-speedgoogle-adsense
11
Tom

cela le fait:

<script type="text/javascript"><!--
// dynamically Load Ads out-of-band
setTimeout((function ()
{
    // placeholder for ads
        var eleAds = document.createElement("ads");  
        // dynamic script element
        var eleScript = document.createElement("script");  
        // remember the implementation of document.write function
        w = document.write;
        // override and replace with our version
        document.write = (function(params)
        {
        // replace our placeholder with real ads
        eleAds.innerHTML = params;
        // put the old implementation back in place
        // Aristos, add this check because called more than ones
        //  and ends, with this symbol.
        if(params.indexOf("</ins>") != -1)
            document.write=w;
        });
        // setup the ads script element
        eleScript.setAttribute("type", "text/javascript");
        eleScript.setAttribute("src", "http://pagead2.googlesyndication.com/pagead/show_ads.js");
        // add the two elements, causing the ads script to run
        document.body.appendChild(eleAds);              
        document.body.appendChild(eleScript);           
}), 1);
                //-->
        </script>

voir cet élément de blog " Google Ads Async (asynchrone) ". En gros, j'ai trouvé un moyen de faire en sorte que le code d'annonce soit réellement async.

6
FigmentEngine

Oui, il y a un moyen - d'utiliser des iframes. Nous effectuons un chargement asynchrone de contenu publicitaire sur l'un des sites de nos clients.

Vous devez d’abord contacter Google pour obtenir une assistance sur ses annonces dans les iframes (qui n’étaient pas encore largement disponibles au moment de la création de ce site). Vous pouvez ensuite utiliser JavaScript pour déclencher le chargement du contenu de l'iframe AdSense, ce que nous faisons.

La solution est vraiment simple une fois que vous avez pris en charge le support iframe de Google.

Edit: On dirait - d'après les articles référencés par Virtuosi Media - cette pratique pourrait ne pas être la bienvenue pour Google ...

Edit 2: C'est le code que nous utilisons dans l'iframe. Essayez-le pour voir si cela fonctionne, peut-être même sans demander spécifiquement l'assistance de Google. Supprimé type="text/javascript" language="JavaScript" pour une meilleure lisibilité:

<head runat="server">
    <script src="http://partner.googleadservices.com/gampad/google_service.js">
    </script>

    <script>
        GS_googleAddAdSenseService("ca-pub-YOURKEY");
        GS_googleEnableAllServices();
    </script>

    <!-- For this method, it is not necessary to define the slots in advance 
         and we do not use the FetchAds function -->
    <script>
        GA_googleUseIframeRendering(true);    //<%-- This indicates iframe rendering for all slots --%>
    </script>
</head>
<body>
    <form id="formAd" runat="server">
        <div>
            <script>
                GA_googleFillSlotWithSize("ca-pub-YOURKEY", "AdSlotId",
                                          iframeWidth, iframeHeight);
            </script>
        </div>
    </form>
</body>

Nous occupons tous nos créneaux via des identifiants d'adslot, nous ne voyons donc aucun message d'intérêt public.

5
Oliver

Vous pouvez utiliser un espace réservé, appeler le code Adsense, puis changer d'espace réservé avec l'annonce. J'utilise quelque chose comme ça sur mon site:

if ( ad1 = document.getElementById('ad-top') )
{
    ad2 = document.getElementById('banner_tmp468');
    ad1.appendChild(ad2);
    ad2.style.display = 'block';
}

Google recommande même de le faire quand ils disent que vous devriez avoir la position de votre annonce la plus importante en premier dans votre code HTML. Si vous voulez accomplir cela, vous devrez utiliser JS ou CSS pour déplacer des blocs d'annonces moins importants en haut (visuel) de votre page.

Mais pour autant que je sache, AdSense affiche déjà les annonces de manière asynchrone. Je ne l'ai que très rarement vu bloquer le chargement de page. Pas sûr à ce sujet cependant.

2
Bart van Bragt

Pour l'instant, ils n'offrent pas cette option. Votre meilleure option, si cela avait été autorisé par le TOS de Google, aurait été d'utiliser un élément de substitution et de le remplacer dynamiquement par JavaScript après le chargement de la page. Cependant, il semble que cela puisse être contre le TOS. Voir ce fil pour plus de détails.

2
Virtuosi Media

Il n'y a plus besoin de faire cela. Show_ads.js de Google AdSense maintenant quelque peu asynchrone. Vous pouvez en savoir plus sur les détails sanglants sur le blog officiel:

Votre Web, une demi-seconde plus tôt

Il n'est pas nécessaire de changer le code de l'annonce.

0
Salman A

Parce que Google dit "rend le Web plus rapide", je modifie le code ci-dessus pour charger les annonces Google uniquement lorsqu'elles sont visibles. Le code fonctionne "tel quel" pour une seule annonce Google Place, mais je pense que vous pouvez facilement le modifier pour plus d'annonces. Le différent avec l'autre code sont

  • Ne chargez les annonces que si elles sont visibles pour l'utilisateur
  • Charge les annonces et les place sur un div (pas au bas de la page)
  • Fonctionne avec tous les navigateurs car je charge tous les éléments nécessaires (pas seulement le premier)

À partir de la div que je place les annonces plus tard.

<div id="adSpot" ></div>

<script type="text/javascript">
    // load the script with cache
    function getScriptCcd(url, callback)
    {
        jQuery.ajax({
                type: "GET",
                url: url,
                success: callback,
                dataType: "script",
                cache: true
        });
    };

    // to unbind the scroll I keep the total binds of scroll
    // in this example I have only one.
    var cPosaScrollExo = 0;
    // bind the scrool to monitor if ads are visible    
    function addThisScroll(RunThisFunction)
    {
        jQuery(window).scroll(RunThisFunction);
        cPosaScrollExo++;
    }
    // unbind all scroll if all they not needed any more
    function unBindScroll()
    {
        cPosaScrollExo--;

        if(cPosaScrollExo <= 0)
        {
            cPosaScrollExo = 0;
            jQuery(window).unbind('scroll');
        }
    }

    // here I check if the element is visible to the user with a 100pixel advanced.
    function isScrolledOnMatia(pioSimio) 
    {
        var SimioPouTheloNaFenete = (jQuery(pioSimio).offset().top - 100 );
        var scrollPosition = jQuery(window).height() + jQuery(window).scrollTop();

        return (scrollPosition >= SimioPouTheloNaFenete );
    }   

    // the ads informations
    google_ad_client = "pub-XXXXXXXXXXXXXXX";
    google_ad_slot = "XXXXX";
    google_ad_width = 468;
    google_ad_height = 60;

    var GoogleIsVisible = false;
    // we call this function on every window scroll
    function CheckAdsVisibility()
    {
        if(!GoogleIsVisible)
        {
            if(isScrolledOnMatia("#adSpot"))
            {
                unBindScroll();
                GoogleIsVisible = true;

                            // finally I go to show the ads
                LoadAdsLater();
            }
        }
    }

    // here is a modification of the function that load the ads
    function LoadAdsLater()
    {
        try
        {
                    // Aristos: Nice trick here 
            // remember the implementation of document.write function
            w = document.write;

            // override and replace with our version
            document.write = (function(params)
            {
                jQuery("#adSpot").append(params);

                // put the old implementation back in place when
                            //  all writes are finish
                if(params.indexOf("</ins>") != -1)
                    document.write=w;
            });             

            // loading script
            getScriptCcd("http://pagead2.googlesyndication.com/pagead/show_ads.js");
        }
        catch(e)
        {
            // check for errors on debug
        }
    }

    // and here we setup the hole thin
    jQuery(document).ready(function() 
    {       
            // check if all ready is visible !
        CheckAdsVisibility();
            // bind the scroll
        addThisScroll(CheckAdsVisibility);
    });
</script>

Je l'ai testé et fonctionnant avec tous les navigateurs, j'utilise simplement jQuery pour être plus sûr que d'éviter les navigateurs difficiles.

ps, j'ai faire le même code pour charger le google plus, et le facebook et tout ce que les éléments qui se chargent sans raison la plupart du temps.

0
Aristos