Tampilan dialog browser blocking

Mengalihkan halaman web dari browser i.e UC Browser ke lainnya

Terkadang ada browser/penjelajah web tertentu yang Anda tidak inginkan untuk menampilkan halaman situs/web Anda, dan mengalihkannya ke browser lainnya, misalnya dari UC Browser ke Chrome. Adapun beberapa alasan kenapa ingin redirect atau mengalihkannya, seperti:

  • Tampilan situs tidak bagus, seperti kode html, css ataupun script lainnya tidak dapat dibaca.
  • Ada beberapa kode/script dalam situs yang tidak mendukung untuk ditampikan di browser tersebut, misal script iklan, video, slider dan lainnya diblokir.
  • Adanya beberapa fitur dari browser tersebut yang mengganggu navigasi halaman situs.

Cara yang sederhana dengan menerapkan kode JavaScript berikut ini di situs Anda supaya membuat pengunjung beralih ke browser lain.

Contoh sederhana untuk beralih dari UBrowser/UC Browser ke browser Chrome.

<script type='text/javascript'>
var ua = navigator.userAgent || navigator.vendor || window.opera,
    userAgent = ua.toLowerCase(),
    desktopURL = '//www.google.com/chrome/',
    mobileURL = 'googlechrome://navigate?url=', //URL Scheme opener
    loc = window.location;

//create condition to search match user-agent i.e ubrowser or ucbrowser
if ( /ubrowser|ucbrowser/i.test( userAgent ) ) {

    //create condition if it's mobile, if chrome installed it will be open new browser
    if ( /android/i.test( userAgent ) ) {
        loc.href = mobileURL + loc.href;
    }

    //if not installed, push user to download the browser in mobile or desktop
    setTimeout( function() {
        if ( window.confirm( 'This page ' + loc.href + ' is best viewed with Chrome browser. Download sekarang?' ) ) {
            loc.href = desktopURL;
        } else {
            loc.replace( desktopURL );
        }
    }, 2500 );//timeout in milliseconds
}
</script>

Untuk tampilan mobile, peralihan ini tidak bisa serta merta dilakukan jika pengunjung tidak meng-install aplikasi browser Chrome di smartphone-nya. Oleh karena itu dibuatlah tampilan dialog pesan kepada visitor untuk download browser tersebut terlebih dahulu.

Menerapkan di blog WordPress

Jika menggunakan WordPress, kode ini dapat dikembangkan sedikit dan membuat dialog untuk menampilkan pesan download.

