← Processes

Segmint Marketing

Segmint Marketing is a 3rd party marketing service that clients can use - it’s comparable to Banno Marketing, but works a little differently.

Getting Started

What We Provide to the Client

  1. Dev needs to build out each area like we would any other area, but without the content area code. One content area per Segmint ad. Note: If the area has not been designed, a designer needs to provide direction.
  2. Once developed, place the HTML code for each space in a .txt file and provide to the client, PC, CWA, or directly to Segmint. It’s helpful for dev to include these .txt documents in the GitHub repo, within a separate folder—like step 2 on the Banno Marketing doc.
    • Segmint works with variable tags to inject tracking links, images, and alt tags. These need to be in place for Segmint to report correctly. While the client is responsible for their Segmint dashboard, we can help them by inserting these variable tags for them so they don’t need to edit the HTML more than just ad text.
    • Segmint Variable Tags:
      • ${altText}
      • ${imgSrc}
      • ${fullClickUrl}
    • Example HTML to provide to the client—of course dev should add classes and whatever else formatting needed to match the design. The client will need to change out the ad text, as there’s not a variable tag for ad text in the Segmint platform:
<div>
  <div>
     <img src="${imgSrc}" alt="${altText}">
  </div>
  <div>
     <p>Main ad text here!</p>
  </div>
  <div>
     <a href="${fullClickUrl}" class="btn btn-primary">Button text here</a>
  </div>
</div>

What We Need from the Client/Segmint

  1. Segmint Marketing Script that looks like this:
<script id='seg-client' 
  src="https://cdn.segmint.net/segmint.min.js" 
  type="text/javascript"
  data-config-id="CONFIG_ID"
  data-config-base-url="https://cdn.segmint.net">
</script>
  • In some cases, the Segmint doc might include a script for UAT and Prod.
  1. Segmint Marketing HTML (“Zone”)
    • This can either be hardcoded, or put into a content area in the CMS (read more for CMS Content area support).
    • <div data-zone-id="ZONE_ID" class="seg-zone"></div>

Adding Segmint to the Site

There are two ways to accomplish this: hard code the zones or place them inside content areas.

Hardcoding Segmint Zones

  • Add the zone HTML as it is provided into the appropriate space. Note: Be sure to not have “remove-blank” in the div where the HTML is getting placed so it’s not removed prior to Segmint running.

Placing Segmint Zones in Content Areas

This requires a few extra steps to prevent the Segmint Script from injecting zone HTML while the user is editing in the CMS. If it’s injected via CMS, it will render as plain HTML and will no longer be connected to their Segmint dashboard.

STEP 1. Segmint Script Edits

In order to prevent the Segmint Script from running whle the user is editing in the CMS, dev will need to rework the script as follows. Replace “CONFIG_ID” with what has been provided by Segmint. As of this writing, no other edits would need to be made for this to work. However, they may update their scripts, so you should verify each line is accounted for.

Script Edits for Single CONFIG_ID

This should be placed in the <head> section of the site’s HTML.

<script>
  (function(){
    if (!document.location.toString().includes("editor")) { 
      var segmint = document.createElement("script");  
      segmint.src = "https://cdn.segmint.net/segmint.min.js";
      segmint.type = "text/javascript";
      segmint.id = "seg-client";
      segmint.dataset.configId = "CONFIG_ID";
      segmint.dataset.configBaseUrl = "https://cdn.segmint.net";
      document.getElementsByTagName("head")[0].appendChild(segmint); 
    }  
  }());  
</script>

STEP 2. Zone HTML Edits - Place these Inside Content Areas

Add a hidden <span> tag within the <div> so the CMS doesn’t remove the empty Segmint Marketing <div> after you exit the code editor:

<div data-zone-id="ZONE_ID" class="seg-zone"><span class="d-none">Segmint Marketing Snippet</span></div>

Sites to Reference

  • First Heritage FCU
    • OLB area, Contact Us, Hours & Locations, Online Banking, Rates, and Join Now pages
  • Capital Credit Union
    • Home Hero, CTA Full Width Card in Product Template, “cards_images-single-column” block in sidebar on most subpages (These templates: Contact, Subpage, Locator, FAQ, Community)