Tag: javascript

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

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