STANDARD OPERATING PROCEDURE | |
---|---|
Title DXT Shop By Job asset build process | Effective Date TBD |
Department eBusiness | Business Owner Farid Mokraoui |
...
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 an 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.
...
- 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
- 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
- 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
...