There have been some changes since our last blog post around Pop Up best practices for NewsMatch and other special campaigns, so we're releasing an updated guide.
Here are some general recommendations and best practices for using popups as part of NewsMatch, year-round campaigns, or special campaigns on your site.
Installing the plugin
We recommend using Popup Maker plugin for setting up donation and newsletter signup popups on your site.
Be size “Large” or smaller from Popup Maker’s settings
Appear at the center of the bottom of the reader’s screen
Appear by sliding up from the bottom of the screen, over 350 milliseconds
Have an obvious “Close” button
Allow readers to interact with the rest of the page (do not use a full-page overlay)
Automatically open after 25 seconds (or more) on the page, because immediate popup appearances can be jarring. It can also be set to open after scrolling down a percentage of the page.
Be configured to not appear again for 2 weeks or more once dismissed by a reader
Be configured to not show on your donation page
You'll need to configure which pages the popup appears on, using the built-in conditionals feature. For disabling the popup on certain pages or in certain cases, read on in this blog post, or check out Popup Maker's paid extensions.
You'll also probably want to review the Popup Maker themes available and modify them to suit your own site's appearances. Once you've modified or created a theme, edit your popup to make it use your theme.
In addition to using Popup Maker themes, you can style popups using your site's WordPress theme's CSS, Jetpack’s Custom CSS Editor, or any other tool that allows you to define custom styles on your site.
What goes in a popup?
NewsMatch will provide calls to action, images, and gifs to be used leading up to and during the campaign.
On May 25, we had the privilege of hosting Steve Grunwell's reprise of his WordCamp Dayton talk, "Code Review: For Me & You". Here's the description:
On the surface, the idea of code review is a no-brainer: why wouldn’t we want a second set of eyes on our code, especially before deploying to production?
As we peel back the layers, however, we find that the topic of code review is much more nuanced. How detailed should the review be? Who is qualified to perform the review (hint: it’s not just senior developers)? Can we afford to take another developer away from their project to review this one? What steps can we take to ensure reviews are constructive, rather than demoralizing?
Attendees will gain deeper insight into some of the arguments for and against systemic, peer code review, as well as pick up some useful tools to make code review a natural part of their teams’ workflow.
Check out the recording of Steve's presentation here and follow along with the slides at this link. (Hit s to read the speaker notes — it's a Reveal.js presentation.)
Have something you'd like to present to the INN Labs team and our INN members? Get in touch!
This post started as a conversation with an INN member about how to turn a database into something searchable for readers. We talked about Datasette Publish, and custom solutions, but the conversation turned into a discussion of how they could build their own simple things, and from there how they could find people and resources to learn more.
And then we thought that other people would have similar questions, so here's what we've come up with on how to get started building news apps and building your own apps team.
C'mon let's go and play
Every snowman starts with a snowball. Do something small to learn the tools, and work your way up from there.
Start by reading the 2013 Source article on building apps on a shoestring. Pay attention not to the specific tools, but to the philosophies in them: static sites that don't depend on servers, replicatable pipelines for turning your data into HTML, and building configurability into your code so you can use the same tool for a different data set next time.
Realize that other teams are lot farther along than you are, and that's okay. They started small, too.
An interactives team isn't a movie. It's a movie studio, and the thing about movies is that anyone with a camera can make them. If all you have is a camera and a script, that's enough to make a simple film. If all you have is a website and some data, that's enough to make a simple chart.
On the left we have a static image. On the right, we have the final film's animation. They still tell the same story, right?
Your first project doesn't have to be Snowfall. It's okay to just have static charts. Start small and work your way up.
How would you do this?
If you have feedback or advice or links on this blog post, let us know, and we'll do a roundup or recap of responses next week. Send an email at labs@inn.org or tweet us @innnerds.
Are you still there?
Maybe we should get a bunch of people who started interactives teams together for a panel about how they built the interactive teams and the tools. If you've started such a team, and are interested in participating, send me an email ben@inn.org and we'll put together a pitch for SRCCON or NICAR 2019.
We recently had an organization come to us with a unique challenge: a group of public broadcast stations needed a way to see what other stations were working on. They wanted an easy way to spark collaboration, avoid any programming duplication, and see opportunities for cross-promotion.
We had to figure out the best way to go about creating a private, easily-accessible, and friction-less shared inventory (what we were also calling a pipeline) of programs for TV and radio stations scattered across the state.
Here’s how we did it:
First, we started by identifying the basic needs of the programmers and those who would be maintaining the inventory/pipeline. Remember, we wanted to keep it as friction-less as easy to use as possible! Then, we focused on finding existing tools which would offer the necessary features for the workflow while being easy to adopt and use. Below you’ll find an overview of the workflow we built. We hope that sharing this with you will spark ideas for ways to improve your own workflows - whether it be a shared pipeline or another use case.
As always, feel free to reach out to us if you have a unique challenge that we can help you solve!
Our workflow uses a private (password protected) page in WordPress, Google Forms, Google Sheets, a script for said spreadsheet, and Google Drive. Here’s how it all comes together:
Step 1: Limit access to the shared inventory/pipeline
A WordPress page became the hub for the private access to all the shared information. We created a password-protected page which has direct access to the form (more below), as well as a direct link to the spreadsheet (again, more below) which contains all the shared information.
Here’s how to create a password protected page in WordPress and how it looked to users:
The workflow we created relies heavily on Google tools, so a Google login for each contributor to the inventory/pipeline is necessary.
For example, the Google Form that's embedded in the private page requires you to log in to submit your responses. A login is also required to access the spreadsheet. This allows for another layer of restricting access and creates a history of track changes for each user.
Next, you’ll see how we created the form.
Step 2: Build a form to collect information for the shared inventory
We built our form using Google Forms. They’re easy to create, allow for collaborators, and seamlessly connect with other Google Tools, which in our case are Google Sheets, Google Drive and of course, the Google login for restricting access.
The fields we decided to use are the following:
Step 3: Funnel the form submissions to a spreadsheet
Once responses to the form are submitted, the user has an option to edit their submission or submit an additional form response. The submissions are automatically sent to a connected Google Sheet. Each form question has its own column in the Google Sheet and the responses are added as cells under each column. This is the case for all columns except two. The exceptions:
Program Upload
If a program is uploaded as a .pdf file, for example, then the file is saved in a Google Drive folder and a link to the file is automatically added to the spreadsheet.
Link to Edit the Form Submission
Since every form submission has a unique URL, we needed to find a way had to populate the special link to edit the submission alongside its corresponding set of responses. We were able to do that by using Google Apps Script.
Check out next week's blog post ("Fun with Google Apps Script!") for more information on how we did this.
Want to know more about how we did this? Get in touch!
As part of INN's support for the 2017 News Match campaign, we've released two WordPress plugins to help sites convert readers. News Match Donation Shortcode provides a donation form for your site to ease donations through the News Revenue Hub as part of the News Match campaign.
On your WordPress site, click on "Plugins" in the Dashboard menu. If you see an "Add New" button at the top of the page, click that.
If you don't see the "Add New" button or the "Plugins" menu, your user might not have permission to manage plugins on the site; you should contact your technical support and ask them to install News Match Donation Shortcode for you. Your site might require downloading the plugin ZIPs and uploading them via FTP instead of using WordPress' built-in plugin installation tools.
Configuring the plugin
The plugin's settings are at Settings > News Match Shortcode in the WordPress admin.
When you first enable the plugin, you'll want to configure it with your organization's name, your News Revenue Hub ID, the default donation amount, and the live and staging URLs of your News Revenue Hub form.
The settings is where you configure the donation levels to match your organization's membership levels. While the plugin comes with 4 default donation levels, you can easily define your own labels and donation levels. The defaults are: $0-$5 Friend, $5-$50 Ally, $50-$500 Champion, and $500+ Ambassador. If you want fewer donation levels, set the third level's upper donation amount to a very high amount, such as your org's dream budget, and make sure that the fourth level is more than that.
Here's an example of non-default configuration of the first donation level out of four.
If you use Salesforce to track campaigns, you can set a default Salesforce campaign ID for the plugin in the plugin's settings. This can be overridden on a per-form basis by setting the sf_campaign_id attribute of the shortcode, like so: [newsmatch_donation_form sf_campaign_id="foo" amount="25"]
This is the Salesforce campaign ID setting in the plugin admin.
The shortcode in use
The default form of the shortcode uses buttons to select the donation level:
[newsmatch_donation_form]By adding type="select" to the shortcode, it appears like this:
[newsmatch_donation_form type="select"]A full list of shortcode arguments and examples can be found in the plugin's WordPress.org entry, but they're basically one-off overrides for your Salesforce campaign ID, your default donation amount, and the type of form.
The above screenshots use the plugin's default styles with non-default configuration. You can style the donation form using your site's theme's CSS, Jetpack’s Custom CSS Editor, or any other tool that allows you to define custom styles on your site. Guidance for these custom styles can be found in the FAQ section of the plugin's WordPress.org entry.
Need support?
If you have questions about this plugin and integrating it with your WordPress site, contact support@inn.org.
If you have questions about the News Revenue Hub, visit their contact page.
If you have questions about the News Match program, visit their website for donor, nonprofit and funding partner information.
As part of INN's support for the 2017 News Match campaign, we've released two WordPress plugins to help sites convert readers. News Match Popup Basics provides a little guidance and some useful tools for using popups in your campaigns.
Creates a new popup with our recommended default settings, using the free Popup Maker plugin
Provides a way to disable popups on your donation pages
Provides a way to disable popups when readers click a link in your Mailchimp-powered newsletter
Let's walk you through installing the plugin and getting it set up.
Installing the plugin
News Match Popup Basics requires the Popup Maker plugin, so first we need to install that.
On your WordPress site, click on "Plugins" in the Dashboard menu. If you see an "Add New" button at the top of the page, click that.
If you don't see the "Add New" button or the "Plugins" menu, your user might not have permission to manage plugins on the site; you should contact your technical support and ask them to install News Match Popup Basics for you. Your site might require downloading the plugin ZIPs and uploading them via FTP instead of using WordPress' built-in plugin installation tools.
After clicking "Add New" you should be on the "Add Plugins" page. In the "Search plugins..." box, enter "popup maker" — you should see an entry named "Popup Maker™ – Best Rated" appear, by "WP Popup Maker." Click "Install Now" to install the plugin, and then click "Activate". You'll be sent to a page asking you to allow sending certain information to a third party. You can press the "Skip" button without any negative effects. Whether you choose to skip or accept, you'll be taken to the list of Popup Maker popups: none yet exist, and that's okay.
Go back to the "Plugins" page, and inn the "Search plugins..." box, enter "news match popup basics innlabs" and choose the presented popup named "News Match Popup Basics" by "innlabs" — that's our plugin. Install and activate it.
In the Dashboard menu, choose the "Popup Maker" item. This will take you back to the "Popups" page you saw earlier, but there should now be a draft popup named "News Match Default Popup." Click on it.
You'll see an editor page that looks rather like the default WordPress post editor, but with a number of exciting new boxes. You can read more about those boxes at the Popup Maker plugin documentation, which is thorough and well-illustrated.
Our default settings for the popup are these:
is not published by default, but requires you to publish it before it becomes active on your site
is the size “Large” from Popup Maker’s settings
appears at the center of the bottom of the reader’s screen
appears by sliding up from the bottom of the screen, over 350 milliseconds
has a “Close” button
does not prevent readers from interacting with the page by means of an overlay
does not have a title
automatically opens after 25 seconds on the page, because immediate popup appearances can be jarring
once dismissed by a reader, does not appear again for a year or until the reader clears their browser’s cookies, whichever comes first
appears on the front page of your site
uses Popup Maker’s default theme
You'll need to configure which pages the popup appears on, using the built-in conditionals feature. For disabling the popup on certain pages or in certain cases, read on in this blog post, or check out Popup Maker's paid extensions.
You'll also probably want to review the Popup Maker themes available and modify them to suit your own site's appearances. Once you've modified or created a theme, edit your popup to make it use your theme.
In addition to using Popup Maker themes, you can style popups using your site's WordPress theme's CSS, Jetpack’s Custom CSS Editor, or any other tool that allows you to define custom styles on your site.
What goes in a popup?
We recommend donation forms or newsletter signup forms. For a simple donation form that integrates with the News Match campaign, check out News Match Donation Shortcode.
Finding the News Match Popup Basics settings
From the WordPress Dashboard menu, under Popup Maker, choose "News Match Popup Basics." This is where you configure whether the plugin disables certain popups.
Disabling popups on certain pages
Donation pages should help people give you money, and should have as few obstacles to that goal as possible. Likewise, newsletter signup pages. Strip out ads, remove unnecessary headers, maybe even clean up your footer on these pages. Donation and signup pages should do one thing and do that well.
Popup Maker's free version includes a simple yet powerful Boolean conditionals system that determines on what pages popups appear, but that system only works on a per-popup basis. Preventing popups from appearing on a particular page requires checking every single popup on your site, and modifying their conditions. We've endeavored to make the process simpler.
In the News Match Popup Basics settings, check the box to enable donation page popup prevention, and add some URLs to the box. Each URL must be on its own line. You should remove the protocol from the start of the URL, so that https://example.org/ is entered as example.org/.
Example settings for the URL-based popup prevention feature of News Match Popup Basics.
When a visitor goes to a page the URL of which matches one of the entered URLs, News Match Popup Basics will prevent Popup Maker from displaying any popups on that page. You can include URL fragments as well, so if you want to prevent popups on pages that have a common URL name, like every page that has donate in its URL.
Be careful with how general your URL fragments are. By "match" we mean that if the entire text on the line in the box can be found in the URL, it will match:
example.org/meow/ will only match example.org/meow/ and example.org/meow/woof/
/meow/ will only match example.org/meow/, example.org/meow/woof/ and example.org/2014/03/25/meow/
meow will match example.org/meow/, example.org/meow/woof/, example.org/2014/03/25/meow/, example.org/2017/10/25/adopt-chairman-meow-adorable/ and example.org/category/homeownership/
We named this feature "donation page popup prevention," but in reality it can be used to exclude popups on all sorts of pages.
If you'd like the ability to programmatically exclude popups on arbitrary pages, let us know on this feature proposal on GitHub.
Disabling popups from Mailchimp visitors
In the WordPress Dashboard, under the “Popup Maker” menu item, on the “News Match Popup Basics” page, there is a checkbox that enables MailChimp suppression. There is also a text box to set the utm_source parameter. MailChimp automatically appends this URL parameter to outbound links in your emails if you have click tracking set up.
From one of the emails you have sent, find a link that contains a utm_source= parameter and copy the following argument text, up until any & character, into the text box. For example, a Nerd Alert newsletter sent by INN Labs contained a link that looked like this: https://example.org/?utm_source=Nerd+Alert&utm_campaign=4d4ecd9f68-EMAIL_CAMPAIGN_2017_10_06&utm_medium=email&utm_term=0_1476113985-4d4ecd9f68-421742753. From that URL, you would copy Nerd+Alert into the text box.
An example configuration of the utm_source setting.
Once you have provided a utm_source parameter, checked the checkbox, and saved the settings, any popup that contains an HTML element with an id attribute equal to mc_embed_signup, or a CSS selector equal to #mc_embed_signup, will be suppressed. Suppression works client-side using JavaScript that runs in the visitor’s browser.
If you have multiple MailChimp signup forms on your site, suppression based on the HTML ID of the form will not work for you. You should add a class to all MailChimp forms in popups, and use that as the selector. For more details about this process, see the FAQ entry "Why does MailChimp popup suppression use #mc_embed_signup" at the plugin's WordPress.org entry.
Welcome to Part 2 of our "Intro to Google Analytics" series! This time we'll be talking about basic metrics and reports you can use to better understand your site's overall performance, audience, and engagement levels.
First Things First
If you haven't set up your Google Analytics account yet – or are worried it's not set up correctly – this guide from Part 1 of this series will show you how. It's important to make sure your code is tracking properly and that you’ve set up filters to collect accurate and reliable data.
Once everything is set up and configured, you should wait a couple weeks for the data to come in. Then, it's time to see how your site is performing! The following metrics and reports will help you start analyzing your site's Google Analytics data.
Basic Metrics
There are more than 400 metric and dimension combinations in Google Analytics that you can use to analyze your data – wow! At a minimum, the following basic metrics are the most important to track:
Sessions: The number of times visitors are actively engaged on your website. Users (see below) can have multiple sessions in a day, week, month, etc. For more detailed information on how a session is calculated, go here.
Users: The number of visitors that have at least one session on your website. This number is good for seeing how many individual people have visited your site.
Pageviews: The number of times people visited a particular page or group of pages on your website.
Pages per Session: The average number of pages viewed during a session on your website. Higher pages per session means users are exploring more of your site and are likely more engaged. On the flip side, make sure to check for people who are hopping around looking for information they can't find!
Average Session Duration: The average length of visitors’ sessions. Longer sessions typically indicate that users are more engaged.
Bounce Rate: The percent of visits that are single-page only. This is based only on sessions that start with that page. Usually, a high bounce rate is a sign that people are leaving your site (or a certain landing page) because they aren’t finding what they're looking for.
Exit Rate: The percentage of users that were the last in the session. This is the last place a user was before leaving your site and these "drop-off" points are important for understanding where to improve your site.
Percent of New Sessions: An average percentage of new visitors to your website. Keep in mind that this will also include sessions that have since expired and are now seen as "new" or sessions from previous users that are now over private browsers. See more in sessions (above) about how sessions are calculated.
Simple Reporting
Audience Overview
This overview report will include all of the metrics mentioned above and is easy to update by date range. The best way to track your successes is by comparing your traffic over time.
Log into your Google Analytics account.
Select "All Web Site Data" (the MAIN VIEW).
You’ll land on the "Audience Overview" tab within the Google Analytics reporting section.
Set the data range in the top right corner to your desired time period.
Select the "Compare to" tab.
Select "Previous period."
Hit "Apply."
Referral Traffic
Here's how you can find your main traffic sources from within Google Analytics:
Log into your Google Analytics account.
Select "All Web Site Data" (the MAIN VIEW).
You’ll immediately be taken to the "Audience Overview" tab within the Google Analytics reporting section.
Select the "Acquisition" tab on the left navigation bar.
Select the "Overview" tab.
Adjust the date range in the top right corner based on your preferences.
Hit "Apply."
This report will show you the following information:
Direct traffic: Visitors who arrive to your site by typing your URL into their browser or via a bookmark. Organic traffic: Visitors who arrive to your site from a search engine (and click on the organic, not paid, search results). Referral traffic: Visitors who arrive to your site from another website that has linked to you. Social traffic: Visitors who arrive to your site from a social media network.
Bonus: Monthly Performance Report
The Monthly Performance report summarizes the previous month's data for your site. Google Analytics will send it once a month. Here's what to do to receive the report:
Log into your Google Analytics account.
Click the button with 3 horizontal dots, then click "User settings."
Select "Performance Suggestions and Updates." You can clear the checkbox if you want to stop receiving the report.
We hope you've found Part 2 of GA 101 useful and now understand the basic metrics and reports you should review. In the future, we'll be covering more advanced Google Analytics topics in our blog posts and webinars – so, keep an eye out for them!
If you have any questions about Google Analytics, optimizing campaigns, Google News, Search Console, or anything else related to your site, let us know! The team at INN Labs is always happy to hear from you.
If you haven't yet set up Google Analytics for your site, or if you never take the time to look at the data it provides, then you're truly missing out. Google Analytics (GA) is filled to the brim with important information that you can use to boost your website's engagement, improve donation campaigns, increase search rankings, and more.
First, we'll start by making sure you have GA up and running with reliable data. Then be on the lookout for Part Two of this series, where we'll follow up with an overview of the basic metrics and reports that you should be using to your advantage.
Click “SIGN IN”, choose "Analytics" and enter your Google email account information. If you don't have a Google email address, you'll need to create one. Click the “Create an account” link to get started.
Once you've logged in, click the “Start using Google Analytics” button.
Enter an account name, the name of your website, your website URL, your type of industry (News), and your time zone.
You'll also be asked to check or uncheck four data sharing settings. These help Google improve their service offering and are totally optional.
Click the “Get Tracking ID” button at the bottom of the page and accept the Google Analytics Terms of Service Agreement.
We'll want to make sure this snippet of code (the tag) is on every page of your site for you to start tracking and using Google Analytics. Next, we'll talk about how you can quickly and easily do this.
Wrangling the Tracking Code
There are a few different options for adding the tracking code to your site, with some being more manual and technical than others, and some that are tailored to your Content Management System (CMS). Take a look:
If you're using WordPress as your CMS (including the awesome sites using our Largo platform), we recommend installing and activating INN Labs' No-Nonsense Google Analytics plugin. This plugin supports Universal Analytics (the newest type of Google Analytics tracking code at the time of this writing) as well as multiple tracking codes. Once activated, all you need to do is copy and paste your UA code into the settings.
Use Google Tag Manager to add Google Analytics tags to any type of site. This route makes it easier to incorporate tags (snippets) from other sources like AdWords Conversion Tracking as well.
Other CMS have settings for Google Analytics built in (like Squarespace), so you’ll just add your UA code into those specific settings.
For all other sites, contact your webmaster to have them manually add the tracking code to your site.
Configuring Your Data
To ensure that you’re only capturing data from outside users (and not showing when you visit sites for testing, editing, etc.) you'll want to filter out your IP address from Google Analytics:
Add a filter name, depending on what IP you’re entering. For instance, if you’re adding your home IP address, I would suggest naming it "Home IP Filter."
Select "Predefined filter," and then exclude traffic from the IP addresses that are equal to your IP address. Then enter your IP address.
Apply the filter to the "All Web Site Data" view only.
Select "Save."
Is It Working?
Once you have successfully installed the Analytics tracking code, it can take up to 24 hours for data such as traffic-referral information, user characteristics, and browsing information to appear in your reports. However, you can check your web-tracking setup immediately with one of the following tools:
Real-Time Reports
The Real-Time reports let you see current activity on your site. If these reports have data, then your tracking code is collecting data and sending it to Analytics as expected.
Navigate to a view in the property which has your tracking code. If you only recently added the tracking code to this property (website), it is likely that there will only be one view.
Select Real-Time > Overview or Real-Time > Behavior.
Google Tag Assistant
Google Tag Assistant is a free Chrome browser extension that shows you whether Google Analytics tracking codes (the tags) are firing correctly. It will also give you details regarding any errors, which is great for troubleshooting if you do have any issues. It's also great for other uses (see below).
Frequently Asked Questions
How do I find my UA code to put into a plugin or my CMS settings?
(Example: UA-000000-01)
Log in to your Google Analytics account and select your site's profile.
Click on the Admin tab in the right menu bar.
You'll see your UA code near the top of the page.
Copy the UA code and paste into your plugin or CMS settings.
How and why should I connect to other accounts?
To get the full features of Google Analytics, I highly recommend connecting your other accounts. The accounts most commonly linked with Google Analytics are Search Console (formerly Webmaster Tools), AdWords, or DoubleClick. You can find more information about this from Google here.
I’m having trouble getting my tracking code working, help?
If you need to add, modify or delete users from your account, here's a handy guide.
How do I find out if there’s already a tracking tag on my site?
Google Tag Assistant comes to the rescue once again! It will show all the Google Analytics tags found on your site and you’ll be able to see if they are the new Universal Analytics (analytics.js) tracking tags or the classic, legacy (ga.js) tags.
What if I DO have another GA tag on my site?
If you have multiple Google Analytics tags, make sure that you only have ONE ga.js tag.
If you have more than one, it will compromise the data for all the accounts associated with your site. You can, however, have as many Universal Analytics (analytics.js) tags on your site as you'd like. Use the No-Nonsense Google Analytics plugin to easily add multiple Universal Analytics tracking UA codes.
In Conclusion
We hope you've found this intro to Google Analytics useful and now understand how easy and important it is to have it on your site. In the near future, we'll be covering more advanced Google Analytics topics in our blog posts and webinars.
If you have any questions about Google Analytics, optimizing campaigns, Search Console, or anything else related to your site, let us know! The team at INN Labs is always happy to hear from you.
The plugin's settings are at Settings > News Match Shortcode in the WordPress admin.
