Creating a Customized Link or Pop-Up

Links and pop-ups can be configured to meet specific criteria using the Webcare Rule Builder tool. Rules allow you to set up and configure conditions based upon specific customer behavior.

Example: Creating a Link based on Locale

For example, you can display a French language static link to a customer in France, while displaying an English language pop-up link to a customer in the United States.

The page instrumentation that you configured in the Adding Automatic Page Instrumentation section adds JavaScript variables to your Web page. One of the variables added is the _atg_locale variable. This variable identifies the customer’s locale. You create a rule that uses a VarFieldMatch to see if the JavaScript variable named by Argument 1 is equal to the value in Argument 2. If so, the rule will display its associated link.

Using the French language example, to create a button that only renders for those customers who speak French, the page instrumentation would write var _atg_locale=fr_FR into the page when French is chosen, a VarFieldMatch rule could be used to render the link by specifying fr_FR as the value for Argument 2. For an English speaker who lives in the United States, the VarFieldMatch rule could be used to render the link by specifying en_US as the value for Argument 2.

To create an example customized static link that resides in a specific location on your customer-facing website:

  1. Ensure that you have created a <div> tag in the HTML for your Web server pages as outlined in Configuring a Static Link.

  2. Create a link, following the steps outlined above in Creating a Link. To create a French link, select French from the Language drop down menu. For example, create a link named StaticFrenchLink that identifies the link as a static link that displays in French.

  3. Save the link.

  4. Open the Webcare Rule Builder tool and click Add New Rule to create a new rule.

  5. Name the rule. Use a name that identifies the rules function.

  6. Ensure that the rule applies to both Customer and Agents, and that the rule is set to Enabled.

  7. Enter the Link to Show. This is the link that you created in Step 3. For example, enter StaticFrenchLink.

  8. Use the Rule Type pull down menu to select the VarFieldMatch rule type. This rule type will check to see if the field identified in the Argument 1 field matches the regular expression identified in the Argument 2 field.

  9. In the Argument 1 field, enter _atg_locale. This retrieves the information regarding the customer’s location.

  10. Identify the language required by entering fr_FR in the Argument 2 field. This indicates that the language is French, as spoken by a customer living in France.

  11. The optional Argument 4 is used to pass the value of the matching JavaScript variable. The value can later be retrieved from the Web service.

  12. Save the rule.

To create an example customized English language pop-up link:

  1. Create a link, following the steps outlined above in Creating a Generic Pop-Up. To create an English pop-up, select English from the Language drop down menu. For example, create a link named EnglishPopUp that identifies the link as a pop-up link that displays in English.

  2. Save the link.

  3. Open the Webcare Rule Builder tool and click Add New Rule to create a new rule.

  4. Name the rule. Use a name that identifies the rules function.

  5. Ensure that the rule applies to both Customer and Agents, and that the rule is Enabled.

  6. Enter the Link to Show. This is the link that you created in Step 2. For example, enter EnglishPopUp.

  7. Use the Rule Type pull down menu to select the VarFieldMatch rule type. This rule type will check to see if the field identified in the Argument 1 field matches the regular expression identified in the Argument 2 field.

  8. In the Argument 1 field, enter _atg_locale. This retrieves the information about the customer’s location.

  9. Identify the language required by entering en_US in the Argument 2 field. This indicates that the language is English, as spoken by a customer living in the United States.

  10. The optional Argument 4 is used to pass the value of the matching JavaScript variable. The value can later be retrieved from the Commerce Service Center Web service.

  11. Save the rule.

Example: Creating a Link based on Segments and Scenarios

