Below is a list of the available opt-in point macros for a flex site.  These macros can be copied into a '.utl' file in your Site Component Macros folder.  See preferred file naming convention listed above the macros. 

In some cases multiple macros are listed under the file name.  Only include the macro that you need when you create the file. For example, if you need to include a script in the header, create the option.head.utl file and just copy the opt_headBottom macro.  On a later occasion, perhaps you need to include new code in the meta area.  You can then just add the opt_meta macro to the already existing option.head.utl file.


Note: In some situations you may need/want to reference an isolated JavaScript file.  You can do so by following these steps:

  1. Create/upload your .js file to the "site" component / resources / scripts folder.
  2. Create the necessary UTL file and macro where you need to place your code.  (See options below.)
  3. Within the "opt" macro, add the following macro to call in your js file:
    [% cms.page.add_script(util_comFile('COMPONENT','FILE_NAME.js')); %]
  4. Replace COMPONENT with the name of your site component (In most cases this will be 'site').
  5. Replace FILE_NAME.js with the name of the JavaScript file that you need to reference.

Note: Example of how to include a JavaScript to the headBottom macro on the option.head.utl:

  1. [% macro opt_headBottom; %]
  2. [% cms.page.add_script(util_comFile('site','some-script.js')); %]
  3. [% end %]

To see the locations of where these macros are inserted into the templates, click here.


Available Opt-in Macros

option.ndnembed.utloption.head.utloption.masthead.utloption.nav.utl
option.grid.utloption.side.utloption.asset.utloption.article.utl
option.content.utloption.footer.utloption.body.utlcustom-user-profile.utl
custom-user-dashboard.utlcustom-forms-options.utloption-searchresults.utlview.login.default.inc.utl
view.login.mediaspan.inc.utlopt_servicePurchaseBottom fbia.datalayer.utl amp.datalayer.utl

option.ndnembed.utl  (Available on all pages.)

  1. [% macro opt_ndnEmbedData(); %]  
  2. [% data-config-playlist-id="13434" %]  
  3. [% data-config-distributor-id="91348" %]  
  4. [% end %]  
  5.   
  6. <div class="ndn_embed"&nbsp;&nbsp;
  7.      id="[% sID; %]"  
  8.      data-config-distributor-id="[% cms.site.custom.ndn_id|trim; %]"  
  9.      data-config-width="100%"  
  10.      data-config-height="9/16w"  
  11.      [% opt_ndnEmbedData(); -%]></div>

Note:  In order for the opt_ndnembed.utl to work, the following script must be added inside the <div> tag:

<div class="ndn_embed" ...></div>


<script type="text/javascript">var _ndnq = _ndnq || []; _ndnq.push(['embed']);</script>


option.head.utl  (Available on all pages.)

  1. [% macro opt_headBottom; %]  
  2. <!-- code here -->  
  3. [% end %]  
  4.   
  5. [% macro opt_meta; %]  
  6. <!-- code here -->  
  7. [% end %]  
  8.   
  9. [% macro opt_subsWhiteList; %]  
  10. <!-- code here -->  
  11. [% end %]  

option.masthead.utl  (Available on all pages.)

  1. [% macro opt_mastheadTop; %]  
  2. <!-- code here -->  
  3. [% end %]  
  4.   
  5. [% macro opt_mastheadInner; %]  
  6. <!-- code here -->  
  7. [% end %]  
  8.   
  9. [% macro opt_mastheadBottom; %]  
  10. <!-- code here -->  
  11. [% end %]  

option.nav.utl  (Available on all pages.)

  1. [% macro opt_navTop; %]  
  2. <!-- code here -->  
  3. [% end %]  
  4.   
  5. [% macro opt_navBottom; %]  
  6. <!-- code here -->  
  7. [% end %]  
  8.   
  9. [% macro opt_gridTopFullscreen; %]  
  10. <!-- code here -->  
  11. [% end %]  

opt_servicePurchaseBottom - Provides text output just above the "Purchase" button at the bottom of the form.  

  1. [% macro opt_servicePurchaseBottom(); %]
  2. <fieldset>
  3. <legend>opt_servicePurchaseBottom</legend>
  4. </fieldset>
  5. [% end; %]

option.grid.utl  (Available on front/index pages.)

  1. [% macro  opt_gridTop; %]  
  2. <!-- code here -->  
  3. [% end %]  
  4.   
  5. [% macro  opt_gridFullTop; %]  
  6. <!-- code here -->  
  7. [% end %]  
  8.   
  9. [% macro opt_gridFullMiddle; %]  
  10. <!-- code here -->  
  11. [% end %]  
  12.   
  13. [% macro opt_gridFullBottom; %]  
  14. <!-- code here -->  
  15. [% end %]  
  16.   
  17. [% macro  opt_gridBottom; %]  
  18. <!-- code here -->  
  19. [% end %]  

