Rich-text Reply

href value not getting replaced on all items

iagnosis 06-15-17

href value not getting replaced on all items

I am directing all traffic with certain utm parameters to a particular variation, which only changes the URL of hyperlinks to include new utm parameters. Not all links are getting their href values changed with the new utm parameters. We've tested on different OSs and different browsers, and the results are not consistent. 

 

The original page is: www.dermatologistoncall.com and the variation is: https://www.dermatologistoncall.com/?a=true&utm_source=wlg&utm_medium=dochome

 

You can see the changes made are to the two orange buttons and hyperlinked text under the second button. 

Level 2

robertchan 06-15-17
 

Re: href value not getting replaced on all items

Below is an image of what it sounds like you're looking to see on the variant that can only be accessed via UTM parameters.

 

Screen Shot 2017-06-15 at 1.14.12 PM.png

 

If this looks correct to you then I've supplied some code I wrote below to address your situation:

 

var utmvar = {
	allLinks: document.getElementsByTagName('a'),
	paramOne: 'utm_source=wlg',
	paramTwo: 'utm_medium=dochome',
	addOn: '?a=true&utm_source=wlg&utm_medium=dochome',
	init: function(){
		if(utmvar.urlContains(utmvar.paramOne) && utmvar.urlContains(utmvar.paramTwo)){
			for(var i=0;i<utmvar.allLinks.length;i++){
			    if(!(utmvar.allLinks[i].href.indexOf(utmvar.addOn)>-1) && utmvar.allLinks[i].href !== null && utmvar.allLinks[i].href !== ''){
			    	utmvar.allLinks[i].href += utmvar.addOn;
			    }
			}
		}
	},
	urlContains: function(requestedParam){
		if(window.location.href.indexOf(requestedParam)>-1){
			return true;
		} else {
			return false;
		}
	}
};
utmvar.init();

This should be called after your changes are made to elements on the page. The only section of the code you might want to customize is the area below:

 

paramOne: 'utm_source=wlg',
paramTwo: 'utm_medium=dochome',
addOn: '?a=true&utm_source=wlg&utm_medium=dochome',

Simply change those string values to whatever you're using. If you're working with a developer, they can refactor the code to their liking. This code is basically saying that if the URL contains the params of utm_source=wlg and utm_medium=dochome then add ?a=true&utm_source=wlg&utm_medium=dochome to the end of each link's href unless it has already been attached.

Robert Chan

Experimentation Hero
iagnosis 06-16-17
 

Re: href value not getting replaced on all items

Hi Robert, I'm not currently working with a developer on this. And I don't use the code view to update my variation. Is there something that we're doing incorrectly when we're using the visual editor to make our changes. Thanks for your help!
Level 2
robertchan 06-16-17
 

Re: href value not getting replaced on all items

Anytime, and there's likely nothing wrong with what you're doing in the WYSIWG. I suggested the code because it looks like whatever you've change in the WYSIWG is not completing the changes you expect.

Do you mind opening up the variation code in your experiment and sharing what code's been created there? That would likely be the easiest way for me or someone else here to diagnose what's causing the issues.
Robert Chan

Experimentation Hero
iagnosis 06-16-17
 

Re: href value not getting replaced on all items

