web-dev-qa-db-ja.com

非同期のGoogle AdSense、つまりノンブロッキングを使用することはできますか？

Google Analyticsを使用する非同期メソッド があることは知っていますが、AdSenseに似たようなものはありますか？現在の検索で見つからない-欠けている一般的なトリックがあるかどうか疑問に思っていましたか？

performancepage-speedgoogle-adsense
11
Tom

これはそれを行います：

<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>

このブログアイテムを参照してください " Google Ads Async（asynchronous） "基本的に、広告コードを完全に非同期で実行する方法を見つけました。

6
FigmentEngine

はい、方法があります-iframeを使用します。お客様のサイトの1つで、広告コンテンツの非同期読み込みを行います。

Iframeでの広告のサポートについては、まずGoogleに連絡する必要があります（このサイトを構築した時点では広く利用できませんでした）。その後、JavaScriptを使用してAdSense iframeコンテンツの読み込みをトリガーできます。

Googleのiframeサポートがあれば、ソリューションは本当に簡単です。

編集：のように見える-Virtuosi Mediaが参照している投稿から-この慣行はGoogleに歓迎されないかもしれない...

編集2：これはiframeで使用するコードです。 Googleにサポートを依頼することなく、機能するかどうかを試してみてください。読みやすくするためにtype="text/javascript" language="JavaScript"を削除しました：

<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>

すべてのスロットをアドスロットIDで埋めるため、PSAは表示されません。

5
Oliver

プレースホルダーを使用し、Adsenseコードを呼び出してから、プレースホルダーを広告に切り替えることができます。私は自分のサイトで次のようなものを使用しています：

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

Googleは、HTMLコードで最も重要な広告の位置を最初に設定する必要があると言われたときに、これを行うことを推奨しています。それを実現するには、JSまたはCSSを使用して、重要度の低い広告ユニットをページの（視覚的な）上部に移動する必要があります。

しかし、私が知る限り、AdSenseは既に非同期で広告をレンダリングしています。ページ読み込みがブロックされるのはめったにありません。しかし、これについてはわかりません。

2
Bart van Bragt

私が見る限り、彼らは現在オプションを提供していません。 Google TOSで許可されている場合の最適なオプションは、プレースホルダー要素を使用し、ページの読み込み後にJavaScriptで動的に置き換えることです。ただし、TOSに反しているように見えます。詳細については、 this thread を参照してください。

2
Virtuosi Media

これを行う必要はありません。 Google AdSenseのshow_ads.jsはやや非同期になりました。公式ブログで詳細な詳細を読むことができます：

あなたのWeb、0.5秒早く

広告コードを変更する必要はありません。

0
Salman A

グーグルは「ウェブを高速化する」と言っているので、グーグル広告が表示されている場合にのみロードするように上記のコードを変更します。コードは1つのGoogleプレイス広告でのみ「現状のまま」機能しますが、より多くの広告に簡単に変更できると思います。他のコードとの違いは

  • がユーザーに表示される場合にのみ広告を読み込みます
  • 広告を読み込み、divに配置します（ページの最後ではありません）
  • （最初のものだけでなく）必要なすべてのアイテムを読み込むため、すべてのブラウザーで動作します。

後で広告を配置するdivから始めます。

<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>

私はそれをテストし、すべてのブラウザーで動作します。ブラウザーを困難にすることを避けるために、jQueryを使用してより安全にしています。

追伸、私は同様のコードを作成して、Googleプラス、Facebook、およびほとんどの場合に理由なくロードされるすべてのアイテムをロードしています。

0
Aristos