Update Built-In Javascript Libraries


#1

The version of jQuery and Fancybox built-in to Unbounce are both 5 years old. That’s an eternity in the digital world.

In 2010, when Fancybox updated to 2.0, they switched to a licensing model. Unfortunately, unless you pay for the license, you aren’t able use Fancybox 2 which maintains compatibility with the latest version of jQuery.

Lately, I’ve been needing to manually add newer versions of jQuery to maintain compatibility with other libraries. I’ve even switched away from Fancybox to a newer lightbox called Magnific Popup.

Here are some options to update these outdated libraries:

  • Update to Fancybox 2 (pay for the license) or a different lightbox and the latest version of jQuery
  • Integrate with a robust library repository like cdnjs or jsDelivr
  • Remove the feature altogether

Jquery Library - too old?
#2

Hi Phil,

Couldn’t agree more. Great for some.basic stuff but really a bit behind the curve now. I think the more important libraries are jquery, lightboxes are great but so there are many choices as long as your core libraries are updates.

+1 this, great post.


#3

Hey Phillip,

This is a bit above my pay grade, but am curious to learn more!  Could you elaborate on what the negative side effects of this are and how if it was updated we would be able to build better landing pages?  Always great to see the perspective of the technical side.

Thank you,

Joe


#4

Hi Phillip,

I’d also like to hear more about the different use cases that our current solution does not support, the discussion so far has been really helpful. Within Unbounce, we have been discussing upgrading jQuery and we’ll want to be sure that any solution we implement meets your needs. 

(Spoilers)

As for Fancybox, we’re currently working on a new lightbox feature that will allow you to add lightboxes through the application. We’re still in the building process but some of the key features include;

  • linking to external URLs  (of course)
  • being able to create content using the Unbounce builder and have it open in a lightbox
  • …and the ability to open forms in a lightbox, and track the conversions correctly 
    If you have any suggestions for other improvements, we’re all ears here.

Thanks!


#5

I could go into all kinds of what if scenarios for why jQuery should be updated, but for me it came down to wanting a Youtube overlay that automatically closed when the video finished.

Fancybox wouldn’t allow me to use the YouTube API to detect when the video ended. So I started searching for a replacement and discovered Magnific Popup.

You can read about the development of Magnific Popup and what makes it different from all the other lightboxes.

Since Magnific Popup only works with jQuery 1.7.2+ I was forced to manually include jQuery a newer version of jQuery as well.

I prefer using CDNs like Google Hosted Libraries and CDNjsbecause of the high likelihood the library will already be stored in the visitors cache before coming to my site. So it wasn’t a big deal to disable the built-in option and use external JavaScript for these.

Below is the finished product (I didn’t link to Unbounce because I don’t want all of you ruining my A/B test :p )
http://codepen.io/philbar/full/pJqbzd/


#6

As a longtime user, one of the biggest downfalls is that Unbounce users are barred from making use of all of the javascript goodness that’s out there. Or, to be more specific, some of the newer stuff *may* be supported by the older Javascript libraries, but it’s far from a guarantee of it working, more like a guarantee that it’s going to be a needlessly long slog to make it work.


#7

Hi guys,
Total novice here and not a developer but searching for how to update the jQuery version I ended up here. It seems that updating the jQuery version is going to be more complex than I expected and I have to have 1.5.1 version to be able to integrate with an address pre-population service. 
Could anybody point me in the right direction to perform this upgrade?
Thank you so much in advance!
Havi


#8

Hi Havi,

At the bottom of the screen when your in the landing page editor slightly on the left are two options, javascript and stylesheets. Click the Javascript option and it will pull up a new window. On the left there is a tick box with Jquery 1.4.2 written next to it, just untick the box. You then need to include your version of Jquery by adding a reference to it. So click on the add new script button and paste the following in it and set it to run in head section…

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

You’ll now be running version 1.11.3 alongside 1.4.2 with the earlier version in safe compatible mode.

Hope that helps a bit.

Stuart


#9

Thank you, Stuart!! I did exactly as you said but maybe now there’s another problem and cannot have the address validation service work with unbounce.
I do see both jquery versions on the page now. 
Back to the drawing board!
Thank you!!!
Havi


#10

Hi Havi,

That seems a shame, what address validation service are you using? I’ve done some tests with a couple providers and been able to get email validation working from a company called Data 8, most of their services use the same kind of coding/structure and they offer an address lookup/validation service that I believe should be easy enough to integrate. I’d recommend checking them out if it’s something you still want to pursue.

Cheers

Stuart.


#11

jQuery 3.0 is about to be released.

https://blog.jquery.com/2016/05/20/jquery-3-0-release-candidate-released/


#12

I was required to load jQuery 1.7.2+, in addition to the built-in 1.4.2, to use a library for some functionality I wanted on my landing page.

I was using jQuery 1.9.1 because that is what the library’s documentation used. But after some research, I decided to use the latest release of jQuery 1 (1.12.4). The benefit of doing this, is most browsers already have a cached version of this from Google Libraries API. The other versions, 1.4.2 / 1.9.1 are not as likely as being cached because websites don’t consistently use older versions. But there is a huge volume of websites that load the newest version (which is still over 1 year old).

I ran an A/B test and measured a 8% lift in conversion by using jQuery 1.12.4 vs 1.9.1, since it was cached for more users.

Why doesn’t Unbounce make 1.12.4 the default version used in Unbounce?


Page Speed Initiative
#13

@Phillip Hi Philip. This issue with jquery is just shocking to me. I just built a test through jquery with this hotspot graphic: http://unbouncepages.com/test-page-12344746816/ and encountered a similar jquery library issue.

According to suggestions I have disabled the old version and used the new library, but why the F do I have to do this???

Does disabling the old library break anything? (I don’t know as I am still trialing the platform although I have put my credit card in)

I am in the middle of switching from Instapage to Unbounce and if both platforms have issues with the backend editor like this I will get myself off both platforms and stick with WP.

Have you received any response from Unbounce dev on this?


#14

@Andy_Zhu, Disabling the old verision (1.4.2) puts it into no conflict mode, because Unbounce uses jQuery for a number of features (like forms). This means jQuery 1.4.2 will always be loaded on Unbounce pages.

Normally, the jQuery method is (). But Unbounce has renamed it to lp.jQuery(). When you check the box to enable jQuery 1.4.2, it allows jQuery to be called from () in addition to lp.jQuery(). When you uncheck the box, nothing is mapped to $(), so you can load your own library.

But again, jQuery 1.4.2 is ALWAYS loaded on your page.


#15

Hi Philip thank you if possible I’d like to talk to you. I have sent you a LinkedIn invite.