Rich-text Reply

HTML to specify a sitewide feature with different locations on different pages when URL targetting

DiveTheWorld 02-24-17

HTML to specify a sitewide feature with different locations on different pages when URL targetting

Sorry for the long subject.

 

So we want to vary our Enquire Now call to action on multiple pages. We used URL targetting for this. However our Enquire now is in the body of each page sometimes after 2 paragraphs of text,  sometimes 3, sometimes 4 but always above  the same header.

 

I realise "You can use URL Targeting to test variations on a single element that's on every page of your site or on multiple pages, like a navigation bar or a footer."

 

Does anyone know what html to use to ALWAYS place the feature above that header? (so that Optimizely considers it always in the same place and can present it uniformaly across the variations).

 

We are newbies to Optimizely. We changed the feature on the preview page and url targetted using substring. However the variations are all out of place on different pages.

 

Any help would be much appreciated.

 

RyanC 02-24-17
 

Re: HTML to specify a sitewide feature with different locations on different pages when URL targetti

It is possible, does the call to action button (Enquire Now) and header have a specific html identifier? Usually this is the case, and by using some javascript (Edit Code feature) you can create a simple function to place them accordingly if 2 of the elements are on the page.
Ryan
------------------------------------------------
The best solution is the simplest.
Level 11
JasonDahlin 02-24-17
 

Re: HTML to specify a sitewide feature with different locations on different pages when URL targetti

[ Edited ]

based on how your site uses "Enquire Now", you won't be able to "detach" the existing link and "attach" the link in a new location without messing up your page (due to the presence of text on the page that refers to the link which you are moving)

 

So... maybe you just want to add a single copy of the link to the CTAs at the very top of the page?

 

In that case, like @RyanC suggested, the key is to identify the HTML that you want ot insert into the page.  in this case, it would be:

 

<a rel="nofollow" title="Use this simple 3 minute form to send your diving enquiry" class="enq_icon" href="enquiry.php">Enquire Now</a>

Now that you have the HTML for the link, we need to decide where you are placing it.  Let's take a walk through how to place it into the "header__nav" (the links at the very top of the page).

 

 

The links in the header__nav are all inside of a div that looks like this:

 

<div class="nav__item"></div>

Also, note that each <a> link has the class "nav__link" on it (makes it have white text instead of blue, so it will show up against the background image in your header.

 

To accomodate those things, we will modify the orignal link's HTML a little bit by placing it inside the <div> and addign the class that makes the text white.  We end up with this:

 

<div class="nav__item"><a rel="nofollow" title="Use this simple 3 minute form to send your diving enquiry" class="enq_icon nav__link" href="enquiry.php">Enquire Now</a></div>

Now - to place it into your header__nav, there are several jQuery functions you can use (prepend, prependTo, append, appendTo, insertBefore, insertAfter, etc.).

 

 

Looking at the elements in your header__nav, you'll see that they display right-to-left based on the order they appear in the HTML (that is, the first <div> is on the right, the last <div> is on the left).  Since I want to put the Enquire Now link all the way to the right, I will need to "prepend" it so that it becomes the first HTML element which will make it go all the way to the right.

 

My final code looks like this:

 

var theLink = '<div class="nav__item"><a rel="nofollow" title="Use this simple 3 minute form to send your diving enquiry" class="enq_icon nav__link" href="enquiry.php">Enquire Now</a></div>';
$('.header__nav').prepend(theLink);

This makes your top navigation look like this:

http://pasteboard.co/CcopGgBy9.png

 

The code above can be run in your browser's Developer Console (F12 on most browsers).

Fiddle around with it until you're happy with the placement and look, then open the "edit code" window, paste it in there, save the experiment and give it a try!

--Jason Dahlin
Analytics and Testing Guru Smiley Happy