Page Comparison

...

1.  Google spreadsheet is created by DXT.
2. All landing page data is manually entered into the Google spreadsheet by the Merchandiser.
   Note: The pageID (column B) and h1 (column C) data on the spreadsheet is pulled from the SEO document that the Web Content Team provides and will be entered by the Merchandiser. The pageID uses the title info found between the opening and closing <title> tags and the h1 uses the h1 info found between the opening and closing <h1> tags. This data must be copied verbatim, without surrounding HTML tags. An example of this document can be viewed here: https://docs.google.com/document/d/1dS_gkTPnOxcfXEhC-bFxTw8tWEzsU8Wd5dWoGWDmqd8/edit?usp=sharing
3. Spreadsheet is exported into valid JSON format by DXT. The exported files can be found in the corresponding KOB's folder in Google Drive: https://drive.google.com/open?id=1pmx1RRkjzzaWN5yJ_LANJHEjdKTqApNT
   Note: If the Merchandiser has entered data for all of the project's assets (landing page, banners, cards), only one export of the Google Sheet is needed.
4. Exported JSON file is entered into WCS by replacing the current data in the KOB's pre-existing JSON asset.
   Note: All JSON assets are documented in the Asset Reference Spreadsheet linked below. A new JSON asset should only be created if it does not yet exist for that KOB and should be documented in the Asset Reference Spreadsheet after it has been created in WCS.
5. Build landing page assets in WCS. Each of the following should be created as a new HTML slot in WCS unless instructed otherwise (i.e. product content sections) and tagged with the project's Workfront Publish task number. Please adhere to the naming conventions spelled out in the Asset Naming Conventions section following the process flow sections below.
   1. Shop By Job page header - asset (2600004452984) is global and used on all SBJ pages.
   2. Title / H1 - a single asset for each KOB is used to generate this content. See Asset Reference Spreadsheet for each KOB's unique asset ID for this page section. If a new H1 asset is needed, use the following HTML:
      <div class="b-container"><div class="section js-content" data-campaign="2600006356248" data-section="Heading">&nbsp;</div></div>
      Note: The data-campaign attribute requires the asset ID for the corresponding KOB's JSON file in WCS. Do not modify the data-section "Heading".
   3. Before Login SEO content - this content is entered manually by DXT into a new asset for each job and is marked up in the WCS HTML block as follows:
      <div class="section">Paste login blurb content from document provided by Web Content Team here. Mark up all <a href="#">text that includes an URL</a> with anchor tags and use links provided within the document</div>
      Begin by copying all of the text as highlighted in the example below and paste between opening and closing <div> tags as described above. The URLs for the anchor links can be found by clicking into the highlighted words within the document. Use the highlighted text (ie "valves", "valve parts", etc) for the link text in your asset.
   4. Product Content Section(s) - before creating a new product section asset, check that one has not already been created in WCS for that KOB's section title. Section titles are identified in column D of the JSON Google Spreadsheet. Common and recurring section assets are documented in the Asset Reference Spreadsheet and can be reused across multiple pages in the same KOB. These assets cannot be used across multiple KOBs as the HTML in the asset code references the unique asset ID for each KOB's JSON file in WCS. If a new Product Section Asset is needed, use the following HTML:
      <div class="b-container"><div class="section js-content" data-campaign="2600006356248" data-section="Materials">&nbsp;</div></div>
      Note: The data-campaign attribute requires the asset ID for the corresponding KOB's JSON file in WCS. Enter the section title data from column D in the JSON Google Spreadsheet for the section being built into the data-section attribute in your HTML.
      Important: Because of the order in which content loads on the page, merchandisers should not use HTML entities (ie &amp;) in the naming of section titles / data-sections in column D. Instead, please spell out the entire word (ie "and").
   5. SEO content block - this content is entered manually by DXT into a new asset for each job and is marked up in the WCS HTML block using the same code as the Before Login SEO Content section. 
      Note: This asset must also have the SBJ Global Javascript asset (2600008114549) attached to the JS dropzone on the WCS asset. It is critical that the JS asset be attached and that the SEO Content block appear last in order of assets on the page when set up in XM.
