Adventures in SiteSpect: Create A Campaign Using Search and Replace

By Ruby Brown

October 16, 2018


I’m a content marketer at SiteSpect, and I have limited background in coding and web development. Still, as part of my job I not only need to understand our product in theory, but to use it to experiment with site content and design. My journey mirrors that of many marketers using SiteSpect, so I’m sharing my projects here. In this series you’ll get mini lessons using the product, ideas for optimization, and a feel for using SiteSpect.

In this blog I’m going to start at the beginning and walk through how I created a simple campaign with some text variations. In this case I used the search and replace function. But you could achieve the same with the visual editor and I’ll go over that process in my next blog.

Step 1

First I logged in and created a new A/B test campaign.

screen shot of sitespect select a/b campaign

Then I named it and included my hypothesis. The hypothesis isn’t necessary, but if you’re running many A/B tests it’s a good idea to keep track of them and the intention behind them.

screenshot title and hypothesis in sitespect

Step 2

This is where I got to work. In this case, I created a campaign for our SiteSpect website. I decided that the navigation could use a personal touch. I went to our website and opened up the source code. (Just right click on your browser and an option will show up). Then I figured out which snippet of code denoted navigation text.

I knew “Solutions” was in the text, so I looked for the code that modified it. It’ll look something like the photo below.

screen shot of source code in sitespect

Then I went back to my campaign and made sure it was in Find and Replace mode.

screen shot to select find and replace

Step 3

Here comes the fun part! In my campaign, I specified that these changes should be triggered when page source contains this code: <li class=”dropdown”>. (The code indicates a dropdown menu).

I copied the entire chunk of code from the page source that contained the top navigation information.

screen shot of selection of code for sitespect

I took that chunk and pasted it into the “Find This” box. Now, SiteSpect knows to examine every page with <li class=”dropdown”> on it, and then identify this entire chunk of code.

Next comes the real work. I went through this section and replaced each word that I chose with a new word to appear on the screen. This doesn’t require any knowledge of coding — only that you know what text you’re looking for, and what you would like it to say instead. It should look something like this.

screen shot of find and replace

Step 4

Now, you can preview your good work! For this A/B test, I decided that should really give much more information about me, Ruby Perlmutter. Here’s what I came up with.

preview of sitespect campaign top nav


screenshot of new top navigation in sitespect

Wrap Up

Now unfortunately, because of professionalism or something I did not push this campaign through to a live audience. If I had, I would be able to specify who sees it and how often, and get extensive data about how users interact with the new navigation. In a future blog, I’ll create a live variation and walk through all the cool things we can do with analytics.

Want a Custom Demo? Click Here.

To learn more about SiteSpect, visit our website.


Ruby Brown

Ruby Brown

Suggested Posts

Subscribe to our blog: