Setting Up a Campaign
      Back to home
      1. Help Center
      2. Build
      3. Setting Up a Campaign

      How do I modify multiple elements on the same page?

      This topic provides an example of how to create a Campaign that changes several elements on the same page. To do this we use a single Variation Group that contains three Variations that all use the same Trigger, specified as the same URL. You will work with the following components:

      • an Original
      • a single Variation Group that contains the following three Variations that make changes to the same page:
        • Change Add to Cart to Buy Now.
        • Change Sale ends next week to Sale ends tomorrow.
        • Change 15% off to 20% off.
      • a Trigger that determines when to show the Variations to your visitors, specified as a single page
      • a single Key Performance Indicator (KPI) that measures if the change was effective

      Building the Example

      Let's say that you want to test the three changes described above. The following steps explain how to use the Campaign Builder to do that in very broad steps. For greater detail, click on the highlighted terms within the steps or view the other more detailed topics within the help.

      1. Start out by creating a new Campaign: select New, A/B Campaign. The New Campaign page opens.

        How do I modify multiple elements on the same page - Building the Example
      2. Define the Campaign.
      3. Create a Variation Group called Home Page.
        1. Open the first Variation Group and rename it to Change the Buy Button.
      4. Define the Variations.
        1. Rename Variation 1 to Buy Now.
        2. Define a Trigger called Home Page that shows the Variation to a visitor only when the visitor views the Home page.
        3. Add two more Variations.
        4. Define the changes for the Variations.
      5. Add a Key Performance Indicator (KPI) that measures how many visitors got to the Checkout Complete page after seeing the Variations.

      Define The Campaign

      1. Open the General section of the page.
      2. Enter a descriptive name for your Campaign. The name you enter appears in the Campaign List. For this example, enter Three Changes to the Home Page.
      3. Select Standard from the Type drop-down.

        None of the other fields in this section of the page are required. Feel free to skip them for now.

      Create a Variation Group

      The Variation Group contains a collection of Variations that you want to test together. Variations describe the changes you want to make to a specific page. In this example, we're going to make three changes to the Home page: index.html.

      You can define Variations using the Visual Editor or using Find & Replace mode. The Variations section uses Visual Editor by default. However, this example uses Find & Replace mode so you'll have to switch to that mode.

      1. Open the Variations section of the Campaign Builder.
      2. On the right side of the Variations area, select Find & Replace from the Select Edit Mode drop-down. 

      How do I modify multiple elements on the same page - Create a Variation Group

      Once you make this selection, the fields in the Variation section of the page change. The Variations section will look like the one in the following image. Refer to Variations Overview to learn about all the elements of this page area.

      How do I modify multiple elements on the same page - Create a Variation Group II

      1. Open Variation Group 1 and change its name to Home Page. To edit the name, click on the text and replace Variation Group 1 with Home Page.

        How do I modify multiple elements on the same page - Create a Variation Group III

      Define the Variations

      In this next section, we'll define three Variations and specify a Trigger that works for all three.

      1. Rename Variation 1 to Buy Now.How do I modify multiple elements on the same page - Define the Variations
      2. Triggers determine when to show the Variation to visitors. For this example, we want to show the visitor several changes if the visitor lands on the Home page. We do this by specifying a Trigger that recognizes when the visitor lands on the Home page. In the Triggers area, URL is selected by default. Select Regex from the drop-down and enter /index.html in the field next to it. When a visitor lands on http://www.mysite.com/index.html, the visitor sees the Variations you define.
        How do I modify multiple elements on the same page - Define the Variations II
      3. At the right end of the entry field, notice the little ESC button. Click ESC to escape the content of this field. When the text is escaped, it looks like this:
        How do I modify multiple elements on the same page - Define the Variation III
        4.  The Find this field specifies what you want to look for on the page. For this example, we want to replace the text on the existing button with new text. The existing button text is Add to Cart. Enter that text in the Find this field.
        How do I modify multiple elements on the same page - Define the Variation IV
        5. The Replace with this field specifies what replaces the contents of the Find this field. For this example, we want to replace the text with some new text. The replacement text is Buy Now. Enter that text in the Replace with this field.

        How do I modify multiple elements on the same page - Define the Variation V

        6. Click Save to save your work.

        7. On the right side of the page in the name row of the first Variation you created, click on the three dot menu and select Copy from the menu.

        How do I modify multiple elements on the same page - Define the Variations VI

        SiteSpect adds another Variation to the Variation Group.

        How do I modify multiple elements on the same page - Define the Variations VII

        8. Rename the new Variation Sale Ends Tomorrow. The Trigger for this Variation is automatically the same Trigger that you created for the first Variation. Leave it as is so that the Variation will trigger on the same page. In the Find this field, enter Sale Ends Next Week. In the Replace with this field, enter Sale Ends Tomorrow.

        When you're done, the Variation should look like the one in the following image:

        How do I modify multiple elements on the same page - Define the Variations VIII

        9. To create the third Variation, open the three dot menu the way you did above, in the same row as the Variation called Sale Ends Tomorrow, and select Copy. SiteSpect copies the Variation and places the new one at the bottom of the Variation Group with the same name as the one you copied, as shown in the following image:

        How do I modify multiple elements on the same page - Define the Variations IX

        10. Rename the new Variation to 20% off. Open the Variation by clicking the small arrow to the left of its name. It is a copy of the Sale Ends Tomorrow Variation. It has the same Trigger and the same Find and Replace text.

        11. Leave the Trigger as is because it tells SiteSpect to look for text on the Home page and that's where you want all your changes to be reflected. But change the Find text to 15% Off and change the Replace text with 20% Off. Once you do, you will have finished creating the Variations you need.

        Add a Key Performance Indicator

        1. Open the Metrics area of the page and drag one Metric to the KPI (Key Performance Indicator) box. In this case, you want to use a Metric Called Checkout Complete. This measures how many visitors get to the Checkout Complete page when shown the Variations you designed above.

        How do I modify multiple elements on the same page - Add a Key Performance Indicator

        2. Click Save at the bottom of the page to save your new Campaign. This Campaign will be listed on the Campaign List page and remains in Review mode until either you start it running or its start date arrives.