Banno Marketing · Banno Docs

Misc. Notes

For images within marketing spaces, the 2x resize will not work because images have an automatically generated, random name and cannot end with -2x.png or whatever we need it to. So, in those cases where you need things like icons to resize, you will need to give them a specific width in the CSS.

Prelive Instructions

It sometimes helps to build your site as you normally would, with as many content areas as you need. Then, when you’re almost ready to push to UAT, convert all the marketing areas to have only one content area, with divs inside it. Be careful not to have your content area code still intact, or else you’ll end up with a content area inside of a content area (which is gross and will break things).
Copy all of the divs and content inside of a marketing area, and paste it into its own .txt file. Repeat for all the other marketing areas. Make sure the file name is descriptive enough! It may also help to include these text files in a subfolder called “marketing” on the same level as your development folder. That way, it’ll be on github for anyone that needs it but won’t take up space in your build folder.
Online banking setup: ONLY do this if OLB is a form or iframe (OLB links do not need the banno tag). Paste the following code into the olb.mustache file, and make necessary adjustments depending on the type of OLB on the site.
<banno:marketing-associate-login data-form-id="" data-username-input-name=""></banno:marketing-associate-login>
- OLB is a remote login form:
  - match the data-username-input-name attribute value with the name of the user name field
  - match the data-form-id value to the form’s id attribute
- OLB is an iframe:
  - leave the data-form-id and data-username-input-name attributes empty
When you get things up to UAT, you can paste in the content from the text files you made if you want to test and make sure things still work. Make sure to also send those text files to the PC, when you set up your design/PC review document on basecamp!

The next steps aren’t your responsibility as a dev, but they are good to know! The PC will educate the client on the marketing dashboard, which is connected to the CMS. That’s where the txt files will be used. Each txt file is used to create an ad within the marketing dashboard, and from there, the marketing dashboard injects the code into the content area within the CMS.

When the code is injected in, an two extra divs will be added with a marketing ID. This is what tells the marketing database what type of ad to inject–for example, you wouldn’t want a hero ad injected into the space meant for a small icon sub-ad.

So for example, if your “base” banno marketing code looks like this:

<div class="heroImage">an Image here</div>
<div class="heroText">some text here</div>

The final code will look something like this:

<div id="banno-marketing-id">
	<div class="morebannomarketing">
		<div class="heroImage">an Image here</div>
		<div class="heroText">some text here</div>
	</div>
</div>

So, when styling your ads that will use Banno Marketing, make sure not to target things too specifically, or you could be causing issues with the marketing divs that are added.

Post-Live Instructions

Steps for Working a Server-side Banno Marketing Implementation Case (Post-Live)

Please note this is not for the new showcase plus sites. Those are built a little differently and will have their own set up instructions below.

Are you a pre-live developer putting in marketing? Your instructions will be at the very bottom of this page.

Open the Banno Marketing Template txt file in your text editor. Save this file as “RepoName-HTML_Templates.txt”. This is going to give you a template for working the case while also generating notes for jsource and the CWA.
Clone repo, NPM Install, Checkout branch
Get your bearings on the site. Check to make sure areas CAN be Banno Marketing areas. You will want to make sure the editable divs in the area are immediately following each other so that they can be combined into 1 editable area. This part will take some getting used to. Go ahead and work through the rest of the steps even if this doesn’t make much sense. You will get the hang of it the more cases you work.
Go ahead and pull each area’s HTML from the site and put in the HTML section on your template txt file. You will label it with the area name and how many of them are available for use on the site. For example: Hero x 3. That means there are 3 hero slides that are available to be Banno Marketing areas.
Clean up the code so it only contains the html the client will need to put inside the one editable area. It should not contain any of this:data-content-block="hero1" data-content="content" data-editable="editable". It should also be as simple as you can make it without a loss of formatting. If you have any empty divs in your HTML (usually for a gradient) be sure you but a   in there. The CMS will strip out any empty divs. Helpful tip: I use inspector to test out the html once I’ve cleaned it up. This will give me an idea if I am on the right track or if there will be some potential CSS issues I will have to fix. This is just something I do and is not required.
Follow along each of the steps on your template txt file while making notes for your specific site as you go. I’m going to repeat them here to provide extra information about them.
Step 1 on your template txt file. Add the only code needed for server-side to associating the olb login(s). Change the data-form-id attribute to be the same as the ID attribute on the form tag. Change the data-username-input-name to be the same as the name attribute on the username input field. This is the code to use: <banno:marketing-associate-login data-form-id="olbLogin" data-username-input-name="userid"></banno:marketing-associate-login>. When doing this step, there are a few different scenarios that could come up. Pick the scenario for your specific situation and make that your note for this step.

SCENARIO 1: Site does not have an OLB login. It is just a link that goes to their OLB site. So you will not be able to associate users.
SCENARIO 2: The form tag does not have an ID and you will have to add it to associate users.
SCENARIO 3: There is more than 1 form to associate, so you will add additional marketing tags making sure to match the attributes properly for each one.
SCENARIO 4: Nothing special to report.

Step 2 on your template txt file. Go through each area of the site and prepare it to be a Banno Marketing area. That means you will need to make sure there is only one editable div. Try to keep the editable area that was originally for the image. This makes it easier to implement now and undo later if need be. You will also add in hidden comments that wrap each area letting anyone working on the site know that this is meant to be a Banno Marketing area. Sometimes you will not need to combine the area into one. It might already be just one editable area. This makes things super easy. All you have to do there is add in the hidden comments to denote it as a Banno Marketing area. In your template txt file, you will see an example of each type of area and how the note for it is structured.
Build your deploy zip (gulp/grunt) and upload this to the CMS to complete the next steps.
Step 3 on your template txt file. You will go to each area and put in the HTML code you pulled and cleaned up from step 5 of of these instructions. You want to make sure it looks like it should in all viewports. It is a good idea to also test the HTML with some extra divs. You can find those extra divs on your template txt file for easy copy/paste. We do this because when targeted ads get set up and start getting served into the site by Banno Marketing, they will inject these extra divs. I like to test these now so there are no formatting surprises later. Adjust any CSS you need to in order to make everything look correct both with and without the extra divs.
Step 4 on your template txt file. Once your HTML is in place and everything is looking good, you will need to test that the text could be added, removed, selected for links without issue. Sometimes they are weird on sliders.
Step 5 on your template txt file. Once your HTML is in place and everything is looking good, you will need to test that you can swap out the images in these areas with the CMS text editor. We do this because there have been situations, with certain code, that the CMS editor will strip out some of the HTML needed for the space. If this does happen, reach out to another dev who has seen this often and can help troubleshoot.
Step 6 on your template txt file. Make some blank test pages. You will do one with the homepage template and another one with an interior template if you had marketing ads on interior pages. If your site had any other Banno Marketing areas on special templates, you will test blank versions of those as well. You can just name this page something like “Test Your Initials Homepage”. Once created, make sure you can go in and click on all the Banno Marketing areas. You may find you do have to adjust height or position of some of these to make it more clear as to where they are. In extreme cases, you may use an outline or a background color to hightlight it.
Step 7 on your template txt file. Go in and add dynamic ad to each marketing area. It is a simple drop down text editor tool. You will use the dimensions provided in the case. We want to make sure the text and the bullseye icon looks okay. You will also want to make sure adding in the dynamic ad doesn’t do anything strange to the overall layout.
Add, commit, and push your branch to the repo. Create a merge/pull request.
Fill in the publishing info on your template txt file.
Take your notes (from beginning of your template txt file to the end of publishing info) and add it as a comment on the merge/pull request. Also add this same info to your case as a *** Working and Publishing Note *** .
Remove the extra divs section from the template txt file. Save the template txt file now that the only thing on here is the HTML information for the client to use. Attach this txt file to the case note you just added.
Assign case back to CWA for testing and review.

Special Notes

You can associate more than one olb form. You would just add additional marketing tags for each form.
Most of the time all areas of a section defined are to be made into Banno Marketing areas. For example, if a Hero area has three slides and the case says to make the Hero area be a Banno Marketing area, that means do all three slides. However, every now and then, there may be special instructions to only do the first one or something along those lines. Keep an eye out for these.
Since this is server-side, hidden content classes are okay and can be left in place.
The case may come back to you after testing to do some more CSS work to get some user experience items more optimal.

Steps for Working a Server-side Banno Marketing Conversion Case (Post-Live)

Open the Banno Marketing Template SS txt file in your text editor. This is going to give you a template for working the case while also generating notes for jsource and the CWA.
Clone repo, NPM Install, Checkout branch
Follow along each of the steps on your template txt file while making notes for your specific site as you go. I’m going to repeat them here to provide extra information about them.
Step 1 on your template txt file.
Step 2 on your template txt file.
Build your deploy zip (gulp/grunt) and upload this to the CMS to complete the next steps.
Step 3 on your template txt file.
Add, commit, and push your branch to the repo. Create a merge/pull request.
Fill in the publishing info on your template txt file.
Take your notes from the template txt file and add it as a comment on the merge/pull request. Also add this same info to your case as a *** Working and Publishing Note ***
Assign case back to CWA for testing and review.

Steps for Working a Server-side Banno Marketing Implementation Case on an Alabaster theme Showcase plus site (Post-Live)

Open the Banno Marketing Template Alabaster txt file in your text editor. Save this file as “RepoName-HTML_Templates.txt”. This is going to give you a template for working the case while also generating notes for jsource and the CWA.
Clone repo, NPM Install, Checkout branch
This is where you would normally get your bearings on the site and make sure that the area could be used as Banno Marketing. However, with these sites, they are alreay built with certain areas in mind to be Banno Marketing. You’ll be able to pull the needed html directly from the templates as you work. You will understand more as you go.
Follow along each of the steps on your template txt file while making notes for your specific site as you go. I would normally write these out here too and explain each step. However, steps 1 and 2 are explained on the txt file. Step 3 begins the same exact steps you would follow for a regular site txt file and number 7 in the first section of this page.
Add, commit, and push your branch to the repo. Create a merge/pull request.
Fill in the publishing info on your template txt file.
Take your notes (from beginning of your template txt file to the end of publishing info) and add it as a comment on the merge/pull request. Also add this same info to your case as a *** Working and Publishing Note *** .
Remove the extra divs section from the template txt file. Save the template txt file now that the only thing on here is the HTML information for the client to use. Attach this txt file to the case note you just added.
Assign case back to CWA for testing and review.