# Banno Marketing Template Example

1. I changed the package.json file so that marketing was true. "marketing": true,

2. If the site is using the CTA section as marketing, skip this step.  However, if they did not specify that the CTA section would be marketing, then you must go through and change this code:

            <!-- @if theme=='alabaster' -->
              <!-- @if marketing=true -->
                {{> _partials/_cta-bar-marketing}}
              <!-- @endif -->
              <!-- @if marketing=false -->
                {{> _partials/_cta-bar}}
              <!-- @endif -->
            <!-- @endif -->

to this:

            <!-- @if theme=='alabaster' -->
              <!-- @if marketing=true -->
                {{> _partials/_cta-bar}}
              <!-- @endif -->
              <!-- @if marketing=false -->
                {{> _partials/_cta-bar}}
              <!-- @endif -->
            <!-- @endif -->

You COULD do that another way, You could just change it to this:

            <!-- @if theme=='alabaster' -->
                {{> _partials/_cta-bar}}
            <!-- @endif -->


However, I chose to do it this way so that there is some history that this area might have been considered for banno marketing at one time. Quick tip: After I do this, I gulp the site and do a search for this {{> _partials/_cta-bar-marketing}} throughout the entire site just to make sure I caught them all.

3. If the site is going to use the second slider (subads slider) on the homepage as marketing (very common), you will need to alter the code around lines 92-109 on the homepage.  You will change this:

            <!-- @if subad!=null -->
              <!-- @if subad!=='midnight' -->
                <div class="remove-slider" aria-describedby="adCarouselDesc">
                  <div class="sr-only" id="adCarouselDesc">This slideshow visually displays up to three slides. On mobile devices this slideshow displays slides one at a time. Inactive slides are hidden for all users. Use slide pagination, left/right arrow keys, or swiping to navigate through all slides. All links contained in the carousel are available in website navigation or elsewhere on the page.</div>
                  <a href="#adSkip" class="sr-only sr-only-focusable">Move past this ad section</a>
                  {{> _partials/subad/subads}}
                </div>
              <!-- @endif -->
            <!-- @endif -->
            <!-- @if subad=null -->
              <!-- @if theme!=='midnight' -->
                <div class="remove-slider" aria-describedby="adCarouselDesc">
                  <div class="sr-only" id="adCarouselDesc">This slideshow visually displays up to three slides. On mobile devices this slideshow displays slides one at a time. Inactive slides are hidden for all users. Use slide pagination, left/right arrow keys, or swiping to navigate through all slides. All links contained in the carousel are available in website navigation or elsewhere on the page.</div>
                  <a href="#adSkip" class="sr-only sr-only-focusable">Move past this ad section</a>
                  {{> _partials/subad/subads}}
                </div>
              <!-- @endif -->
            <!-- @endif -->

to this:

            <!-- @if subad!=null -->
              <!-- @if subad!=='midnight' -->
                <div class="remove-slider" aria-describedby="adCarouselDesc">
                  <div class="sr-only" id="adCarouselDesc">This slideshow visually displays up to three slides. On mobile devices this slideshow displays slides one at a time. Inactive slides are hidden for all users. Use slide pagination, left/right arrow keys, or swiping to navigate through all slides. All links contained in the carousel are available in website navigation or elsewhere on the page.</div>
                  <a href="#adSkip" class="sr-only sr-only-focusable">Move past this ad section</a>
                  {{> _partials/subad/subads}}
                </div>
              <!-- @endif -->
            <!-- @endif -->
            <!-- @if subad=null -->
              <!-- @if theme!=='midnight' -->
                <div class="remove-slider" aria-describedby="adCarouselDesc">
                  <div class="sr-only" id="adCarouselDesc">This slideshow visually displays up to three slides. On mobile devices this slideshow displays slides one at a time. Inactive slides are hidden for all users. Use slide pagination, left/right arrow keys, or swiping to navigate through all slides. All links contained in the carousel are available in website navigation or elsewhere on the page.</div>
                  <a href="#adSkip" class="sr-only sr-only-focusable">Move past this ad section</a>
                  {{> _partials/subad/subads-marketing}}
                </div>
              <!-- @endif -->
            <!-- @endif -->

