BookmarkSubscribeRSS Feed
Ryan_Lee
SAS Employee

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]
2 REPLIES 2
Maan
Calcite | Level 5

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?

Ryan_Lee
SAS Employee

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]

This is a knowledge-sharing community for our customers. 
To get the most from your community experience, use these getting-started resources: 

Discussion stats
  • 2 replies
  • 1432 views
  • 2 likes
  • 2 in conversation