Site Customization Set Up

  • Updated

Overview

Use the steps below to implement Site Customization.

Prerequisites

Verify you have completed these prerequisites before working with Site Customization.

  • Make sure you have your Demandbase Tag deployed on your site.
  • Make sure you set up Domain Whitelisting here. Domain Whitelisting allows you to enter and modify domains or subdomains to be accessible for preview in Site Customization. 
  • Review these definitions to understand the terminology used with Site Customization.
TERM DEFINITION
Segment High-level rules/conditions, such as Industry = Software where 1 or more Experiences can run for the segment.
Segment Name A name for the segment such as Software Segment.
Matches Any or All here refers to OR and AND operator on the Segment rules.
Experience One or more change actions such as changing the text, image or link of an HTML element. Experiences map to a single URL where the change actions will run on.
URL A full URL including path-names.
HTML ID The ID or class of an element. It is important to have unique selectors so that at run-time the desired element will be guaranteed to be modified versus other elements with similar names/IDs.

Set-Up Steps

Step 1: Set Up a Segment

1.1. Navigate to Engagement > Site Customization.

1.2. Click Create New Experience.

1.3. Select the option to create a new segment or select the option to choose from a list of existing segments.

setup_segment.png

1.4. Name the segment. A segment is made up of high-level rules/conditions, such as Industry = Software where 1 or more Experiences can run for the segment.

1.5. Set up conditions for this segment by searching for a specific attribute or selecting attributes from the list. To learn more about the attributes available click here.

  • For each attribute, select an operator and a value.
  • If you select multiple attributes, select a match rule (Or/And).
    The match rule values Or/And refer to Any or All.

software_and_technology_final.png

1.6. When you are finished making your selections, click Save and Continue.

Step 2: Create an Experience

2.1. Name the experience to be the general experience that you'll be changing, such as Home Page Banner or Home Page if you plan on changing multiple items.

2.2. Enter the URL of your site including the HTTP protocol.

2.3. Click Load this URL to load the web page you want to modify.

create_experience_monday.png

2.4. Hover over the element you want to change and then click to select it.

1_site_customization.png

2.5. In the pop-up window, select if you want to change the text or html.

2.6. Enter your text or html code changes. Once you are satisfied with your changes, click Apply to preview your change.

2_site_customization.png

Tip

You can adjust the text style by using inline styles from the Advanced Options link and setting the Type of change to HTML. Here are some examples.

  • To reduce the font size to 80%, wrap your text with a font size tag:  <div style="font-size:80%>Your text</div>.
  • To force all capital letters for marketing alias, wrap it with a transform tag: <div style="text-transform:uppercase">{marketing_alias}</div>

2.7. Review your change and continue selecting and changing additional page elements as needed.

2.8. To change an image background, click the image, select Background Image and update the image location. Click Apply to save your changes.

3_customization.png

2.9. Click the Enter Interactive Mode button to interact with your site pages before enabling the preview and customizations. Interactive Mode helps you to see and troubleshoot when pages can't load the URL or when you have minor issues accessing elements on the page you want to personalize.

enter_interactive_mode_button.png

2.10. When you are finished with your changes, click Save and Continue.

Step 3: Preview the Experience

3.1. Click Save to save your changes so you can access them later.

3.2. Activate or Deactivate your experience:

  • Click Activate to save and submit your changes. This does not publish your changes. Make sure to send an email to your Demandbase team to make the required configuration changes on Demandbase end in order to publish.
  • Click Deactivate if you need to deactivate an active experience.
Note: You can only deactivate activated experiences.

4_site_customization.png

3.3. Testing: To test an active experience further, you can request the Demandbase team to provide a test URL with a query parameter and a sample IP address to test the experience for a specific segment of visitors. For example, https://www.website.com/?personalization=Segment-<segmentName>.

Step 4: Set Up Google Analytics Event Tracking

4.1. Click the Setup Google Analytics Tracking link (located at the bottom left of the window) to set up tracking for this experience.

Step 5: Go Live

5.1. Provide approval to switch the personalized experience Live. The Demandbase team will make the necessary changes in the configuration to turn the experience Live on website. The changes start appearing when a visitor from the defined segment visits the website.

Post-Implementation Changes

Follow these steps if you need to make any changes after your initial implementation.

Note: If you make changes to any of the segments or experiences in Site Customization, Demandbase needs to update the configuration for the changes to take effect.
  1. Set up segments and experiences as per the instructions above.
  2. Use the Activate / Deactivate buttons to identify experiences you would like to have on or off, and use the Submit button when your changes are complete and ready for deployment.
  3. A support engineer will reach out to you within 24 hours with links to test the new experiences. If you do not receive correspondence within 24 hours then we recommend that you send an email to support@demandbase.com and loop in your CSM to make sure that the necessary code changes are made.

Site Customization Best Practices

  • For elements to be modified the correct way, it is industry practice to use ID or CSS Class to uniquely identify elements. Without following this practice, you could potentially run into unexpected changes being made to elements you did not intend to modify. For more information, consult with your Solution Consultant.
  • Carousels generally run custom scripts that don't allow any modification to the elements in the carousel. This is a security feature of the carousel script. Demandbase recommends static HTML in these situations by replacing the carousel with one unified experience for the target segment such as one banner/image/cta combination WITHOUT any sliders. This provides a targeted experience rather than a carousel that slides over to irrelevant content.
  • Leverage your analytics to make sure you are personalizing to a segment that gets traffic.
  • Make sure your personalization is bold enough to get noticed.

Tip

Use the Site Customization tool to customize existing page elements only. The tool is not designed to add completely new elements to the page or HTML architecture.

Note: Demandbase Customization does not support Adobe Analytics at this time.

Was this article helpful?

4 out of 6 found this helpful