add_action( 'wp_footer', function() {
    //set user agent i.e 'ubrowser|ucbrowser'
    //argument variable in js
    $args = [
        'text'      => [
            'button' => __( 'Download Now', 'bbccn' ),
            'title'  => __( 'This page is best viewed with Chrome browser', 'bbccn' )
        ],
        'url'       => [
            'icon'    => '//lh3.googleusercontent.com/nYhPnY2I-e9rpqnid9u9aAODz4C04OycEGxqHG5vxFnA35OGmLMrrUmhM9eaHKJ7liB-=w20',
            'mobile'  => 'googlechrome://navigate?url=', //URL Scheme opener
            'android' => '//play.google.com/store/apps/details?id=com.android.chrome',
            'ios'     => '//itunes.apple.com/us/app/chrome/id535886823',
            'desktop' => '//www.google.com/chrome/'
        ],
        'userAgent' => 'ubrowser|ucbrowser'
    ];

    //add filter to change value of js variables
    $args = apply_filters( 'args_variable_js_bbccn', $args );

    printf( "<script type='text/javascript'>\n/* < ![CDATA[ */\nvar jvL10n=%s\n/* ]]> */\n</script>\n", json_encode( $args ) );
    ?>
<script type='text/javascript'>
  var checkUA = function() {
    var pattern = new RegExp( jvL10n.userAgent ),
        ua = navigator.userAgent || navigator.vendor || window.opera,
        userAgent = ua.toLowerCase(),
        curURL = window.location.hostname + window.location.pathname,
        newBrowserURL = jvL10n.url.mobile + curURL;

    //create condition to search match user-agent i.e ubrowser or ucbrowser
    if ( pattern.test( userAgent ) ) {
        //open new browser + current url in mobile
        if ( /android/i.test( userAgent ) )
            window.location.href = newBrowserURL;

        if ( /ipad|iphone|ipod/.test( userAgent ) )
           window.location.href = newBrowserURL.replace( 'navigate?url=', '' );

        //create dialog + button
        setTimeout( function() {
            var div = document.createElement( 'div' ),
                layer = div.cloneNode( true ),
                h3 = document.createElement( 'h3' ),
                button = document.createElement( 'button' ),
                title = document.createTextNode( jvL10n.text.title ),
                btnTxt = document.createTextNode( jvL10n.text.button ),
                url;

            h3.appendChild( title );
            button.setAttribute( 'style', 'background:#800000 url('+ jvL10n.url.icon +') left 5% center no-repeat;color:#ffffff;padding-left:33px' );
            button.appendChild( btnTxt );
            layer.className = 'bbccn';
            layer.setAttribute( 'style', 'background:#ffffff;opacity:0.8;width:50%;border:1px solid #efefef;padding:50px;position:fixed;z-index:99999;top:50%;left:50%;transform: translate(-50%, -50%);text-align:center' );
            div.setAttribute( 'style', 'opacity:0.85;background:#000000;width:100%;height:100%;position:fixed;z-index:99998;top:0' );
            layer.appendChild( h3 );
            layer.appendChild( button );
            document.documentElement.style.overflow = 'hidden';
            document.body.appendChild( div );
            document.body.appendChild( layer );

            //show dialog
            if ( /android/i.test( userAgent ) ) {
                url = jvL10n.url.android;
            } else if ( /ipad|iphone|ipod/.test( userAgent ) && !window.MSStream ) {
                url = jvL10n.url.ios;
            } else {
                url = jvL10n.url.desktop;
            }

            button.addEventListener( 'click', function() {
                window.open( url );
            }, true );
        }, 2500 );//timeout in milliseconds
    }
  };
  document.addEventListener( 'DOMContentLoaded', checkUA, true );
</script><?php
  echo "\n";
}, 1000 );

Simpan kode tersebut di file functions.php theme WP Anda, dan buka situs (yang sudah di tambahkan kode di atas) melalui browser UBrowser/UC Browser untuk melihat cara kerja script ini.

Mengganti atau menambahkan user-agent
Jika ingin mengganti atau menambahkan user agent, cukup cari dan ubah kode ubrowser|ucbrowser kode di atas. Contoh tambah user agent “Opera” dan “Yandex”, maka ubrowser|ucbrowser|opera|yandex.

Atau, gunakan filter args_variable_js_bbccn tanpa harus mengubah kode tersebut. Tambahkan kode berikut di file functions.php theme Anda.

add_filter( 'args_variable_js_bbccn', function( $args ) {
    //add user agent separated by |
    $args['userAgent'] = $args['userAgent'] . '|opera|yandex';

    //change user agent
    #$args['userAgent'] = 'opera|yandex';

    return $args;
} );

Selain mengubah list user-agent, parameter value variable JS lainnya dapat juga diubah, seperti tulisan yang tampil atau url peralihan. Gunakan class name .bbccn untuk modifikasi CSS untuk tampilan dialog pesan.

URL Scheme Opener Mobile

  • firefox://open-url?url=http://example.com
    Membuka browser Firefox, tes berhasil dari Chrome IOS
  • googlechrome://navigate?url=example.com
    Membuka browser Chrome, tes berhasil dari UCBrowser Android
  • googlechrome://example.com
    Membuka browser Chrome, tes berhasil dari UCBrowser IOS
  • uc-url:example.com
    Membuka UC Browser, untuk Windows Phone 8.

Download dalam bentuk Plugin WP (Browser Blocking)

Kode JavaScript dalam plugin ini sudah dilakukan minifikasi untuk kode js-nya, serta penambahan terjemahan bahasa Indonesia. Silakan download, instal dan aktifkan tanpa perlu dilakukan pengaturan.

🔗 CCNINJA Browser Blocking v1.0.1

You are done! If any, your feedback would be really helpful.

Leave a Reply

*

*