option.side.utl  (Available on all pages where the side rail is included.)

  1. [% macro opt_sideTop; %]  
  2. <!-- code here -->  
  3. [% end %]  
  4.   
  5. [% macro opt_sideMiddle; %]  
  6. <!-- code here -->  
  7. [% end %]  
  8.   
  9. [% macro opt_sideBottom; %]  
  10. <!-- code here -->  
  11. [% end %]  

option.asset.utl  (Appears on all editorial, business, calendar and classifieds asset types in the same general location)

  1. [% macro  opt_assetContentTop; %]  
  2. <!-- code here -->  
  3. [% end %]  
  4.   
  5. [% macro  opt_assetContentBottom; %]  
  6. <!-- code here -->  
  7. [% end %]  

option.article.utl  (Available on article assets only, but does cover all article presentation modes.)

  1. [% macro  opt_articleBodyTop; %]  
  2. <!-- code here -->  
  3. [% end %]  
  4.   
  5. [% macro  opt_articleBodyMiddle; %]  
  6. <!-- code here -->  
  7. [% end %]  
  8. (opt_articleBodyMiddle will show up after 1/2 of the paragraphs have loaded)
  9.   
  10. [% macro  opt_articleBodyBottom; %]  
  11. <!-- code here -->  
  12. [% end %]  
  13.   
  14. [% macro  opt_articleBottom; %]  
  15. <!-- code here -->  
  16. [% end %]  

option.content.utl (Available at the top and bottom of e-Edition page content only.)

  1. [% macro opt_assetContentTop(); %]  
  2. [% if this.asset.type == 'page'; %]  
  3. <div class="well">I am opt_assetContentTop()</div>  
  4. [% end; %]  
  5. [% end; %]  
  6.   
  7. [% macro opt_assetContentBottom(); %]  
  8. [% if this.asset.type == 'page'; %]<br><div class="well">I am opt_assetContentBottom()</div><br>[% end; %]<br>[% end; %]  

option.footer.utl  (Available on all pages.)

  1. [% macro  opt_footerTop; %]  
  2. <!-- code here -->  
  3. [% end %]  
  4.   
  5. [% macro  opt_footerBottom; %]  
  6. <!-- code here -->  
  7. [% end-%]<style="font-family: Arial, Verdana, sans-serif; white-space: normal;"><span style="font-size: medium;"><strong>option.aside.utl </strong></span<span style="color: rgb(0, 0, 128);"><em>(Available on article assets only, but does cover all article presentation modes.)</em></span></p>  
  1. <!-- <pre class="code-java" style="margin-top: 0px; margin-bottom: 0px; padding: 0px; max-height: 30em; overflow: auto; white-space: pre-wrap; word-wrap: normal; color: rgb(51, 51, 51); line-height: 16px; background-color: rgb(245, 245, 245);"> -->  
  2. [% macro opt_articleAsideTop(); %]  
  3.     <div class=<span class="code-quote" style="color: rgb(0, 145, 0);">"well"</span>>opt_articleAsideTop</div>  
  4. [% end %]  
  5.   
  6. [% macro opt_articleAsideBottom(); %]  
  7.     <div class=<span class="code-quote" style="color: rgb(0, 145, 0);">"well"</span>>opt_articleAsideBottom</div>  
  8. [% end %]  

option.body.utl (Available on the body.)

  1.  [% macro opt_bodyTop(); %]
  2. <!-- custom code to insert just below the opening <body> tag -->
  3.  [% end; %]

or

  1. [% macro opt_bodyBottom(); %]
  2. <!-- custom code to insert just below the opening <body> tag -->
  3. [% end; %]

