SOP - DXT Shop By Job asset build process (Merch)

Purpose

This document outlines the key processes and policies for creating Shop By Job landing page and banner assets.

Important Notes

• A valid Gmail address is required to access all Google spreadsheets and documents.
• JSON process will not begin until all designs are signed off and approved. Changes to the design template after design approval can impact the delivery date for a project.

Policies and Procedures 

DXT File Ownership

• Google spreadsheet initial setup will be done by DXT. Folders and files will be shared with Merchandisers for access.
• A separate spreadsheet is assigned to each of the KOBs.
• Spreadsheet export will be handled by DXT for JSON validation and WCS upload. WCS asset creation will be handled by DXT.
• Slot asset IDs will be sent to Merchandisers for XM set up.

Google Sheets JSON Export

Each KOB has a unique Google Spreadsheet where SBJ data is captured, managed, and exported. The instructions in this section pertain to setting up the Google Sheet for export. Details regarding the process flow for each of the asset types will follow in separate sections of this document.

After a Google Spreadsheet has been filled out by the Merchandiser, it is ready for export. To begin an export, select "Add-Ons" from the menu at the top of your Google Sheets document, followed by "Export Sheet Data" and then "Open Sidebar". Once the sidebar on the right appears, ensure that the following options are selected:

If all options are selected and the Google Sheet is ready for export, select the blue "Export" button at the bottom of the panel. A modal window will appear letting you know when the JSON data has been exported. Each exported file is then saved in the Google Sheet's parent folder in Google Drive. Please do not overwrite or delete any of the previous versions of the JSON export files as a Merchandiser may need to reference or revert back to these.

SBJ - Landing Page Build Process and Logic Overview

Each landing page in the Shop By Job program is comprised of five types of assets or sections. Each page begins with the SBJ branded page header. This asset is the same for every page, across each KOB and uses the same asset ID. Following the SBJ header is the page title / H1 asset. The page title content is unique to each page however every KOB has a single WCS asset that is used to generate the H1 data from the JSON spreadsheet. This works because the Javascript logic identifies the <title> on the page and looks for the corresponding row of data in the JSON file that contains the matching <title> data from the Google spreadsheet (more on that below). Each page before login also has a before login SEO section that appears below the H1. The data for this section is entered manually by the Visual Designer and each page requires a unique Before Login SEO asset. All of the page sections mentioned thus far must be listed by the Merchandiser in XM in the order described. Following the Before Login SEO asset are the product content sections. These sections can be placed in any order the Merchandiser chooses. Other non-SBJ assets can also be placed around or between these sections by the Merchandiser in XM. The final section of the page is the SEO Copy section and is the most important as it contains the JS file that renders the page content. In the event that no SEO Copy is presently available for the page, an asset for this section must still be created and used in the page build.

SBJ - Landing Page Process Flow 

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.

SBJ - Home Page Grid Slot Banner Process Flow 

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 (1429309277560)
      SBJ KOB Javascript (see KOB Assets tab in Asset Reference Spreadsheet under Important Documents section below)
      SBJ Banner Stylesheet (see 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 / 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:

Builder
https://docs.google.com/spreadsheets/d/1xtQsX0dBQ6md45PgIAgpCpQQZ9Et6ynkW8aOrn4g8ew/edit?usp=sharing
Commercial
https://docs.google.com/spreadsheets/d/15DWbnX8MWLpE18c6G5Tma3VSxnEDgKxjKG-FrhuA1v4/edit?usp=sharing
FFS
https://docs.google.com/spreadsheets/d/1X7w3_Uog9OmKbMQQ4FCk4wsH3NRRsgsviBrYJ1gf6Oo/edit?usp=sharing
HVAC
https://docs.google.com/spreadsheets/d/1Yv8eVID9jfW-JShKIsqJlpaUVLvEv2sdNneSVQ8FVS4/edit?usp=sharing
ResTrade
https://docs.google.com/spreadsheets/d/1lfrUOIGLJFxmU2jw2S-QVaKTI7vTSeYqwuTc6qBSb0o/edit?usp=sharing
Waterworks
https://docs.google.com/spreadsheets/d/1R0UN2IEMzqswZX-7cxSFXd3VOSjZ0uoC4w5FQTO7W1U/edit?usp=sharing

Asset Reference Spreadsheet:

https://docs.google.com/spreadsheets/d/1cUeH9vNwHlIbJtW35OmeZ3QANNayqPT80vdokAunQnw/edit?usp=sharing

Turnaround Time

Expected Turnaround Time – The turnaround time for a project utilizing JSON can vary, with more custom experiences needing the most time to build and test. Many of the below tasks happen concurrently.

Maintaining JSON Assets after Publish - Once page is in staging and live on the site, any spreadsheet updates/exports will be processed late morning and late afternoon (2x daily). This is to accommodate preview and testing for the next publishing window. To update an existing asset utilizing JSON, please submit a QF ticket to process your changes.