| STANDARD OPERATING PROCEDURE | |
|---|---|
Title DXT Shop By Job asset build process | Effective Date TBD |
Department eBusiness | Business Owner Farid Mokraoui |
...
- Google spreadsheet is created by DXT.
- 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
- 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. - 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. - 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.
- Shop By Job page header - asset (2600004452984) is global and used on all SBJ pages.
- 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"> </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". - 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.
- 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"> </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 &) in the naming of section titles / data-sections in column D. Instead, please spell out the entire word (ie "and"). - 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.
- 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.
...
- Google spreadsheet is created by DXT.
- All banner data is manually entered into the Google spreadsheet by the Merchandiser.
- 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. - Build banner asset in WCS
- Create new WCS HTML slot asset, tagged with the project's Workfront Publish task number.
- 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 - 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) - DXT provides asset IDs to Merchandiser for banner setup in XM.
...
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"> </div>
</div>
Asset Naming Conventions
Important Documents
...