Have you seen those eye-catching visual stories on platforms like Instagram, Facebook, and Snapchat that draw in viewers and encourage them to keep scrolling? You can create similar engaging content for your WordPress website with Google Web Stories.
Google Web Stories provide an interactive way to engage with your audience. They allow you to share concise content, showcase products, or offer behind-the-scenes insights in a format that’s optimized for mobile devices.
This article will walk you through the straightforward process of incorporating Google Web Stories into your WordPress site, helping you attract and retain your visitors’ attention.
In this article, we will explore the following topics:
- Understanding Google Web Stories
- Benefits of Using Google Web Stories
- Steps to Integrate Google Web Stories into WordPress
- How to Display a Web Story on Your WordPress Site
- Integrating Additional Features into Google Web Stories
What Are Google Web Stories?
Google Web Stories are a widely-used format for short-form content, akin to the stories feature found on social media platforms such as Instagram, Facebook, Snapchat, and YouTube.
While they may go by different names, all these formats serve the same purpose.
Google Web Stories are interactive, tappable slides that feature rich media content such as images, music, and videos, making them incredibly engaging.
Benefits of Using Google Web Stories
Implementing Google Web Stories on your website allows you to utilize an interactive storytelling format while maintaining control and flexibility, free from reliance on third-party algorithms to reach your audience.
Here are additional reasons to consider Google Web Stories:
- Google Web Stories enable you to integrate the story format directly into your website, allowing you to create and share interactive, mobile-optimized stories.
- This format is highly engaging, and when users are engaged, they are more likely to convert and spend additional time on your WordPress site, leading to increased sales, conversions, and overall growth for your business and brand.
- They utilize the AMP format, support structured data, and can even be monetized through Google AdSense.
- Google Web Stories are indexable and can appear in Google search results and Discover.
Now, let’s explore how to easily integrate Google Web Stories into your WordPress site.
What is the Process for Adding Google Web Stories to WordPress?
Enhance your WordPress site by adding Google Web Stories using the free Web Stories plugin developed by Google. This tool enables you to create visually stunning web stories and publish them effortlessly on your website.
Begin by installing and activating the Web Stories plugin. For detailed instructions, refer to our comprehensive guide on installing a WordPress plugin.
The Web Stories plugin is a free tool created and supported by Google, designed to promote the web stories format and make it accessible for self-hosted and independent websites.
Navigate to the Stories » Dashboard section after activating the plugin to start crafting your first story.
You can either choose a template to kick off your story or click on the ‘Create New Story’ button to begin from scratch.
We suggest starting with a template, as it provides a solid foundation and simplifies the process for beginners.
After selecting a template, the plugin will open the story builder interface, which operates similarly to popular drag-and-drop page builder plugins for WordPress.
You can easily click on any element to modify it or add new elements from the left sidebar.
Incorporate audio, video, images, text, headings, stickers, emojis, and much more into your stories.
If you’re utilizing a template, you’ll notice that additional pages are automatically generated at the bottom.
You can navigate between pages by clicking on them. Additionally, you have the option to delete a page or create a new one as needed.
Clicking on a page allows you to set a background color or add media.
When selecting a background color for your page, you will also have the option to include a call-to-action button.
Simply enter a URL and choose between dark or light themes for your button.
You can also optionally add an icon to your call-to-action button and designate the link as sponsored or nofollow.
If you have WooCommerce installed, you can display products as well.
However, you’ll need to enable the WooCommerce integration in the plugin settings first (we will guide you through this later in the article).
Once you are satisfied with your story, switch to the ‘Document’ tab in the left column to adjust the publishing settings.
Here, you will need to upload a publisher logo (your website logo or site icon works well) and a poster image for your story.
Ideally, the poster image should have a 3:4 aspect ratio and a minimum resolution of 640 x 853 pixels.
Make sure to include a title and description for your story. This will enhance its SEO and make it easier for users to find.
You can select how you want the pages to transition. By default, pages will switch every 7 seconds, but you can adjust this or allow users to manually navigate.
You can also assign categories and tags to your story.
While optional, categorizing your story and adding tags can significantly improve its SEO.
Look for the button labeled ‘M’ in the bottom right corner of the stories editor. Clicking it will display the meta boxes added by your installed WordPress plugins.
For example, if you have the All in One SEO for WordPress plugin, you’ll be able to access the SEO settings.
Here, you can enter the SEO Title, meta description, and schema settings for your web story.
If you have the WPCode plugin, you can also add custom code snippets that will run when this story is viewed.
This feature is useful if you want to implement custom tracking pixels for your stories.
You are now prepared to publish your web story.
Just click the ‘Publish’ button located at the top right corner of the screen.
You will see a checklist before publishing. If everything appears correct, click the publish button to make your story live.
How to Display a Web Story in WordPress
The plugin enables you to add your story to a new blog post upon publishing.
You can also insert your story into any existing post, page, or sidebar.
Just edit the post or page where you want the story to appear and add the Web Stories block in the post editor.
In the block settings, you can select multiple stories, the most recent ones, or just a single story.
If you choose the latest stories or multiple stories option, you will have additional display settings to show stories in a circle, carousel, list, or grid format.
Once you are happy with the post, click the ‘Update’ or ‘Publish’ button to apply your changes.
Now, visit your WordPress blog to see your web stories in action.
Here’s how it appeared on the homepage of our test site in the multiple-story carousel layout.
Web stories are a unique post type in WordPress, allowing you to display them just like any other page or post.
For example, you can utilize the archive page as a landing page for visitors, or showcase individual stories similarly to how you would display a WooCommerce product, which also uses a custom post type.
Integrating Google Web Stories
The Web Stories plugin includes several built-in integrations that you can utilize.
You can access these integrations on theStories » Settingspage.
Integrating Google Analytics with Web Stories
First, enter your Google Analytics profile ID here to enable tracking of your story views in your Google Analytics reports.
If you are using MonsterInsights, your Google Analytics tracking ID can be found on theInsights » Settingspage.
Your Measurement ID will be displayed in the Website Profile section.
If you are not using MonsterInsights, you can locate the tracking ID directly in Google Analytics.
Simply navigate to the ‘Admin’ tab and select ‘Data Streams.’
Next, you will see your website and other profiles listed as data streams.
Click on your website profile to view its details.
On the following screen, you will find your website profile along with the measurement ID.
Copy the Measurement ID and paste it into the settings of the Web Stories plugin.
Incorporating Custom Fonts into Web Stories
To use a specific font in your Web Stories, manually upload it to your website via FTP.
Upload the font file to the/wp-content/directory on your website. After uploading, the location of your font file will be:
http://example.com/wp-content/font-file-name.ttf
Make sure to replaceexample.comwith your actual domain name andfont-file-name.ttfwith the name of your font file.
Then, copy and paste this URL into theStories » Settingssection under ‘Custom Fonts’.
Integrating Monetization Options in Web Stories
Web Stories allows monetization through Google AdSense and Google Ad Manager.
Select your preferred monetization option and provide the necessary details, such as your Publisher ID and Ad Slot ID for the ad unit.
Activating eCommerce Integrations for Web Stories
If you are using WooCommerce or Shopify for your online store, you can enable eCommerce support for Web Stories.
This feature enables you to incorporate products into your web stories.
Simply navigate to the Shopping section on theStories » Settingspage and choose your eCommerce platform from the dropdown list.
For WooCommerce, the plugin will automatically display your products.
For Shopify, you will need to enter your store URL and create an API access token.
If you haven’t created one yet, click the link that says ‘learn how to get one’ for instructions on generating your Shopify API token.
We hope this guide has assisted you in adding Google Web Stories to your WordPress site. You might also be interested in our tutorial on embedding TikTok videos in WordPress or our recommendations for the best WordPress social media plugins.
If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
