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

Ryan_Lee — Tue, 10 May 2016 01:21:10 GMT

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();

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();

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:

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

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

Maan — Tue, 17 May 2016 21:46:28 GMT

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?

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

Ryan_Lee — Tue, 31 May 2016 23:04:40 GMT

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

topic Re: How To: add Pagination into Long Creative Format - Carousel Ad Unit in SAS 360 Match

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

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

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