Configure Google Analytics for Church Online Platform for using custom dimensions

Thanks to the spreading COVID-19 pandemic, lots of churches are scrambling to roll out or upgrade their online streaming experience. One of the most popular (and free!) tools to provide some over-the-top features for online streaming is a product called Church Online Platform (CHOP). This tool provides an easy to edit web page wrapper around an embedded video player from your livestreaming tool of choice. You can add your church logo, custom links, and even offer an interactive chat widget for your congregants.

While this tool is generously created and supported free of charge by the awesome folks at Life.Church in Oklahoma, developer time is limited and not every feature request can be accommodated. One of the areas that could use a little improvement is analytics. Unfortunately, the newest version of this platform has very limited customizability so if you’re on v4 you’ll have to make do with the defaults. If you’re on v3 though, read on to learn how to add basic Google Analytics and add additional features too! (Check this support article to determine the version you’re on)

Adding basic Google Analytics on version 3 couldn’t be easier: Just follow the article Set up a property on the Google Analytics help center to create a property if you don’t already have one for your CHOP site. If you do, jump ahead to the article on Setting up the Analytics tag. Once you have the code snippet, go to your CHOP Admin page, click the “Settings” menu, and paste the tracking code into the “Google Analytics tracking code” field in the “Extras” section:

If you just want basic Google Analytics, that’s all you need to do! Within a few minutes you should start to see data show up in your Google Analytics view. But what if you want more info? One problem I ran into was that it was hard to see exactly how many visitors were on the site for a given service because GA only lets you break down visitors by the hour. And CHOP doesn’t have a unique URL for each service. Is there a way to figure out what service/event was streaming when a visitor landed on your CHOP site? Yes there is! I’ve written a little Javascript snippet that will grab this information and push it up to Google Analytics as a custom dimension.

First, you need to create your custom dimension. Each free Google Analytics account is allowed up to 20 dimensions, and like many other features of Google Analytics (goals, e.g.) custom dimensions are permanent – you can disable them but can’t delete them. If you’re close to your limit already, make sure this is something you want to use one of your 20 slots for. Go to Google Analytics and select your CHOP property. Go to “Admin” and select “Custom Definitions” -> “Custom Dimensions”. Click “New Custom Dimension”

Add a name – it doesn’t matter what you pick so make it easy to understand for when you’re looking at reporting later. Select “Hit” for scope – that means the value you set is only valid for one page view. Then click “Create”. You’ll see this page explaining how to use your new dimension:

Since this is my first custom dimension, I’ll access it with the ID “dimension1”. Now we need to paste in the custom JS snippet. I’ve included it below and I’ll explain the parts briefly. If you or someone you know is familiar with Javascript, you should be able to customize it to meet your needs:

First, this script grabs a list of all the active events from the CHOP API. Then, for each event, it checks to see if the current time is between the start and end times for the event. If it is, the script creates a value for the custom dimension by adding the event ID to the beginning of the label, followed by the event title, followed by the event start time. You can modify line 18 to your liking. If none of the events matches the current time, a page view event will be sent without any custom dimension.

To install the custom script, first be sure to swap the “UA-1234567-01” in line 17 and line 24 with your own property ID from your tracking code. Then, go back to the “Google Analytics tracking code” field in the CHOP settings. Remove the line that says

gtag('config', 'UA-1234567-01');

And paste the custom snippet at the end of the default Google Analytics snippet. When you’re finished, it should look something like this:

To view your results, go to Google Analytics -> Behavior -> Site Content -> All Pages and click the “Secondary dimension” drop down. Click “Custom Dimensions” and then select the name you picked for your custom dimension.

Once you do that, you’ll see all your page views grouped by the event that was streaming when they visited that page:

You can also create segments for specific events using this same field. To create a segment, go to Segments under the View settings in the Admin area, or click the “Add Segment” button that appears on many pages in Analytics:

Click “New Segment”, give it a name like “9am Service”, select “Conditions” on the left under “Advanced”. Select your custom dimension name from the dimension drop down menu, then specify the criteria. For example, you can search for a specific event ID by using “Starts With” and typing in the ID. Or you can search for an event title by using “Contains” and typing in the title:

When you’re done, click “Save” and your segment will be accessible on all view pages:

If you have any questions, problems, or suggestions about this post, please share them in the comments. And if you have any requests for future posts, share those too and we’ll try to get to your request soon!