Category: Web Development

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
example-form

Let’s say I have the Formstack Form below and really want to capture the data of “Amount of Expense” and the User ID that is auto assigned to each submission, in Google Analytics. How would you go about that?

formstack

Set Up On Formstack

  • Within Formstack, navigate to the form > Settings > Emails & Redirects > Confirmation Emails > “Click to Add One” > Content: Custom Message. (You won’t be composing a message, just getting a few variables out of Formstack.)
  • Within the body, select the Unique ID & whatever field have the monetary (value) amount you’d like to capture. Remember that you cannot put personally identifiable data in Google Analytics, so don’t try to capture email, last name, etc. in Google Analytics.
  • Take note of the user ID tag and the tag associated with the expense amount.
  • Press cancel without saving, once you’ve copied that information.

formstack-email-ids

  • Once that screen is closed, navigate to “After the Form is Submitted” within the same page.
  • Select “Redirect to an External URL”, and insert your thank you page URL.
  • Immediately after, add a question mark (?) for a query. Within that query add the user ID tag.
  • Following that tag, add a hash symbol (#) followed by the tag for the expense, as you see below: www.example.com/thankyou.php?{$_submission_id}#{$37021767}.
  • This results in your thank you page having the data passed in the URL so that Google Analytics can parse it.submit-action-form

Set Up Google Analytics

  • Ensure that you have Google Analytics installed on the page the form is embedded and the form’s thank you page.
  • Next, add this script to your thank you page. It will pull the parsed information into Google Analytics as an event submission.

Results

Now the data will go into Google Analytics on each submission.

You’ll also be able to compare the Event Label within Formstack, under Submissions to match it up to the Personal Identification Information:
formstack-submissions

More Information

This tactic can also be use by taking advantage of Google’s Custom Dimensions and Metrics with Google Tag Manager.

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

Jan 23
no-data-recieved-error

I use GoDaddy as my hosting and obviously have a WordPress install. A few months ago, I started running into this error on Google Chrome: “No data received [ERR_EMPTY_RESPONSE] Unable to load the webpage because the server sent no data.” I got a similar message in Firefox: “The connection to the server was reset while the page was loading.” This happened whenever I tried to make a new post and really put a damper on my blog activities on my various blogs.

I searched numerous forums, checked out my GoDaddy CPanel, looked at my FTP files, uninstalled & deactivated plugins, and made sure WordPress & plugins were all up to date. Still nothing worked! I did discover that the error could be triggered when editing files, as well though.

Becoming frustrated, I checked line-by-line of a draft to see what triggered the error, and I discovered it. The error occurred anytime a post had links with “http:” & “https:”.

(Temporary) Solution

Obviously removing the protocol declaration from links (and images) in a blog post could be problematic if I needed to link externally but thankfully, you don’t need to declare a protocol to make links. You can instead point to a website like this: //www.google.com instead of http:||google.com (slashes would be here instead of pipes obviously).

With any post I now make, I just make sure my links use protocol-relative URLs instead of declaring the protocol and I no longer receive errors. Unfortunately, I have yet to discover the root cause of the problem, but for the time being, it allows me to blog again while I figure it out.

Sep 5
enhance-google-analytics
(Originally posted on the Betamore blog)

#1 Enable Demographics + Interest Reports

Why?

Adding one little line to your tracking code will allow for rich data about your site visitor’s age, gender & interests. Once you have that data you can create segments to see how your female visitors behaviors differ from your male visitors or what movie lovers are looking for on your site.

How?

  1. Go to Admin > Property Settings
  2. Enable Demographics and Interest Reports
  3. Go to Tracking Info > Data Collection
  4. Enable Advertising Reporting Features
  5. Update your tracking code:

GA_blog1

Example Result:

GA_blog2

 

#2 Set Up Google Webmaster Tools

Why?

When you want to see what keywords are driving to your site and all you see is (not provided), Google Webmaster Tools can solve that. What Webmaster Tools does is aggregate your search queries to eliminate “(not provided)” and allow you to reclaim your keyword data.

How?

  1. Go to Admin > Property Settings
  2. Select Adjust Webmaster Tools
  3. Under Webmaster Tools Site, select Edit
  4. Add Your Website Property
  5. Verify Your Website Property

GA_blog3

Example Result:

GA_blog4

 

#3 Bot Filtering

Why?

Having spam traffic in your analytics throws off all your data. There’s advanced settings that will allow for more bot filtering, but this simple step will help you begin to eliminate some of that.

How?

  1. Go to Admin > Property Settings
  2. Enable Bot Filtering

GA_blog5

#4 Set Up Filters

Why?

This can be as simple or as complex as you’d like to make it, but filtering allows you to get only the real data you want. You can exclude IP addresses, remove spam, change all your URLs to lowercase, and much more. Get started with “Three Google Analytics Filters You Should Be Using Today

How?

  1. Admin > Filters

GA_blog6

Example Results:

GA_blog7

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)

Apr 10
error-404-not-found1[1]

So, I was working with Contact Form 7 with a client and for the life of me couldn’t get any forms to send to the client’s email which I had setup with Google Apps. The site is hosted on GoDaddy. So after some extensive Googling, it appears that I discovered a possible solution.

Download & Activate WP Mail STMP & configure the settings:

This allowed me to send a test email to my personal gmail account and to the client’s email account associated with the website with no problem but I was still unable to get the contact form to work.

To get Contact Form 7 to work, I had to make one more change:

Instead of using the primary email, I used to temp email Google assigns when an account is created, which you can keep for as long as you want. You can find it in your Google Account. Pretty sure this all have something to do with MX Records, ports and a whole lot of other complicated things that aren’t worth getting into but regardless, it worked…

Stay Updated