You COULD add some more if statements instead to say if marketing is true then use this marketing partial instead, but I went with what was quickest and still seemed to make sense here for future work or swapping out of themes.  

You will also need to change the subads-marketing partial so that the editable div is changed from this:

<div class="slide-inner" data-content-block="subImage1" data-content="content" data-editable="editable">

to this:

<div data-content-block="subImage1" data-content="content" data-editable="editable">

Then you will include the <div class="slide-inner"> in your html template and in the commented out sections on the subads-marketing partial.

This is to correct styling issues when banno marketing inserts two extra divs.  Again, there is another way to do this, this is just my method.

3. I added the banno:marketing tag needed for server side for associating the olb login(s).

-SCENARIO 1: Site does not have an OLB login.  It is just a link that goes to their OLB site.  So I was not able to associate users. 

-SCENARIO 2: I had to add an ID to the OLB form to associate users. 

-SCENARIO 3: There was more than one login, so I added additional banno:marketing tags to associate them.  Please ask the client to double check that the (name specific logins) all still work properly.

-SCENARIO 4: Nothing special to report, you do not need to include any special notes here.

Example of code to add:

<banno:marketing-associate-login data-form-id="olbLogin" data-username-input-name="userid"></banno:marketing-associate-login>

4. Prepared each area on the site to be able to handle Banno Marketing ad serving
-Ad Area 1 - Hero - Homepage Only - Pulled needed HTML down from site (attached). Did not need to add Banno Marketing comments because the site is built such that you know it is using the marketing partial. This area is now just 1 editable area.  The image area was retained. 
-Ad Area 2 - Sub Slider - Homepage Only - Pulled needed HTML down from site (attached). Did not need to add Banno Marketing comments because the site is built such that you know it is using the marketing partial. This area is now just 1 editable area.  The image area was retained. 
-Ad Area 3 - Quicklinks/Icon - Pulled needed HTML down from site (attached). Did not need to add Banno Marketing comments because the site is built such that you know it is using the marketing. This was already 1 editable area.  No change will be needed to the html in these areas. 
***Repeat for Additional Ad Areas***

5. Test HTML in all spots and reviewed to make sure all code looked and functioned properly (including the extra divs).  See example below for extra divs to use for testing how it will be after Banno Marketing injects extra divs like this.  
-Hero Ad - Had to rework the CSS a bit to make this look like the original OR All looks good here. 
-Sub Ad - All looks good here. 
***Repeat for Additional Ad Areas***

6. Test that text could be added, removed, selected for links without issue.  Sometimes they are weird on sliders.
-Hero Ad - No issues.
-Sub Ad - No issues. 
***Repeat for Additional Ad Areas***

7. Test that images could be swapped out without losing any html.
-Hero Ad - No issues.
-Sub Ad - No issues. 
***Repeat for Additional Ad Areas***

8. Create blank test pages to make sure all areas are able to be navigated to and clicked inside.
-Hero Ad - Had to rework the CSS a bit to make this area easier to access in the CMS OR No issues.
-Sub Ad - No issues. 
***Repeat for Additional Ad Areas***  

9. Test dummy dynamic ads to make sure all text is visible and spacing looks ok.
-Hero Ad - Had to rework the CSS a bit to make this area easier to access/see in the CMS.
-Sub Ad - Had to rework the CSS a bit to make this area easier to access/see in the CMS.
***Repeat for Additional Ad Areas***  

10 . HMTL templates attached

To publish:
1. merge request link - 
2. push-cms-zip ##### bank.zip www.bank.com git@git.banno.com:cms-development/repo.git
-No json needed
-No microsite needed
-CMS changes will need published after the PC/CWA finishes his/her updates


******** EXTRA DIVS FOR TESTING BANNO MARKETING HTML ********

<div>
<div id="c2726d72-0b11-11ea-761f-02426b8ee868-1275473893377" data-ad-id="a38dade0-16ab-11ea-975b-02420a1ffcac" data-campaign-id="04afabb0-0b13-11ea-922b-0242e38ff006">

</div>
</div>

******** HTML TEMPLATES ********

Hero x 3

<HTML HERE>


Sub x 4

<HTML HERE>