Below is the code that I could just copy & paste (I think this is what you're looking for?). What's really interesting is that I'm seeing things in this code that doesn't exist in the variation any longer. For example, there's mention of the New Year code, but that was removed from the variation in February. 

 

$("#menu-item-451 > a").css({"display":"none", "visibility":""});
$(".patient-portal").attr({"href":"https://patient.dermatologistoncall.com/?a=true&utm_source=wlg&utm_medium=saclp1"});
$(".flex-active-slide .banner-title").html("Get Online Dermatology Care Right Away!");
$(".ir").css({"background-image":"url(//cdn.optimizely.com/img/5635391234/598e91c57dad44dc924e65bf20030730.png)"});
$(".ir").css({"position":"relative", "left":0, "top":0, "width":446, "height":68});
$(".ir").css({});
$(".ir").css({"width":516, "height":81});
$("#menu-item-22 > a").css({"display":"none", "visibility":""});
$(".patient-portal").attr({"href":"https://patient.dermatologistoncall.com/?a=true&utm_source=wlg&utm_medium=dochome"});
$(".mc > .big-button").attr({"href":"https://patient.dermatologistoncall.com/?a=true&utm_source=wlg&utm_medium=dochome"});
$(".main-row ul > li:eq(0) > a:eq(0)").attr({"href":"https://patient.dermatologistoncall.com/?a=true&utm_source=wlg&utm_medium=dochome"});
$(".main-row ul > li:eq(1) > a:eq(0)").attr({"href":"https://patient.dermatologistoncall.com/?a=true&utm_source=wlg&utm_medium=dochome"});
$(".main-row ul > li:eq(2) > a:eq(0)").attr({"href":"https://patient.dermatologistoncall.com/?a=true&utm_source=wlg&utm_medium=dochome"});
$(".flex-active-slide .mc").html("Only $54 with promo code: HAPPYNEWYEAR");
$(".flex-active-slide .subhead").html("Start off 2017 with healthier skin, hair, and nails. Visit with a board-certified U.S. dermatologist online - on your time!<br><br>Get $5 off your visit with the Walgreens-offered promo code entered on your payment page*:<br><strong>HAPPYNEWYEAR</strong>");
$(".icons-list p > a:eq(0)").css({"position":"relative", "left":7, "top":-20});
$(".icons-list").append("<div id=\"optimizely_270309816\">...</div>");
$("#optimizely_270309816").css({});
$("#optimizely_270309816").css({"position":"relative", "left":-1, "top":-35});
$("#main > .rich-text > div:eq(0) > p:eq(5) > a:eq(0)").attr({"href":"https://patient.dermatologistoncall.com/?a=true&utm_source=wlg&utm_medium=dochome"});
$("#main > .rich-text > div:eq(0) > p:eq(7) > span:eq(0)").html("Promo code expires on January 31, 2017 at 11:59 PM PDT. Promo codes cannot be combined with accepted insurance or other discounts. There is no limit to how many times the promo code can be used. Not available in all states. All major credit cards accepted or use Highmark insurance, your flexible spending account (FSA), health savings account (HSA), or health reimbursement account (HRA).");
$(".aligncenter").attr({"src":"//cdn.optimizely.com/img/5635391234/8e21ea5bef1244299b0845d0d97c95ea.png"});
$("#about .subhead").html("We have over 180 board-certified dermatologists in the U.S. who give online patients expert diagnoses and treatment plans.");
$("h2 > a").css({"display":"none", "visibility":""});
$("article > p").css({"display":"none", "visibility":""});
$(".content .more").css({"display":"none", "visibility":""});
$("#blog > .main-row").css({"display":"none", "visibility":""});
$(".banner-form").css({"display":"none", "visibility":""});
$("#blog > .banner > div:eq(0) > div:eq(0) > h2:eq(0)").html("<b>**Walgreens disclaims all liability from these telemedicine services, which are provided solely by Iagnosis, Inc. through its network of DermatologistOnCall® board-certified dermatologists in accordance with Iagnosis policies and terms. Iagnosis and its healthcare providers are not agents, employees or affiliate of Walgreens. For non-emergency conditions. Not available in all areas.</b>");
$("h2 > b").css({"font-size":"14px", "font-weight":"normal"});
$("#menu-item-43 > a").css({"display":"none", "visibility":""});
$("#menu-item-45 > a").css({"display":"none", "visibility":""});
$(".flex-active-slide .subhead").css({"position":"relative", "left":0, "top":"17px"});
$(".flex-active-slide .mc").html("Only $50 with promo code: HAPPYNEWYEAR");
$(".flex-active-slide .subhead").html("Start 2017 with healthier skin, hair, and nails. Visit with a board-certified U.S. dermatologist online - on your time!<br><br>Save $9 with the Walgreens-offered** promo code entered on your payment page*: &nbsp;<strong>HAPPYNEWYEAR</strong>");
$(".ir").attr({"href":"https://www.dermatologistoncall.com/?pagename=home&p=walgreens"});
$("#menu-item-18 > a").attr({"href":"https://www.dermatologistoncall.com/our-dermatologists?p=walgreens"});
$("#menu-item-19 > a").attr({"href":"https://www.dermatologistoncall.com/patient-successes?p=walgreens"});
$("#menu-item-20 > a").attr({"href":"https://www.dermatologistoncall.com/faqs?p=walgreens"});
$("#optimizely_270309816").html("*Enter the promo code <strong>HAPPYNEWYEAR</strong> on the payment page. Cannot be combined with other discounts or accepted insurance. <br>Expires on January 31, 2017. Not available in all states.");
$(".fs-xxlarge").html("*Only $50 with promo code: HAPPYNEWYEAR");
$(".aligncenter").attr({"src":"//cdn.optimizely.com/img/5635391234/ce648ff693034a509a32065e7409a47b.png"});
$("#about .mc > p:eq(2) > a:eq(0)").attr({"href":"https://www.dermatologistoncall.com/our-dermatologists?p=walgreens"});
$("#go-mobile > .main-row > div:eq(0) > p:eq(3) > a:eq(0)").attr({"href":"https://www.dermatologistoncall.com/faqs?p=walgreens"});
$(".banner .more").css({"display":"none", "visibility":""});
$("#menu-item-38 > a").attr({"href":"https://www.dermatologistoncall.com/our-dermatologists?p=walgreens"});
$("#menu-item-36 > a").attr({"href":"https://www.dermatologistoncall.com/conditions-we-treat?p=walgreens"});
$("#menu-item-37 > a").attr({"href":"https://www.dermatologistoncall.com/patient-successes?p=walgreens"});
$("#menu-item-39 > a").attr({"href":"https://www.dermatologistoncall.com/faqs?p=walgreens"});
$("#menu-item-540 > a").attr({"href":"https://www.dermatologistoncall.com/contact?p=walgreens"});
$("#main > .rich-text > div:eq(0) > p:eq(6)").prepend("<img id=\"optimizely_837645440\" src=\"\"https://cdn.optimizely.com/img/5635391234/598e91c57dad44dc924e65bf20030730.png\"\" />");
$("#main > .rich-text > div:eq(0) > p:eq(6)").prepend("<img id=\"optimizely_127719615\" src=\"https://cdn.optimizely.com/img/5635391234/598e91c57dad44dc924e65bf20030730.png\" />");
$("#optimizely_127719615").css({"position":"relative", "left":282, "top":2, "width":452, "height":119});
$("#optimizely_127719615").css({"left":288, "top":2});
$("#main > .rich-text > div:eq(0) > h1:eq(0) > span:eq(0) > a:eq(0)").css({"font-size":"20.4px"});
$("#main > .rich-text > div:eq(0) > h1:eq(0) > span:eq(0) > a:eq(0)").css({"display":"none", "visibility":""});
$("#main > .rich-text > div:eq(0) > h1:eq(0) > span:eq(0)").css({"display":"none", "visibility":""});
$("#optimizely_127719615").css({"width":452, "height":123});
$("#main > .rich-text > div:eq(0) > p:eq(7) > span:eq(0)").html("Regular price is $59. Promo code expires on January 31, 2017 at 11:59 PM PDT. Promo codes cannot be combined with accepted insurance or other discounts. There is no limit to how many times the promo code can be used. Not available in all states. All major credit cards accepted or use Highmark insurance, your flexible spending account (FSA), health savings account (HSA), or health reimbursement account (HRA).");
$("#blog > .banner > div:eq(0) > div:eq(0) > h2:eq(0)").html("<b style=\"font-size: 14px; font-weight: normal;\">**Walgreens disclaims all liability from these telemedicine services, which are provided solely by Iagnosis, Inc. through its network of DermatologistOnCall® board-certified dermatologists in accordance with Iagnosis policies and terms. Iagnosis and its healthcare providers are not agents, employees or affiliate of Walgreens. For non-emergency conditions. Not available in all areas.</b>");
$(".lower > .info").html(" <a href=\"http://www.iagnosis.com\" target=\"_blank\"><img src=\"https://www.dermatologistoncall.com/wp-content/themes/dermatologistoncall2016/img/iagnosis.png\" alt=\"Powered by Iagnosis, your link to healthy skin\" class=\"corp-logo\"></a> © 2016 Iagnosis, Inc. DermatologistOnCall® is a registered trademark of Iagnosis.<br>\n\t\t\t\t<b><a href=\"/privacy-policy\">Privacy Policy</a> | <a href=\"/terms-of-use\">Terms of Use</a> | <a href=\"http://www.iagnosis.com\" target=\"_blank\">Visit Our Corporate Site.</a></b><br>\n\t\t\t\t<a href=\"http://bluetomatodesign.com\" target=\"_blank\">site design and development by blue tomato®<br><br><span style=\"font-size: 14px; font-weight: normal;\">Walgreens disclaims all liability from these telemedicine services, which are provided solely by Iagnosis, Inc. through its network of DermatologistOnCall® board-certified dermatologists in accordance with Iagnosis policies and terms. Iagnosis and its healthcare providers are not agents, employees or affiliate of Walgreens. For non-emergency conditions. Not available in all areas.</span>&nbsp;</a> ");
$(".info span").css({"font-size":"12px"});
$(".info span").html("**Walgreens disclaims all liability from these telemedicine services, which are provided solely by Iagnosis, Inc. through its network of DermatologistOnCall® board-certified dermatologists in accordance with Iagnosis policies and terms. Iagnosis and its healthcare providers are not agents, employees or affiliate of Walgreens. For non-emergency conditions. Not available in all areas.");
$("#blog .bkgd").removeAttr("src").removeAttr("srcdoc");
$("#blog .bkgd").css({"display":"none", "visibility":""});
$("h2 > b").css({"display":"none", "visibility":""});
$("#blog > .banner > div:eq(0) > div:eq(0) > h2:eq(0)").css({"display":"none", "visibility":""});
$("#blog > .banner > div:eq(0)").css({"display":"none", "visibility":""});
$("#blog").css({"display":"none", "visibility":""});
$(".ir").css({"background-image":"url(\"https://cdn.optimizely.com/img/5635391234/598e91c57dad44dc924e65bf20030730.png\")"});
$(".icons-list p > a:eq(0)").attr({"href":"https://patient.dermatologistoncall.com/?a=true&utm_source=wlg&utm_medium=dochome"});
$(".aligncenter").wrap("<a href=\"https://patient.dermatologistoncall.com/?a=true&amp;utm_source=wlg&amp;utm_medium=dochome\" target=\"_blank\"></a>");
$("#go-mobile .big-button").attr({"href":"https://patient.dermatologistoncall.com/?a=true&utm_source=wlg&utm_medium=dochome"});
$("#about .mc > p:eq(1) > span:eq(1) > a:eq(0)").attr({"href":"https://patient.dermatologistoncall.com/?a=true&utm_source=wlg&utm_medium=dochome"});
$("#menu-item-44 > a").attr({"href":"https://patient.dermatologistoncall.com/?a=true&utm_source=wlg&utm_medium=dochome", "target":"_blank"});
$(".info span").html("**Walgreens disclaims all liability from these telemedicine services, which are provided solely by Iagnosis, Inc. through its network of DermatologistOnCall® board-certified dermatologists in accordance with Iagnosis policies and terms. Iagnosis and its healthcare providers are not agents, employees or affiliate of Walgreens. For non-emergency conditions. Not available in all areas.");
$(".info span").css({"color":"#3a3b3b"});
$("#go-mobile h2").html("We're the largest network of online U.S. board-certified dermatologists.");
$("#go-mobile .subhead").css({"display":"none", "visibility":""});
$(".buttons > a:eq(0) > img:eq(0)").removeAttr("src").removeAttr("srcdoc");
$(".buttons > a:eq(0) > img:eq(0)").css({"display":"none", "visibility":""});
$(".buttons > a:eq(1) > img:eq(0)").removeAttr("src").removeAttr("srcdoc");
$(".buttons > a:eq(1) > img:eq(0)").css({"display":"none", "visibility":""});
$("#go-mobile h2").html("The largest network of online U.S. board-certified dermatologists is ready to help you!");
$(".aligncenter").removeAttr("src").removeAttr("srcdoc");
$(".aligncenter").css({"display":"none", "visibility":""});
$("#optimizely_127719615").removeAttr("src").removeAttr("srcdoc");
$("#optimizely_127719615").css({"display":"none", "visibility":""});
$("#optimizely_270309816").css({"display":"none", "visibility":""});
$("#main > .rich-text > div:eq(0)").html("\n<p><span class=\"fs-large fs-xlarge\">Access us 24×7.</span> <span style=\"color: #808080;\">Tap into our large network of 180+ online U.S. dermatologists.</span></p>\n<p><span class=\"fs-xlarge\">Don’t stress.</span> <span style=\"color: #808080;\">Get bothersome conditions for you or a family member diagnosed fast, typically in 24 hours.</span></p>\n<p><span class=\"fs-xlarge\">Get the <em>right</em> treatment.</span>&nbsp;<span style=\"color: #808080;\">Quickly locate&nbsp;a dermatologist for any of 3,000 skin, hair, and nail medical conditions.</span></p>\n<p><span class=\"fs-xlarge\">Reclaim your time (and life).</span> <span style=\"color: #808080;\">Patients save an average of 111 minutes by eliminating travel and waiting room time. And no more need to wait for care!</span></p>\n<p><span class=\"fs-xlarge\">Enjoy the personal touch.</span> <span style=\"color: #808080;\">Tell us your preferences, get a custom treatment plan and prescriptions (if needed), and even ask the dermatologist follow-up questions!</span></p>\n<p style=\"text-align: center;\"><a class=\"big-button\" href=\"https://patient.dermatologistoncall.com/?a=true&amp;utm_source=wlg&amp;utm_medium=dochome\" target=\"_blank\">START YOUR VISIT NOW</a></p>\n<h1 style=\"text-align: center;\"><span style=\"color: #808080; display: none;\">(<a href=\"https://patient.dermatologistoncall.com/default/index.html#/account-creation\" style=\"font-size: 20.4px; display: none;\">Or create a free account</a>)</span></h1>\n<h1>*Save $9 when you save 1+ hours of visit time!</h1>\n<p><span style=\"color: #808080;\">Enter the promo code SPRING when you pay for your online visit and save $9. Valid through the month of March 2017. <br>All major credit cards accepted or use Highmark insurance, your flexible spending account (FSA), health savings account (HSA), or health reimbursement account (HRA). Have a promo code? You’ll enter it on the visit payment page.</span></p>\n<p><a href=\"https://patient.dermatologistoncall.com/?a=true&amp;utm_source=wlg&amp;utm_medium=dochome\" target=\"_blank\"><img class=\"aligncenter size-full wp-image-812\" alt=\"Dermatology Savings\" width=\"270\" height=\"276\" scale=\"0\" style=\"display: none;\"></a></p>\n<p style=\"text-align: center;\"><span class=\"fs-large\">Did you know?</span>… <span style=\"color: #808080;\">98% of DermatologistOnCall patients say they’d&nbsp;recommend us!</span></p>\n");
$(".flex-active-slide .mc").replaceWith("<div class=\"mc\">Online visits for $59</div>");
$(".flex-active-slide .subhead").replaceWith("<p class=\"subhead\" style=\"position: relative; left: 0px; top: 17px;\">\nVisit with a U.S. board-certified dermatologist online - on your time\n</p>");
$("#main > .rich-text > div:eq(0) > p:eq(6) > span:eq(0)").replaceWith("<span style=\"color: #808080;\">All major credit cards accepted or use accepted insurance plans, your flexible spending account (FSA), health savings account (HSA), or health reimbursement account (HRA). Have a promo code? You’ll enter it on the visit payment page.</span>");
$("#main > .rich-text > div:eq(0) > h1:eq(1)").replaceWith("<h1>*Only $59 or less as you save 1+ hours of visit time!</h1>");
$(".mc > .big-button").replaceWith("<a class=\"big-button\" href=\"https://patient.dermatologistoncall.com/?a=true&amp;utm_source=wlg&amp;utm_medium=dochome\" target=\"_blank\">START YOUR VISIT NOW!</a>");

Level 2
iagnosis 06-16-17
 

Re: href value not getting replaced on all items

I attached a Word doc with the code that I could copy & paste (I think this is what you're looking for?). What's really interesting is that I'm seeing things in this code that doesn't exist in the variation any longer. For example, there's mention of the New Year code, but that was removed from the variation in February. 

Level 2
robertchan 06-16-17
 

Re: href value not getting replaced on all items

Having a quick look at your code, I would strongly recommend refactoring and cleaning the code. The New Year code you mention is a good example of why. The New Year code references #optimizely_270309816 which if you look at line 89 of the code gets set to a display of none, but doesn't actually remove the item as you might have anticipated.

The reason you might also be experiencing the issue you previously mentioned is a result of the way the WYSIWG targets elements you select. For example, for one of the links, the WYSIWG targets .main-row ul > li:eq(0) > a:eq(0). It then proceeds to write another two lines of code to make the same changes that could have been made in one line on a better chosen selector. Therefore, with some of the changes you make, solely relying on the WYSIWG might not be the best approach which has the potential to lead to unstable changes.

For now, under the last line of the code you shared with me, test out pasting the code I wrote and shared earlier (you don't need to make any changes to it). See if that reflects the changes you're expecting. If not, I would say that you're running into issues with either the element you're targeting using the WYSIWG and/or are experiencing a timing issue with the element(s) not being available when you're attempting to make changes. You can reference this article to learn more: https://help.optimizely.com/Troubleshoot_Problems/Fix_a_timing_issue
Robert Chan

Experimentation Hero