Content Migration Training

Replacement Codes

Replacement codes here are variables wrapped in # symbols (like #DEALERNAME#) that automatically pull information from our DealerOn Content Management System (CMS). They're used to maintain consistent dealer information across a website without manual updates.

A practical example:

<p>Visit #NAME# at #ADDRESS# or call us today!</p>

Could display as:

<p>Visit Rothbard Chevy at 123 Main St, Cleveland, OH 12345 or call us today!</p>

The key benefits are:

• Central management - Update info once in the CMS, it changes everywhere
• Consistency - No risk of typos or outdated information
• Dynamic content - Pages update automatically when dealer details change

For a comprehensive index of all available platform replacement codes, refer to the Platform Replacement Codes Knowledge Article (Salesforce login required).

Dealer Information Codes

Basic Information

• #NAME# or #DEALERSHIP_NAME# - Dealership Name.
  Appears as specified in Admin Tools > Admin Tools Page.
  This is set in Dealer Info > General.
Note: Use #NAME# to replace shortened versions of the dealership name (e.g., replacing 'Bobs' with 'Bobs Cadillac'). However, if the name is significantly different or includes generic terms (e.g., 'Bob's Auto Service Shop'), it's better to hardcode it rather than using the replacement code.
• #ADDRESS# - Complete Address from Dealer Info > Address.
  Appears as Street City, State ZIP
• #STREET# - Street.
  Appears as specified in Dealer Info > Address.
• #CITY# - City.
  Appears as specified in Dealer Info > Address.
• #STATE# - State.
  Appears as specified in Dealer Info > Address.
• #ZIP# - ZIP Code. This does not include ZIP+4.
  Appears as specified in Dealer Info > Address.
• #DEALERMAKE# - Displays the Primary Make as configured in Admin Tools Page > Admin Tools.
  Displays only one make, even if multiple are entered in the Dealer Make(s) field.
• %(MAKES) - Dealership Makes.
  Displays a comma-separated list if the dealer sells multiple makes (e.g., Buick, GMC or Chevrolet, Buick, GMC).
Note: Avoid using %(MAKES) when the make is part of a specific model name (e.g., "Chevrolet Silverado 1500"). Use it in isolated sentences or contexts where just the make(s) are needed.

Phone Numbers

These replacement codes output both the phone number and its corresponding label.

• #PHONE# or #PHONE1# - Outputs the label and number for Phone 1 as listed in Dealer Info > Phone Numbers.
  The number is wrapped with span.callNowClass for call tracking.
  Example: Sales 555-555-5555
• #PHONE2# - Outputs the label and number for Phone 2.
  The number is wrapped with span.callNowClass2 for call tracking.
  Example: Service 555-555-0123
• #PHONE3# - Outputs the label and number for Phone 3.
  The number is wrapped with span.callNowClass3 for call tracking.
  Example: Parts 555-555-4567
• #PHONE4# - Outputs the label and number for Phone 4.
  The number is wrapped with span.callNowClass4 for call tracking.
  Example: Rentals 555-555-8910
• #PHONE5# - Outputs the label and number for Phone 5.
  The number is wrapped with span.callNowClass5 for call tracking.
  This number will display as Phone 1 if the Mobile Override is turned on.
  Example: Body Shop 555-123-5555
• #PHONE6# - Outputs the label and number for Phone 6.
  The number is wrapped with span.callNowClass6 for call tracking.
  This number will display as Phone 2 if the Mobile Override is turned on.
  Example: Finance 555-456-5555
• #PHONE7# - Outputs the label and number for Phone 7.
  The number is wrapped with span.callNowClass7 for call tracking.
  This number will display as Phone 3 if the Mobile Override is turned on.
  Example: Location2 555-789-5555
• #PHONE8# - Outputs the label and number for Phone 8.
  The number is wrapped with span.callNowClass8 for call tracking.
  This number will display as Phone 4 if the Mobile Override is turned on.
  Example: Location3 555-012-5555
• #FAX# - Outputs the Fax label and number as listed in Dealer Info > Phone Numbers.
  The number is wrapped with a span, but does not have a call tracking class.
  Example: Fax 555-765-4321

SEO Cities

These values are pulled from Dealer Info > SEO.

• %(BIG_CITY1) - City 1
• %(BIG_CITY2) - City 2
• %(BIG_CITY3) - City 3
• %(BIG_CITY4) - City 4
• %(BIG_CITY5) - City 5

Contact Block Replacement Codes

When building custom internal pages with a bottom/footer section featuring maps and/or contact information, you can utilize special replacement codes that populate an all-in-one Contact block.

There are 3 different layout options available:

• Each layout has variations for different Hours content:
  • Sales Hours
  • Service Hours
  • Parts Hours
  • Custom Hours

These codes are particularly useful for maintaining consistent contact information displays across the site while allowing for flexible layout options.

For a complete list of available contact block replacement codes and their layouts, refer to the Contact Block Replacement Codes Documentation .

Example Codes

Here are examples of the three layout options with Sales Hours:

<!-- Layout Option 1 with Sales Hours -->
#LOADCUSTOMFILE|Responsive|Production|Footer|Custom-Footer1-Hours-Sales#

<!-- Layout Option 2 with Sales Hours -->
#LOADCUSTOMFILE|Responsive|Production|Footer|Custom-Footer2-Hours-Sales#

<!-- Layout Option 3 with Sales Hours -->
#LOADCUSTOMFILE|Responsive|Production|Footer|Custom-Footer3-Hours-Sales#

Best Practices

Don't override font families, colors, sizes, or spacing. Styling for elements like <p>, <h1>, <h2>, etc. are already built in to our OEM Styles.

Targeting generic or wide-reaching elements like body or ul can inversely affect things in the Header, Footer, or Bonus Block elements. Make sure any custom CSS is only targeting what's in the Custom HTML for that specific page.

Use color classes (ex. text-white, text-cta, text-muted) rather than manual CSS.

Use padding and margin classes (ex. pad-3x, pad-vert-2x, margin-bottom-x) rather than manual CSS.

Don't override style-specific color classes (anything with main or cta). This is important for avoiding compliance issues.

Don't over-complicate styling if it's not needed. Our newly-migrated pages aren't obligated to match a reference page's padding, width, font sizes, etc. exactly. If you happen to be given specific instructions to closely match a reference layout, you're free to do more custom CSS to get something looking as intended, but for most general migration situations, our built-in headings/cta/container/etc. classes are the best option to use.

Using the built-in fonts and colors is also especially important for certain OEMs that are very strict about branding compliance. If this results in the new page not being able to totally match the reference page visually, that's fine.

Design Guidelines

When creating pages, designers have flexibility to improve and simplify content while maintaining brand standards and usability.

Page Titles and H1 Tags

If the <h1> is really wordy, just keep the <h1> already populated in the DealerOn page. There's no need to recreate overly complex headings when a simpler approach would be more effective.

Using heroTemplates

Make use of heroTemplates when building pages. Pages do not need to be a 1:1 creation from the reference site. Content can be simplified and improved based on the designer's discretion. Don't feel like you need to recreate the page or copy the design exactly as it appears on the reference site.

Design Best Practices

When building pages, focus on implementing:

• Bootstrap 3 Components - Utilize the built-in grid system and components
• Extend CSS Classes - Use the platform's extended CSS classes for consistent styling
• Proper Spacing - Implement consistent padding and margins using platform classes
• Responsive Design - Ensure all pages work well across all device sizes
• GA4 Tagging - Include appropriate analytics tracking on interactive elements
• Replacement Codes - Use dynamic content codes where appropriate
• Semantic HTML - Structure content with appropriate HTML5 elements
• Minimal CSS - Avoid excessive custom CSS when platform classes can be used

Custom Forms

Custom Form <script> tags can stay with the HTML and do not need to go in the body bottom. This helps maintain the connection between form markup and its associated functionality.

Padding and Margin Classes

Padding

Padding options include all sides, vertical, horizontal, and isolated to each direction (top, right, bottom, left). Padding sizes vary from .5em to 4em.

• pad_5x = .5em
• pad-1x = 1em
• pad-2x = 2em
• pad-3x = 3em
• pad-4x = 4em
• pad-x = no padding

Lists (padding)

NOTE: Class for list items should be placed on the UL or OL element, not the LI.

Padding on all sides, around each LI item.

.list-pad_5x .list-pad-1x .list-pad-2x .list-pad-3x .list-pad-4x

Example

List with 1em padding on each side of the list item (not ul). (.list-pad-1x)

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit

Vertical padding top & bottom

.list-pad-vert-x .list-pad-vert_5x .list-pad-vert-1x .list-pad-vert-2x .list-pad-vert-3x .list-pad-vert-4x

Example

List with 1em padding on top and bottom of the list item (not ul). (.list-pad-vert-1x)

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit

Horizontal padding left & right

.list-pad-horz-x .list-pad-horz_5x .list-pad-horz-1x .list-pad-horz-2x .list-pad-horz-3x .list-pad-horz-4x

Example

List with 1em padding on left and right of the list item (not ul). (.list-pad-horz-1x)

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit

Isolated padding top, bottom, left, or right

Top

