Cách add code click cho banner từ GDN

Hiện tại có rất nhiều banner Khách hàng đang chạy GDN hoặc bên khác muốn tận dụng để chuyển sang chạy bên Admicro. Muốn như vậy, ta phải thực hiện các bước sau:

  • Kiểm tra xem banner đã đúng quy chuẩn của Admicro hay chưa.
  • Nếu banner được làm bằng tool Animate CC 2017 trở lên (còn file .FLA) thì xóa code click của GDN đi và sử dụng bộ symbol do Admicro cung cấp cho Animate CC.
  • Trong trường hợp không có file .FLA (file tạo banner) hoặc sử dụng tool Edge Animate hoặc Google Web Designer thì ta làm theo hướng dẫn dưới đây:

Animate CC:

Mở file .js trong folder banner. Tìm đến dòng click replay của banner (mỗi người sẽ đặt tên biến và code khác nhau nên ta sẽ phải tự tìm), thường sẽ có đoạn code sau this.gotoAndPlay(1); hoặc this.gotoAndPlay(0); (ví dụ như hình dưới)


nên ta tìm đến dòng này và xử lý như sau: 

  • Thêm đoạn code sau vào trước dòng lệnh this.stop();  :
    flagReplay = true;
    if(firstRun == false){
    firstRun = true;
    var canvas = document.getElementById("canvas");
    canvas.addEventListener("mouseover", function(){
    MouseOverCanvas();
    });
    canvas.addEventListener("mouseout", function(){
    MouseOutCanvas();
    });
    if(typeof createDOM == 'function') { createDOM(); }
    }
     và thêm dòng code sau vào sau dòng lệnh this.stop();  :
    createjs.Ticker.removeEventListener("tick", stage);

  • Tiếp sau đó ta thêm dòng code sau vào this.gotoAndPlay(1);  :
    flagReplay = false;
    Sau khi thêm vào sẽ như hình bên dưới 
  • Tiếp tục, ta mở file .html và thêm đoạn code sau vào trong thẻ <boby>:

    <a id="click1" href="" target="_blank"></a>
    <a id="click" href="" target="_blank"></a>
    <style>
    #click1{
    position:absolute;width: 300px;height: 220px;top: 0px;left: 0px;z-index: 9999;
    }
    #click{
    position:absolute;width:270px;height: 30px;top:220px;left: 0;z-index: 9999;
    }
    </style>
    <script type="text/javascript">
    var getQuery = function(e) {
    var d = "";
    return (e = new RegExp("[?&]" + encodeURIComponent(e) + "=([^&]*)").exec(location.search)) && (d = decodeURIComponent(e[1])), d
    },
    URLAdm = getQuery("url"),
    admid = getQuery("admid");
    document.getElementById('click').href=URLAdm;
    document.getElementById('click1').href=URLAdm;
    </script>

    như hình bên dưới:


    ở đây ta cần lưu ý chỉnh sửa lại css trong thẻ <style> sao cho phù hợp với banner để có thể click đc nút replay trong banner.
  • Sau đó cho banner qua tool chuẩn hóa của Admicro, rồi test, nếu tool báo banner ok thì ta có thể up banner.
  • File mẫu tại đây: Download

Edge Animate:

  • Mở file .html trong folder của banner.
  • Trường hợp còn file .an(file tạo banner) thì mở file và xóa code click landing của GDN đi. Hoặc trường hợp không còn file .an thì mở xxx_edgeActions.js và xóa code click landing của GDN tại file này đi.
  • Thêm đoạn code dưới đây vào cuối cùng của thẻ <body> (như hình dưới)
  • <script type="text/javascript">
    document.getElementById("Stage").onclick = function(){
    var getQuery = function(a) {
    var v = '';
    if (a = (new RegExp('[?&]' + encodeURIComponent(a) + '=([^&]*)')).exec(location.search)) {
    v = decodeURIComponent(a[1]);
    }
    return v;
    };
    window.URLAdm=getQuery('url');
    window.open(URLAdm, "_blank");
    }
    </script>

  • Lưu lại và chạy.
  • File mẫu tại đây: Download

Google Web Designer:

  • Mở file .html trong folder của banner.
  • Thêm đoạn code dưới đây vào cuối cùng của thẻ <body> (như hình dưới)
    <script type="text/javascript">
    document.getElementById("gwd-ad").onclick = function(){
    var getQuery = function(a) {
    var v = '';
    if (a = (new RegExp('[?&]' + encodeURIComponent(a) + '=([^&]*)')).exec(location.search)) {
    v = decodeURIComponent(a[1]);
    }
    return v;
    };
    window.URLAdm=getQuery('url');
    window.open(URLAdm, "_blank");
    }
    </script>

  • Lưu lại và chạy.
  • File mẫu tại đây: Download

 

FAQ

Login