Advertisement script in Jquery

Hi Everybody,


Today we will discuss about advertisement script in Jquery.

All we know in today timing all product required advertisement, so in web application also advertisement display on third party website.When we click on these advertisement, main website of product open either in browser new tab or in any pop up or iframe etc.

For this we require two things

1. Script that is hosted on product website server(inside your project_dir/js_dir/adscript.js )

Code inside your project_dir/js_dir/adscript.js

var siteAddress =  '//yourdomain.com/';
(function() {
    include_jQueryFilesToPage();
})();

function afterloadScript() {
    var adddiv = $('<div class="yourproduct-ad"><div class="yourproduct yourproduct_1279518" id="yourproduct_1279518" data-serve="CV7DPKT"><a rel="nofollow" target="_blank" id="yourproduct_5568645" title="Product Title" class="ad0 odd " href="'+siteAddress+'/route_of_page_you_want_to_open/'" data-title="Product Title" data-width="700" data-height="500"><img width="200" height="200" alt="" src="'+siteAddress+'/images/adscript.png"></a></div></div>');
    $("body").append(adddiv);
    adjustAd();
    var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" id="yourproduct_adscreen" allowfullscreen></iframe>');
    dialog = $("<div id='oopenDiv' style='padding:0'></div>").append(iframe).appendTo("body").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        width: "auto",
        height: "auto",
        close: function () {
            iframe.attr("src", siteAddress+"route_of_page_you_want_to_open");
        }
    });

    $("#yourproduct_5568645").on("click", function (e) {
        e.preventDefault();
        var src = $(this).attr("href");
        var title = $(this).attr("data-title");
        var width = $(this).attr("data-width");
        var height = $(this).attr("data-height");
        iframe.attr({
            width: +width,
            height: +height,
            src: src
        });
        dialog.dialog("option", "title", title).dialog("open");
    });
    setTimeout($('body').addClass('add_script_wrapper'), 2000);
}


function adjustAd(){
    var iframeHtml = $("body").find(".yourproduct-ad").html();
    $(".adsbyproduct").parent().append('<div class="product-ad">'+iframeHtml+'</div>');
    $("body").find(".yourproduct-ad").remove();
}


function include_jQueryFilesToPage() {
    var jqCSSFilePath = siteAddress + 'css/code.jquery.com-ui-1.10.3-themes-smoothness-jquery-ui.css';
    var jqStyleCSSFilePath = siteAddress + 'css/style.css';
    var jqCoreFilePath = siteAddress + 'js/code.jquery.com-jquery.js';
    var jqUIFilePath = siteAddress + 'js/code.jquery.com-ui-1.10.3-jquery-ui.js';
    var head = document.getElementsByTagName('head')[0];
    // jQuery CSS jnclude
    var jqCSS = 'cssIDJQ';  // you could encode the css path itself to generate id.
    if (!document.getElementById(jqCSS)) {
        var link = document.createElement('link');
        link.id = jqCSS;
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = jqCSSFilePath;
        link.media = 'all';
        head.appendChild(link);
    }

    // style CSS jnclude
    var jqStyleCSS = 'styleCssIDJQ';  // you could encode the css path itself to generate id.
    if (!document.getElementById(jqStyleCSS)) {
        var link = document.createElement('link');
        link.id = jqStyleCSS;
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = jqStyleCSSFilePath;
        link.media = 'all';
        head.appendChild(link);
    }

    // Core jQuery include
    var jqc = "coreFileRefIDJQ";
    if (!document.getElementById(jqc)) {
        var coreJs = document.createElement('script');
        coreJs.onload = function () {
            //alert("Script loaded and ready");
        };
        coreJs.src = jqCoreFilePath;
        head.appendChild(coreJs);
    }
    // jQueryUI include
    var jqUI = "uiFileRefIDJQ";
    if (!document.getElementById(jqUI)) {
        var coreJsUi = document.createElement('script');
        coreJsUi.onload = function () {
            afterloadScript();
        }
        coreJsUi.src = jqUIFilePath;
        head.appendChild(coreJsUi);
    }
}

2. One line advertisement script that is used by third party website, where you want to display your product advertisement.

Now finally the one line advertisement script(given below) copy and paste the code from below, in every page of the website(where you want to display your ad), just before the closing body tag(inside a div).

<script type="text/javascript" async src= "yourdomain/js/adscript.js"></script><ins class="adsbyproduct"></ins>


Thanks