.list-pad-top-x
.list-pad-top_5x
.list-pad-top-1x
.list-pad-top-2x
.list-pad-top-3x
.list-pad-top-4x

Bottom

.list-pad-bottom-x
.list-pad-bottom_5x
.list-pad-bottom-1x
.list-pad-bottom-2x
.list-pad-bottom-3x
.list-pad-bottom-4x

Left

.list-pad-left-x
.list-pad-left_5x
.list-pad-left-1x
.list-pad-left-2x
.list-pad-left-3x
.list-pad-left-4x

Right

.list-pad-right-x
.list-pad-right_5x
.list-pad-right-1x
.list-pad-right-2x
.list-pad-right-3x
.list-pad-right-4x

Example

List with 1em padding on top of the list item (not ul). (.list-pad-top-1x)

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit

All elements (padding)

Padding on all sides.

.pad_5x .pad-1x .pad-2x .pad-3x .pad-4x

Example

Item with 1em padding on each side of the item item. (.pad-1x)

Vertical padding top & bottom

.pad-vert-x .pad-vert_5x .pad-vert-1x .pad-vert-2x .pad-vert-3x .pad-vert-4x

Example

Item with 1em padding on top and bottom of the item item. (.pad-vert-1x)

Horizontal padding left & right

.pad-horz-x .pad-horz_5x .pad-horz-1x .pad-horz-2x .pad-horz-3x .pad-horz-4x

Example

Item with 1em padding on left and right of the item item. (.pad-horz-1x)

Isolated padding top, bottom, left, or right

Top

.pad-top-x
.pad-top_5x
.pad-top-1x
.pad-top-2x
.pad-top-3x
.pad-top-4x

Bottom

.pad-bottom-x
.pad-bottom_5x
.pad-bottom-1x
.pad-bottom-2x
.pad-bottom-3x
.pad-bottom-4x

Left

.pad-left-x
.pad-left_5x
.pad-left-1x
.pad-left-2x
.pad-left-3x
.pad-left-4x

Right

.pad-right-x
.pad-right_5x
.pad-right-1x
.pad-right-2x
.pad-right-3x
.pad-right-4x

Example

Item with 1em padding on top of the item. (.pad-top-1x)

.pad-x

.pad-x

Example

Removes all padding (.pad-x)

Margin

Margin options include all sides, vertical, horizontal, and isolated to each direction (top, right, bottom, left). Margin sizes vary from .5em to 4em.

• margin_5x = .5em
• margin-1x = 1em
• margin-2x = 2em
• margin-3x = 3em
• margin-4x = 4em
• margin-x = no margin

.margin-auto

Centers content within a section - best used to center images.

Example

.margin-auto { margin-left: auto; margin-right: auto}

Lists (margin)

NOTE: Class for list items should be placed on the UL or OL element, not the LI.

Margin on all sides, around each LI item.

.list-margin_5x .list-margin-1x .list-margin-2x .list-margin-3x .list-margin-4x

Example

List with 1em margin on each side of the list item (not ul). (.list-margin-1x)

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit

Vertical margin top & bottom

.list-margin-vert-x .list-margin-vert_5x .list-margin-vert-1x .list-margin-vert-2x .list-margin-vert-3x .list-margin-vert-4x

Example

List with 1em margin on top and bottom of the list item (not ul). (.list-margin-vert-1x)

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit

Horizontal margin left & right

.list-margin-horz-x .list-margin-horz_5x .list-margin-horz-1x .list-margin-horz-2x .list-margin-horz-3x .list-margin-horz-4x

Example

List with 1em margin on left and right of the list item (not ul). (.list-margin-horz-1x)

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit

Isolated margin top, bottom, left, or right

Top

.list-margin-top-x
.list-margin-top_5x
.list-margin-top-1x
.list-margin-top-2x
.list-margin-top-3x
.list-margin-top-4x

Bottom

.list-margin-bottom-x
.list-margin-bottom_5x
.list-margin-bottom-1x
.list-margin-bottom-2x
.list-margin-bottom-3x
.list-margin-bottom-4x

Left

.list-margin-left-x
.list-margin-left_5x
.list-margin-left-1x
.list-margin-left-2x
.list-margin-left-3x
.list-margin-left-4x

Right

.list-margin-right-x
.list-margin-right_5x
.list-margin-right-1x
.list-margin-right-2x
.list-margin-right-3x
.list-margin-right-4x

Example

List with 1em margin on top of the list item (not ul). (.list-margin-top-1x)

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit

All elements (margin)

Margin on all sides.

.margin_5x .margin-1x .margin-2x .margin-3x .margin-4x

Example

