Tag: jquery

Aug 21
img_57b9a763c0c31

So, I always hate it when I receive an email from a company to sign up for an event or download a white paper, but when I click to get to the offer, they couldn’t be bothered to pre-populate the form with information about me they clearly already had (Name, Email, etc.). This is a bit challenging without a CRM, but if you have a good mail client, it can be done easily.

Create a Form:

See example-form.html below.
contact-form

Create The Form URL

Go to your email provider, and identify the merge fields you need. I use MailChimp which you can identify the merge fields for your list by crafting a campaign and in a text box clicking “Merge Tags”:

Once you’ve identified the merge fields, you can create the URL which will be structured very similarly to a UTM tagged URL:
mailchimp-url

After you regular URL like example.com/webinar add a question mark (?), then an identifier, I use “first” for first name. Set the merge tag to equal it, so first=*|FNAME|* if you’re using Mailchimp. That is one field set. To add additional, add an ampersands (&) and another identifier set equal to a form field. Continue until you have all the fields you need.

Add the jQuery Script to All Pages with Form

See example autofill-forms.js below.

This small script will read your URL and identify the information following the question mark and match up your identifier to the field. This should be added to every page the form is present on.

Identify the fields you want to auto-fill and fill them in, i.e. #firstname below corresponds to my input field with the ID of firstname. The name indicated on the right, i.e. “first” is the identifier we used in MailChimp before each equal sign. You can add additional fields as they become necessary.

Test Your URL

Once that has been put in place, test the URL to ensure the fields populate well. If you have the merge tags in place, it should fill with that tag since that is parsed through Mailchimp:

register-merge-field

Once you verify that that URL works, test your merge fields by entering preview mode in MailChimp and choosing “Enable live merge tag info”:

mailchimp-preview
(See the URL at the bottom left for the button I’m hovering over). Click through a few of your subscribers to make sure the merge fields look correct.

Codes

P.S. – Using Google Forms? Check out this easy tutorial

Jan 24
time

At work one day, I had a client request a website change at 6PM and I wouldn’t be near a computer to make the simple text change. Since we don’t have a content management system, it was up to me to devise a solution.

So to trigger the change, I used a little bit of jQuery. This basic script just says, if the month is 11 (December) and the date is less than or equal to the 22nd, then any element with the class “remove” will show and any element with the class “show” will be hidden. When the date becomes December 13, then any element with the class”remove” will be hidden and any element with the class “show” will be visible.

With this quick script I can specify the minute, hour, day, month and/or year that I’d like certain elements to show by assigning them a CSS class of remove or show. The time is based on your server’s time.

More Info

• More about JavaScript Operators
• More about JavaScript Date Referencing
Stack Overflow Question That Inspired The Post

Jun 17
slider

We just did a new website redesign with a combination of accordions and carousels. These two design components are flashy but I’m not always certain if they’re necessary (or if anyone actually cares) so I wanted to be able to track the clicks on both the carousel & the accordions.

It took some searching and I was able to figure out how to use jQuery and Google Analytics event tracking to do this thanks to a blog from Outlier.com.

Tracking Accordion Clicks as Google Analytics Events

So my accordion is designed with h4 as the accordionheader, as follows:

<div class="accordionheader">
<h4><a id="name" href="#name">Header Test</h4>
</div>

In order to track the click, I used:

<script>
$('h4').click(function() {

var linkText = $(this).text();
ga('send', 'event', 'accordion', 'click', linkText);
});
</script>

What this does it triggers Google Analytics to send an event when the h4 is clicked. The event is labeled as category = accordion, action = click and linkText refers to the text of the h4. If you wanted to make sure you tracked only opens, you could get fancy and mess around with accordion jQuery but I like to keep things simple.

Tracking Carousel Clicks as Google Analytics Events

