Adhesion ads


Adhesion ad units stick to the bottom or top of the page and remain at the forefront of the users device as they scroll through the page. Using Custom HTML, you can create an adhesion ad unit that can be formatted to your specific use case.

We recommend creating a dynamic zone (Publisher->New Zone->Dynamic) and then createing a dynamic ad campaign under your advertiser's campaign for your new adhesion ad unit.

For this example, we'll be using a Native Template to create the Adhesion Unit that can be reused for future ad items.


Video Guide

Step 1: Create a New Dynamic Zone for your Adhesion Unit

From your desired Publisher, create a New Zone using the "Dynamic" size setting.

Step 2: Create a New Native Template

Create a New Native Template with the following Variable(s)

The Variable Type should be "Image Tag" and called "Image"

Step 3: Copy & Paste the following Example Code:

Paste the following example code into the native template.

<div id="ab-bottom-wrapper">
            <div id="ab-bottom-icon">
                <a id="ab-icon-close" onclick="abHandleClose()">
                    <img src="https://servedbyadbutler.com/getad.img/?libBID=2295931" alt="close icon">
                </a>
            </div>
            <div id="ab-bottom-image-wrapper">
                <a target="_blank" href="[TRACKING_LINK]">
                    [%Image%]
                </a>
            </div>
        </div>
        <style>
            #ab-bottom-wrapper{
                display: block;
                z-index: 1000;
                width: 100%;
                background-color: rgba(69, 69, 69, 0.3);
                position: fixed;
                height: 90px;
                bottom: 0;
                left: 0;
            }
            #ab-bottom-image-wrapper{
                margin-left: auto;
                margin-right: auto;
                max-width: 728px;
                width:100%;
                height: 90px;
                display: block;
            }
            #ab-bottom-image-wrapper > a > img{
                width:100%;
                height: 100%;
            }
            #ab-bottom-icon{
                position: absolute;
                right: 0;
                cursor: pointer;
                margin-bottom: 0;
                overflow: hidden;
                width: 25px;
                height: 25px;
                margin-right: 0;
                font-family: Arial,sans-serif;
                font-size: 14px;
                z-index: 1001;
                color: #000000;
            }
            #ab-icon-close{
                z-index: 1000;
                width: 50px;
                height: 50px;
                margin: 0;
                -webkit-tap-highlight-color: rgba(0,0,0,0);
                -webkit-user-select: none;
                max-width: none;
            }
        </style>
        <script>
            function abHandleClose(){
                document.getElementById('ab-bottom-wrapper').style.display = "none";
            }
        </script>


Step 4: Create a New Native Ad Item using the Adhesion Example

Next, go into your desired Advertiser -> Campaign and create a New Native Ad Item.

Fill in the Destination URL, as well as select the Image you want to use within your Adhesion Ad Unit.

You will want to ensure the "Size" of the Ad Item is also set to Dynamic.


Step 5: Assign your campaign to your new Dynamic Zone

Assign the campaign containing your new dynamic adhesion zone, to your new dynamic zone that you created during step 1 of this tutorial.


Can't find what you're looking for?

Send us an email

hello@adbutler.com

Visit the blog

For more ad serving tips, industry news and AdButler insights.