Item with 1em margin on each side of the item item. (.margin-1x)

Vertical margin top & bottom

.margin-vert-x .margin-vert_5x .margin-vert-1x .margin-vert-2x .margin-vert-3x .margin-vert-4x

Example

Item with 1em margin on top and bottom of the item item. (.margin-vert-1x)

Horizontal margin left & right

.margin-horz-x .margin-horz_5x .margin-horz-1x .margin-horz-2x .margin-horz-3x .margin-horz-4x

Example

Item with 1em margin on left and right of the item item. (.margin-horz-1x)

Isolated margin top, bottom, left, or right

Top

.margin-top-x
.margin-top_5x
.margin-top-1x
.margin-top-2x
.margin-top-3x
.margin-top-4x

Bottom

.margin-bottom-x
.margin-bottom_5x
.margin-bottom-1x
.margin-bottom-2x
.margin-bottom-3x
.margin-bottom-4x

Left

.margin-left-x
.margin-left_5x
.margin-left-1x
.margin-left-2x
.margin-left-3x
.margin-left-4x

Right

.margin-right-x
.margin-right_5x
.margin-right-1x
.margin-right-2x
.margin-right-3x
.margin-right-4x

Example

Item with 1em margin on top of the item. (.margin-top-1x)

.margin-x

.margin-x

Example

Removes all margin (.margin-x)

What Not to Migrate

Even if these are requested in a case, do not migrate: staff pages, specials, inventory feeds, hard-coded reviews, or video files that aren't embeds.

Project Coordinators can use our platform /staff.aspx to execute Staff pages. This is not a page that should be sent to Design. If it is, skip and leave a note when closing the case.

A Specials feed should never be hardcoded. Instead, you can add a CTA to the Specials page. The same rules apply for Inventory feeds - these should not be hardcoded; you can link to inventory pages like /searchnew.aspx instead.

Our search widgets only work on the homepage. Please don't attempt to add them to internal pages.

Reviews should be populated by a script. If you're requested to build out a custom page with review content and no script has been provided, please push back and request one from the Project Coordinator.

Visual Examples

Design Case FAQs and Special Situations

This section provides answers to frequently asked questions and instructions for handling special situations in Design cases.

Key Resources

• Custom Logos and Custom Headers - How to handle situations such as adding a custom logo in the header, updating OEM logos, or where a custom header needs to be used
• "Search New" and "Search Used" Mobile Homepage Buttons - Best practices for working with these buttons
• SEO Text - How to add SEO Text on the bottom homepage block, or work with SEO Text in the Footer
• Add a Specials or Vehicle Carousel/Scroller - Best way to add a carousel highlighting dealer's current inventory with prices

Common Questions

<!-- Instead of -->
<h1>#NAME# - Auto Repair and Service Center You Can Depend on at #CITY#</h1>

<!-- Use -->
<h1 class="heading-lg">#NAME#</h1>
<h2 class="margin-top-x margin-bottom-1x">Auto Repair and Service Center You Can Depend on at #CITY#</h2>

GA4 Tagging

GA4 Event Action Result Values

data-dotagging-event-action-result values

When implementing GA4 tracking for links and interactive elements, use the following standardized values for the `data-dotagging-event-action-result` attribute:

GA4 Tagging Reference

The following examples can be used as a starting reference when adding GA4 tagging.

The tags that are needed in each case have been extracted and listed out to show the hierarchy of which ones can be added at a higher parent level vs. which ones will need to be added to each unique instance of an element.

Element Ordering Guidelines

When to Increment

Elements increment (0, 1, 2...) when they are:

• Part of the same logical group
• Share the same tagging properties:
  • Same data-dotagging-event
  • Same data-dotagging-element-subtype
  • Same data-dotagging-product-name

What Counts as a Container

Think of containers like different rooms in a house - each room has its own purpose and organization. The main containers are:

• .row elements
• Sections with the same data-dotagging-product-name
• Navigation groups
• Tab groups
• Model bars
• Header/footer sections

When to Reset to 0

Just like starting a new chapter in a book, we reset to 0 when:

• Entering a new main container
• Switching to elements with different tagging properties
• Moving to a new logical section of the page unless its in there already

VS Code Snippets

The following snippets are available in VS Code to quickly add GA4 tagging to your elements. Use the prefix commands to insert them.

Hyperlinks

• ga4-hyperlink-open - For links that stay in the same tab
• ga4-hyperlink-search - For search result links
• ga4-hyperlink-redirect - For external links that open in new tabs

Example of a standard hyperlink (ga4-hyperlink-open):

