Push the boundaries of the traditional ad server

How To: add Pagination into Long Creative Format - Carousel Ad Unit

Reply
SAS Employee
Posts: 4

How To: add Pagination into Long Creative Format - Carousel Ad Unit

[ Edited ]

This article is designed for Chrome / Firefox Add-On Developer.

 

1) Do you know the code below will tell you the creative format id of the creative page:

$("#creative_format_id").val(); 

p1.PNG

 

Benfit, it will give you an ability to apply different CSS style based on different creative format id.

 

 

2a) Try this code to hide the HTML, ALT Text and ALT Image field if you don't need them:

$("#creative_template_input,#creative_alt_input,#creative_alt_image_type_input").hide(); 

 

2b) And this, for hidden MEDIA and CLICKURL from the creative format:

$("#creative_location_type_input,#creative_image_url,#creative_click_url_input").hide();

 

p5.PNG

 

 

3) Are you thinking about to setup pagination for caoursel ad unit as it will be too many fields in the single creative?

if you can start label the field in the following naming conversation, e.g.:

0-Brand_Logo

0-Brand_URL

0-Brand_Sponsored_Text

1-IMG

1-URL

1-TXT

1-CTA

2-IMG

2-URL

2-TXT

2-CTA

 

You can run the following code to group them with different CSS classes:

$('label:contains("0-")').parents('li').addClass("Group0");
$('label:contains("1-")').parents('li').addClass("Group1");
$('label:contains("2-")').parents('li').addClass("Group2");

 

My example below, is using the Tab to paginate the general branding message, as well as the 1st and 2nd Frame of the caoursel ad unit.  By inject a Tab Navigation bar to control the Group0, Group1, and Group2 class, for instance:

 

<div class="tabs">
<ul>
<li class="first"><a id="p0" href="javascript&colon;void(0)">General</a></li>
<li ><a id="p1" href="javascript&colon;void(0)">Frame 1</a></li>
<li ><a id="p2" href="javascript&colon;void(0)">Frame 2</a></li>
</ul>
</div>

 

this is basic show / hide jquery code and trigger on click event:

$('#p0').on('click', function(){
  $('[class*=Group]').hide();
  $('.Group0').show();
});
$('#p1').on('click', function(){
  $('[class*=Group]').hide();
  $('.Group1').show();
});
$('#p2').on('click', function(){
  $('[class*=Group]').hide();
  $('.Group2').show();
});

 

Hopefully, the code will bring you the outcome like this:

p2.PNG

p3.PNG

p4.PNG

 

 

Please note, this method is not supported by SAS Tech Support or SAS R&D team.

[There is always a way]
Frequent Learner
Posts: 1

Re: How To: add Pagination into Long Creative Format - Carousel Ad Unit

Awesome, this is very Ryan-esque!

I am having trouble figuring out where the code gets added - would this be through a browser add-on?

SAS Employee
Posts: 4

Re: How To: add Pagination into Long Creative Format - Carousel Ad Unit

Hey Maan, Yes, browser add-on.  Or alternatively, to use some third-party free add-on like TamperMonkey: https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en

 

 

[There is always a way]
Post a Question
Discussion Stats
  • 2 replies
  • 402 views
  • 2 likes
  • 2 in conversation