You can create links or pop-ups that target a specific audience, such as people who are most likely to adopt early technology. You can create variables that display specific information to targeted audiences. By using the Scenario module, you create the scenario that identifies your target audience, and then modify your customer-facing Web page to include the <div> tags.

  1. Create a <div> tag, as outlined above in the Configuring a Static Link section. Record the name of the <div> tag, as it will be used when creating the link.

  2. From the ATG Control Center > Targeting > Project Name > Profile and Content Groups, create a user profile. For example, create a user profile that identifies people between the ages of 15 and 30 that purchase early technology. Name the profile something that is descriptive, such as EarlyAdopters.

  3. Open Pages and Components > J2EE Pages and open your storefront file.

  4. Open the clickToCallLink.jsp file. For example, the /navigation/gadgets/
    clickToCallLink.jsp     file. The storefront page may resemble the following:

    <dsp: page>
    <!- – - if the click to call feature is disabled, this entire div can be
    safely bypassed --- >
    <c: choose>
      <c: when test="$(not empty Click to CallConfig)">
        <fmt: message var="itemLabel"
          key="navigation_clickToConnect.PremiumTitle"/>
        <fmt: message var="itemTitle" key="common.linkTitle">
          <fmt: param value="$(itemLabel)"/>
        </fmt: message>
        <H3>$(itemLabel></H3>
        <fmt: message var="itemLabel"
          key="navigation_clickToConnect.QuestionsTitle"/>
        <fmt: message var="itemTitle" key="common.linkTitle">
          <fmt: param value="$(itemLabel)"/>
        </fmt: message>
        <H3>$(itemLabel></H3>
      </c: when>
    </c: choose>
    </dsp: page>

  5. Use the Insert Servlet Bean icon to select the Switch droplet. Enter the name of the user profile you created in step 1. For example, bean: /atg/userprofiling/
    Profile.EarlyAdopters    .

  6. Enter the HTML that is displayed if the value is true. This value is the <div> tag that you created for people who are members of the EarlyAdopters profile. For example:

    <div id="atg_mystore_ClickToCallEarlyAdopters_link">

  7. Enter the HTML that is displayed if the value is false. This value is the other <div> tag that you created for people who are not members of the EarlyAdopters profile. For example:

    <div id="atg_mystore_ClickToCall_link">

  8. The code now resembles:

    <dsp: page>
    <!-- if the click to call feature is disabled, this entire div can be
      safely bypassed -->
    <dsp: importbean var="Click to CallConfig" bean="/atg/clicktoconnect/
     Configuration"/>
    <c: choose>
      <c: when test="${not empty Click to CallConfig}">
        <dsp: droplet name="/atg/dynamo/droplet/Switch">
          <dsp: param bean="/atg/userprofiling/Profile.EarlyAdopters"
            name="value"/>
            <dsp: oparam name="true">
              <div id="atg_mystore_ClickToCallEarlyAdopters_link">
            </dsp: oparam>
           <dsp: oparam name="false">
              <div id="atg_mystore_ClickToCall_link">
           </dsp: oparam>
        </dsp: droplet>
       </div>
       <p style="height: 30px"/>
      </c: when>
    </c: choose>
    </dsp: page>

Once you have modified the .jsp file, you must create the links and rules that will display the information.

  1. Create a link. Ensure that the Relative to Layer ID names the <div> you created earlier, for example: atg_mystore_ClickToCallEarlyAdopters_link. Once you have created the link, save the link.

  2. Open the Webcare Rule Builder tool and click Add New Rule to create a new rule.

  3. Name the rule. Use a name that identifies the rules function.

  4. Ensure that the rule applies to both Customer and Agents, and that the rule is set to Enabled.

  5. Enter the Link to Show. This is the link that you created in Step 9. For example, enter StaticEarlyAdoptersLink.

  6. Use the Rule Type pull down menu to select the VarFieldMatch rule type. This rule type will check to see if the field identified in the Argument 1 field matches the regular expression identified in the Argument 2 field.

  7. In the Argument 1 field, enter profile.profile name. This retrieves the information regarding the customer’s profile. For example profile.earlyAdopters searches for the Early Adopter profile.

  8. Identify whether the profile should be activated or not by entering true in the Argument 2 field. This indicates that customer is a member of the profile.

  9. The optional Argument 4 is used to pass the value of the matching JavaScript variable. The value can later be retrieved from the Commerce Service Center website.

  10. Save the rule.

For information on creating segments, refer to the ATG Business Control Center User's Guide and the ATG Personalization Guide for Business Users.

For additional information on creating Rules in Webcare, refer to the Webcare documentation or the Webcare screen field assistance.