<a href="SOURCE"
   data-dotagging-link-url="SOURCE"
   data-dotagging-event="cta_interaction"
   data-dotagging-product-name="Website|Custom Content"
   data-dotagging-event-action-result="open"
   data-dotagging-element-type="body"
   data-dotagging-element-order="0"
   data-dotagging-element-subtype="hyperlink">CONTENT</a>

CTA Buttons

• ga4-cta-open - For CTAs that stay in the same tab
• ga4-cta-search - For search-related CTAs
• ga4-cta-redirect - For external CTAs that open in new tabs

Example of a CTA button (ga4-cta-open):

<a href="SOURCE"
   class="btn btn-cta"
   data-dotagging-link-url="SOURCE"
   data-dotagging-event="cta_interaction"
   data-dotagging-product-name="Website|Custom Content"
   data-dotagging-event-action-result="open"
   data-dotagging-element-type="body"
   data-dotagging-element-order="0"
   data-dotagging-element-subtype="cta_button">CONTENT</a>

Image Links

• ga4-img-open - For image links that stay in the same tab
• ga4-img-search - For search-related image links
• ga4-img-redirect - For external image links that open in new tabs

Example of an image link (ga4-img-open):

<a href="SOURCE"
         data-dotagging-link-url="SOURCE"
         data-dotagging-event="media_interaction"
         data-dotagging-product-name="Website|Custom Content"
         data-dotagging-event-action-result="open"
         data-dotagging-element-type="body"
         data-dotagging-element-text="Alt Text"
         data-dotagging-element-order="0"
         data-dotagging-element-subtype="image">
        <img src="images/promo.jpg"
         alt="Alt Text"
         class="img-responsive margin-auto"
         loading="lazy" decoding="async">
      </a>

Phone Links

• ga4-phone - For click-to-call phone numbers

Example of a phone link:

<a href="tel:#PHONE1-MOBI-DIGITS#"
         data-dotagging-product-name="Website|Custom Content"
         data-dotagging-comm-phone-number="tel:#PHONE1-MOBI-DIGITS#"
         data-dotagging-element-type="body"
         data-dotagging-event-action-result="redirect"
         data-dotagging-element-order="0"
         data-dotagging-element-subtype="hyperlink"
         data-dotagging-event="click_to_call">
         #Phone-Number#
      </a>

Development Tools

The following tools and utilities help streamline the development process and ensure consistent code quality across projects.

Emmet

Emmet is built into VS Code and can dramatically speed up HTML/CSS writing. Here are some useful Emmet shortcuts for content migration:

Common Emmet Patterns

Reference the complete Emmet Cheat Sheet for all available shortcuts.

• container>row>col-12 → Basic Bootstrap grid
• ul>li*3 → Unordered list with 3 items
• .text-main+.text-cta → Common text classes

DealerOn-Specific Patterns

section.pad-3x>h2{Section Title}+p.text-main

This expands to a common section structure with proper padding and text classes.

CSS Minification

CSS minification is the process of removing unnecessary characters such as whitespace, comments, and formatting from CSS files. This results in smaller file sizes and faster load times.

For CSS minification, use:

• CSS-On-Line VSCode Extension - Provides efficient CSS minification capabilities
• Rox Unlimited CSS Beautifier

Bookmark Scripts

Bookmark scripts (bookmarklets) can enhance CMS navigation and content migration workflow. Here are some useful examples:

Access our collection of useful bookmark scripts in the DealerOn Bookmark Scripts Documentation .

Image Downloader Tool

An Image Downloader browser extension can be useful for extracting images from reference websites in their original format and quality. This helps ensure you are using the best available assets for migration. One popular option is Image Downloader - Imageye for Chrome. Search the extension store for your browser (Chrome, Firefox, etc.) for other available options.

Accessibility Tools

Accessibility Guidelines

<video src="intro.mp4" autoplay loop muted></video>
<p class="sr-only">The above video shows a silver Toyota Camry driving through a city at sunset.</p>

<div class="form-group">
  <label for="email" class="sr-only">Email Address</label>
  <input type="email" id="email" class="form-control" required>
</div>

Image Sources and Copyright

Adding Images to Your Content Migration Pages

We must be mindful of copyright when adding images to our sites. Do not arbitrarily bring over all images from the reference site. See below for guidelines.

Custom Dealer Images

Images that are clearly sourced from the dealer can be migrated over to the local media gallery. An example would be an exterior shot of a dealership, a picture of their staff or service center, etc.

To keep the media gallery organized, please create a folder called custom-pages and then a subfolders for each page you need to upload images for.

As necessary for best page speed, resize and compress images. Our media gallery accepts a variety of formats, including: .svg, .webp, .png, and .jpg.