So this seemed like it should have been easier because essentially, you’re just tracking clicks, but because a link could exist in the carousel and the page, I wanted to make sure I knew where that click was attributed to. I also wanted to track every time the carousel slide in order to accurately calculate ratios of impressions vs. clicks.

I used cbp-fwslider for my carousel. First my slide is encompassed within a unordered list with each slide as a list item, so each slide looks like this:

<li id="slide1">

<a href="link.html" target="_blank"><img alt="img01" src="images/6.png"></a>

<div class="carousel-caption-right wordwrap">
<h3>Heading</h3>
<small>Dummy text.</small>

<p><a class="web-seemore" href="link.html" target="_blank">Link Text</a></p>
</div>

<p id="captionone"><a href="Link" target="_blank">Link Text</a></p>

</li>

So then in order to track, I used the below code:

<script>

$('#cbp-fwslider').on('click', function() {
ga('send', 'event', 'slider', 'slide', {'nonInteraction': 1});
});
$('#slide1').on('click', function() {
var slideID = document.getElementById('slide1');
var slideLink = slideID.getElementsByTagName('a')[0];
var slideURL = slideLink.href;
ga('send', 'event', 'slider', 'slide1', slideURL);
});
$('#slide2').on('click', function() {
var slideID = document.getElementById('slide2');
var slideLink = slideID.getElementsByTagName('a')[0];
var slideURL = slideLink.href;
ga('send', 'event', 'slider', 'slide2', slideURL);
});
$('#slide3').on('click', function() {
var slideID = document.getElementById('slide3');
var slideLink = slideID.getElementsByTagName('a')[0];
var slideURL = slideLink.href;
ga('send', 'event', 'slider', 'slide3', slideURL);
});

</script>

What’s important to note is that the slide simulates a click on #cbp-fwslider so an event is sent on the simulated slide click. the note on NonInteraction set to 1 is to denote that this event should not affect bounce rate.

Following that, each slide’s ID is handled by their list-item ID and upon click of that list item three variables are set:

  • var SlideID = looks for slide1 on the page
  • var slideLink = looks for anchor (a) in the above mentioned slide1
  • var slideURL = identifies the URL within the above-mentioned anchor in slide1

Once these are defined, Google Analytics sends an event category = slider, action = click, label = the URL of the link as defined by the SlideURL variable.

This should be repeated based on how many carousel images you have. Just make sure you update the areas in yellow.

(Photo Source)

May 24
13-06_accordionmenu[1]

Working with jQuery Accordions I ran into two issues that seemed to be simple but turned out to be a hassle since answers were all over the place from using Python to C++ to it can’t be done. So, after a lot of testing, I found a solution that worked for me for two jQuery accordion issues:

Automatically Have Accordion Open on a Page

I was designing a faculty page for work and really wanted it to open up to the first faculty member when someone arrived on the page. To accomplish this I took the standard jQuery for the accordion and added one additional line:
<script>
$( "#accordion" ).accordion({
heightStyle: "content",
active:false,
collapsible: true,
header:"div.accordionheader"
});
$("#accordion").accordion("option", "active", 0);
</script>

What this does is select the first accordion div to be opened on page load. Obviously, changing the 0 to a different number will edit what opens.

Assign IDs to automatically open an Accordion from an Outside Link

This was a bit more complicated to figure out but essentially what I wanted to do for work was to list out courses and upon clicking the link it navigated to an accordion style page that opened the correct corresponding accordion:

<script>
$( "#accordion" ).accordion({
heightStyle: "content",
active: false,
collapsible: true,
header:"div.accordionheader"
});
var hash = window.location.hash;
var anchor = $('a[href$="'+hash+'"]');
if (anchor.length > 0){
anchor.click();
}
</script>

Then also added to the accordion headers:

<div class="accordionheader">
<h4><a id="name" href="#name">Header Test</h4>
</div>

I found this trick via OpenStack and it got little recognition so I wanted to assert that it works.

(Image via sixrevisions.com)

Stay Updated