custom-user-profile.utl (Available on user profile page.)

  1. [%- macro opt_userProfileAboutTop() -%]  
  2. <style>.insertion-point{ background:#c0392b; padding:10px; color:rgba(255,255,255,.8); }</style>  
  3. <div class="insertion-point">opt_userProfileAboutTop</div>  
  4. [%- end -%]  
  5.   
  6. [%- macro opt_userProfileAboutMiddle() -%]  
  7. <div class="insertion-point">opt_userProfileAboutMiddle</div>  
  8. [%- end -%]  
  9.   
  10. [%- macro opt_userProfileAboutBottom() -%]  
  11. <div class="insertion-point">opt_userProfileAboutBottom</div>  
  12. [%- end -%]  
  13.   
  14. [%- macro opt_userProfileIntTop() -%]  
  15. <div class="insertion-point">opt_userProfileIntTop</div>  
  16. [%- end -%]  
  17.   
  18. [%- macro opt_userProfileIntBottom() -%]  
  19. <div class="insertion-point">opt_userProfileIntBottom</div>  
  20. [%- end -%]  
  21.   
  22. [%- macro opt_userProfileIntTitle() -%]  
  23. <div class="insertion-point">opt_userProfileIntTitle</div>  
  24. [%- end -%]  
  25.   
  26. [%-  
  27. macro opt_userHasCustomInterests();  
  28. return true;  
  29. end;  
  30. -%]  

custom-user-dashboard.utl (Available on user profile page.)

  1. [%-  
  2. macro opt_usrAppsTop();  
  3. aApps = [  
  4. 'ext_cal': [  
  5. 'url': 'http://google.com/search?q=calendar',  
  6. 'icon': 'fa fa-fw fa-rocket',  
  7. 'title': 'External calendar',  
  8. 'description': 'Manage your external calendar events',  
  9. 'items':[  
  10. [  
  11. 'title': 'Manage external calendar',  
  12. 'url': 'http://google.com/search?q=calendar'  
  13. ],[  
  14. 'title': 'Create external calendar event',  
  15. 'url': 'http://google.com/search?q=calendar+create'  
  16. ]  
  17. ]  
  18. ]  
  19. ];  
  20. return aApps;  
  21. end;  
  22.   
  23. macro opt_usrAppsBottom();  
  24. aApps = [  
  25. 'ext_class': [  
  26. 'url': 'http://google.com/search?q=classifieds',  
  27. 'icon': 'fa fa-fw fa-space-shuttle',  
  28. 'title': 'External classifieds',  
  29. 'description': 'Manage your external classified ads'  
  30. ]  
  31. ];  
  32. return aApps;  
  33. end;  
  34. -%]  

custom-forms-options.utl (Available on forms.)

  1. [% macro opt_formHeaderTop() %]
  2. <div class="well well-sm">Above Form Header</div>
  3. [% end %]
  4. [% macro opt_formHeaderBottom() %]
  5. <div class="well well-sm">Below Form Header</div>
  6. [% end %]
  7. [% macro opt_formContentTop() %]
  8. <div class="well well-sm">Above Form Content</div>
  9. [% end %]
  10. [% macro opt_formContentBottom() %]
  11. <div class="well well-sm">Below Form Content</div>
  12. [% end %]

option-searchresults.utl

  1.  [% macro opt_searchResultsTop() %]Results Top[% end; %]
  2.  [% macro opt_searchResultsMiddle() %]Results Middle[% end; %]
  3.  [% macro opt_searchResultsBottom() %]Results Bottom[% end; %]

view.login.default.inc.utl

  1. [%macro opt_userLoginTop();%]
  2. <!-- code here -->
  3. [%end%]
  1. [%macro opt_userLoginBottom();%]
  2. <!-- code here -->
  3. [%end%]

view.login.mediaspan.inc.utl

  1. [%macro opt_userLoginTop();%]
  2. <!-- code here -->
  3. [%end%]
  1. [%macro opt_userLoginBottom();%]
  2. <!-- code here -->
  3. [%end%]

fbia.datalayer.utl

  1. [%- macro fbia_optTagManagerDataLayer();
  2. oData = [];
  3. oData['tncms.custom.foo'] = 'bar';
  4. return oData;
  5. end; -%]

WARNING: This Facebook opt-in point must be placed in the rss_site component.


amp.datalayer.utl

  1. [%- macro amp_optTrkGtmDataLayer();
  2. oData = [];
  3. oData['tncms.custom.foo'] = 'bar';
  4. return oData;
  5. end; -%]

option-meter-rules.utl

  1. [% macro opt_meterRules(); -%]
  2. __tnt.metering.access.c.push(function(){
  3. console.log("METERING: in custom conditions script");
  4. });
  1. __tnt.metering.access.d.push(function(){
  2. console.log("METERING: in custom access denied script");
  3. });
  1. __tnt.metering.access.e.push(function(){
  2. console.log("METERING: in custom access granted script");
  3. });
  4. [% end %]

Opt-in Points

Front Page/Index Page Opt-in Points

The Opt-in areas are represented by the blue regions below. 

+5 
1 - Flex option macros.png

Article Page Opt-in Points

The Opt-in areas are represented by the blue regions below. 

+5 
2 - Flex option macros.png

User Login

The Opt-in areas are represented by the blue regions below. 

+5 
users login.PNG

User Profile Page

The Opt-in areas are represented by the red regions below. 

+5 
3 - Flex option macros.jpg

User Dashboard

New dashboard tiles and sidebar items with sub-items will show up at the top of the sidebar and before the other tiles.  Those without sub-items will show up at the bottom of the sidebar and after the other tiles. 

+5 
4 - Flex option macros.jpg

Forms

There are four Opt-in areas available for forms. 

+5 
Forms Opt in points

Tags