Flair for an Intermediate Analytics Page

Reading Time: 5 minutes

How do you measure website interactions when you don’t control the website? I had this challenge recently. It’s a pretty easy technical challenge but I wanted to add a bit of flare. It was an opportunity to either learn a new product, like Canva, or see what I could do with a tool I already knew, like PowerPoint. I decided to go with my default first and see what PowerPoint could do.

The project was a simple one. Our law library is trying out a merch store. The merch store is managed by a third-party printing and shipping company, so we don’t have analytics on that site. At the same time, we have a 501(c)(3) foundation that does fundraising for our law library, which is otherwise supported by court filing fees. The foundation has a donation website that, like our print-on-demand shop, we cannot get analytics for. We don’t know when or if people are using the sites unless a donation or a purchase is made.

Normally, we would just have an outbound link to those sites. A person clicks and they leave our website and they go to the remote site. If the link is on our website, we can track the outbound click and we can even customize the link to record that the link came from our website. This wil distinguish it from links coming from other sources.

But what if you have someone visiting your site from a link you don’t control? It might be a partner website or it might be a marketing QR code. While it makes sense to get the person to click on the link and go directly to the source, there is a loss of control both of the URL and the visit.

As I mentioned recently, the third-party domain may be lost and taken over by a huckster. At that point, you would have to contact everyone who linked to that site and ask them to update the link. A better option is for you to mediate that interaction, so that their link is going to your website and you are forwarding them to the right place.

Using Meta Refresh

The first thing I needed to create was the intermediate page. This would be the link that we give out to people who want to link to our resource. We can also embed it in QR codes. Since the intermediate page lives on our website, we can control how it works.

The intermediate page acts as a redirect. The person clicks on the URL and it goes to our website. Our page loads and, using the meta tag for referral, we forward them to the correct endpoint. The page can include just this information:

<meta http-equiv="refresh" content="0; url=https://example.com/">

If the content is set equal to zero, then the intermediate page will immediately try to load the url= portion. Assuming your website server is fast, the visitor may not realize that a blank white page on your website has loaded for just a moment before the actual page you are seeking loads.

That always feels a bit scammy to me. I think it’s fairer to let people know what is going on. Government sites are a good example of this. You may be looking at something and then click on an external link. Instead of loading the external link, you get a warning page that you are about to leave [government] website domain for a resource they can’t vouch for, etc.

There are also some browsers that will warn you that you are being forwarded to a new page. So you want to have an explanation, I think, for those people who may be wondering why.

There’s a middle ground, though. You can automate that forwarding process and present the explanation on the page. The outcome I wanted was to have people get to the page on our site and then see a message that they were being forwarded, either to our online shop or our foundation’s online page. To give it that bit of flair, I wanted to create a simple animated gif that looked like a loading image. Something like this:

The text is easy to code. For the animated gif, I wanted to see if I could create it with PowerPoint. It turned out to be exceptionally easy.

Animate a Logo with PowerPoint

I started with our full color logo. You could do any image, of course. I pasted it into a PowerPoint slide. Then I selected it and made a copy. Now I needed to make a gray-scale version.

Now that I have my before image (the gray-scale) and the after (full color), I can animate them in PowerPoint. I centered both graphics, with the gray-scale beneath the color image. Then I animated the full color image using the wheel animation.

That’s it. Now you just need to save it as an animated GIF (argue amongst yourselves over pronunciation). Animated GIF is a standard save format in PowerPoint. This is what this file looks like.

Notice a couple of things. First, there’s a lot of white space. You can either reduce the size of your PowerPoint slides (make a square!) or you can use more of the space. In this instance, I liked that it made more white space around the image. It will save some formatting on the web page I’m making. You can also speed up or slow down the animation in PowerPoint before you save it.

You can do a lot more complex images than this one. This logo is just a permanent loop of a single animation. I recently had reason to create a more complex one for my brother’s case. In that case, I wanted it to last for 5 seconds (which is a good online attention span for social media) and to use a variety of layers. In this case, I also used the whole PowerPoint slide space.

This is what that image looks like as an animated GIF.

In order to get the timings right, I ended up recording them so that, when the animation exported, it made the transitions when I wanted them, spread out over 5 seconds. This is a single slide with 4 layers of animation. On the simple logo, the whole point was just to have it reload relatively quickly. Other than making it slightly faster or slower, there was no need to tinker with it.

Put The Logo In the Page

Once you have the animation you want to use, the rest is pretty easy. Well, mostly. First you want to build the page. You can view it online here (the shop page) and here is the code:

<!DOCTYPE html>
<html>
    <head>
      <!-- Google tag (gtag.js) -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=your-id"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'your-id');
        </script>
     <!-- end of Google tag -->
        <title>San Diego Law Library</title>
        <link rel="stylesheet" href="/wp-content/themes/redirects.css">
        <meta http-equiv="Refresh" content="2; url='https://san-diego-law-library.printify.me/products?utm_source=iDeskQR'" />
    </head>
    <body>
        <div id="forward"><center><img src="https://sandiegolawlibrary.org/wp-content/uploads/2024/04/law-library-logo.gif" alt="swiping Law Library logo" /></br><h1>Forwarding to the Library's online shop</h1></center></body>
</html>

It starts with our Google Analytics code, so this visit will be registered in our analytics. That is the whole point of this effort. Then, still within the <head> </head> section, set up the meta refresh function. In this case, it’s set to redirect after 2 seconds to the URL listed.

The <body></body> section is just the loading image, the animated gif, and a line of text. Easy enough. You can obviously make this much more fancy. It should also be said, this page does not reside within our WordPress site; it’s a standalone page.

We can now distribute this URL to anyone who wants to help us move merchandise or, in the case of our foundation page, encourage donations. If we need to change either our shop or or our donation service, both of which are third-party, we just edit this page. Change the URL in the meta refresh line and the page will forward to a new location.

The only slight hitch I ran into was when I was making the QR code for these pages. This is one reason you might not use a zero or 1-second redirect timer. As soon as the page loads, hit escape to stop it from redirecting, to stop the page. Now you can, on Microsoft Edge at least, right-click on the page and choose create QR code. You can also use QR code generators but I like that this is built into the Edge browser.

Other Uses

I’m sure you can imagine other uses. What if a vendor is coming to your law school or law firm and provides a URL to share with participants? You could build a referral page in a similar manner and share your URL with the participants, to see how many people use it. If you are using IP-based authentication, you could put a referral page in between your users and the publisher’s site. Instead of putting the publisher’s link in your intranet or website, put your referral page in and forward to the publisher.

I’m a little chagrined PowerPoint worked out so well. It has meant that I don’t have the need to learn a new tool, which is a time-saver but also I need to learn new things. Maybe the next time!