6. DXT provides asset IDs to Merchandiser for page setup in XM. DXT will tag all newly created or updated assets with the current job's publish WF# and then publish only new or updated assets, such as the JSON asset. Note: the page must be set up in XM with all necessary assets mentioned in the steps above for the new landing page to appear as expected.

...

1. Google spreadsheet is created by DXT.
2. All banner data is manually entered into the Google spreadsheet by the Merchandiser.
3. Spreadsheet is exported into valid JSON format by DXT. The exported files can be found in the corresponding KOB's folder in Google Drive.
   Note: A new export only needs to be executed when new data is entered or current data is modified for any of the project's assets. If no changes have been made and an export has already been done for the landing page, you do not need to export again for the other assets in the project. Only refresh the WCS JSON asset if the data has been updated. For instructions on exporting and updating the WCS JSON asset, please see Export and Landing Page Process Flow instructions above.
4. Build banner asset in WCS
   
   1. Create new WCS HTML slot asset, tagged with the project's Workfront Publish task number.
   2. Paste the following code in the HTML slot's WYSIWYG editors:
      
      <div class="b-container js-product" data-type="banner" data-id="commercialToilet"></div>
      Update the data-id attribute to include the appropriate BannerID from column B in the Google Sheet
   3. Link the following assets, in order, by placing them in the HTML slot's drop zones:
      jQuery to Match ATG (need asset ID1429309277560)
      Global SBJ JS (need asset IDKOB Javascript (see KOB Assets tab in Asset Reference Spreadsheet under Important Documents section below)
      SBJ Banner Stylesheet (need asset IDsee Global Assets tab in Asset Reference Spreadsheet under Important Documents section below)
   4. DXT provides asset IDs to Merchandiser for banner setup in XM.

SBJ - PLP Grid Slot Banner Process Flow

The PLP Grid Slot Banner is a slight variation of the standard Home Page Grid Slot Banner—it is designed to display only 4 products so that it can accommodate the smaller container on the PLP page. The Merchandisers will also use different tracking links for these banners. A different data set will be created by the Merchandiser in the JSON spreadsheet so that the HP and PLP banners can be tracked separately. The PLP Grid Slot Banner process flow follows the same steps as the Home Page Grid Slot Banner detailed in the process flow above, but with the following differences:

1. Add a class of "m-plp" to the code pasted into the HTML slot:
   <div class="b-container js-product m-plp" data-type="banner" data-id="showerBaseplp"></div>
2. Be sure to use the PLP data-id (column B in the JSON spreadsheet) instead of the standard home page data-id. All PLP data-ids will end with "plp". Again, this data set will include different tracking links and should be used instead of the Home Page Banner data-id.

SBJ - PLP List Slot Banner Process Flow

This asset is currently in development and a process flow is unavailable at the moment.

SBJ - Industry Solutions Content Slot Process Flow/ Card Slot Process Flow

Originally built for the Industry Solutions page(s), the Home Page and Industry Solutions Card Slots are comprised of two components—a heading and four content cards. Each of the KOB's JSON Spreadsheets will have a "Cards" tab that is filled out by the Merchandiser and exported just like any other banner type in the SBJ program. Like the Grid Slot Banners, there will often be a need for the Card Slots to be included on both the Industry Solutions and Home Pages, thus requiring the need for separate tracking links. The cardID (column B in the JSON spreadsheet) should have either a "-IS" or "-HP" suffix that distinguishes what page the card slot will live on.

The process flow for the Card Slots will follow the same steps as the Homepage Grid Slot banner, with the exception of the HTML that is included in the WYSIWYG editor in step 4-b. The code that should be used for the Card Slots is below—be sure to change the data-ID to match the corresponding cardID from the JSON spreadsheet:
<div class="indsol-card-wrapper">
<h4 class="indsol-section-header">Shop by Job</h4>
<div class="indsol-card-container js-product" data-id="cardResTrade-HP" data-type="cardSlot">&nbsp;</div>
</div>

Asset Naming Conventions

Important Documents

Google Spreadsheet for Each KOB:

...