×

How to Create a Demo Website for Practicing GTM

Julian Juenemann

Last Modified on March 17, 2024

Do you want to test your eCommerce tracking, but you’re worried about installing a work-in-progress on your live website? 

On a demo website, you can test-drive your website’s functionalities—including its tracking—without jeopardizing meaningful data.

GTM For Beginners

Sign up to the FREE GTM for Beginners Course...

In this guide, we’ll learn how to set up an eCommerce demo website and install Google Tag Manager to practice tracking implementations.

Here’s an overview of the steps of creating a demo website for practicing GTM:

  1. Set Up an eCommerce Demo Website Using Sandbox CMS 
  2. Install & Configure the WooCommerce Plugin
  3. Install Google Tag Manager on the Demo Website 

So let’s dive in!

Setting Up an eCommerce Demo Website Using Sandbox CMS

One way to set up a demo site is to pay for a hosting service, install WordPress, and set up a whole website to mimic your real eCommerce site. But this is costly, time-consuming, and frankly overkill for what you need.

A cheaper, quicker alternative is to set up a demo website using Sandbox CMS.

To do that, you’ll first need to register for a Sandbox account. You can choose either a free account or a premium, paid version if your goal is to create multiple testing sites.

If you just need one demo site (or if you want to try out Sandbox and see if the premium is worth paying for), you’ll just need a free account.

Creating a free Sandbox CMS account to create a demo eCommerce website

Once you have a Sandbox CMS account, you can create a new WordPress instance.

Just click on the sandboxcms.com link at the top of your account homepage. This will initiate your sandbox and take you to your WordPress installation.

Creating a new WordPress instance using Sandbox CMS

Installing & Configuring the WooCommerce Plugin

To implement eCommerce on this WordPress instance, we’ll use the WooCommerce plugin.

🚨 Note: If you have another eCommerce plugin that you’re using on your main site, then you should use that on your sandbox site, too. I’m demonstrating with WooCommerce here because it’s free, so it doesn’t cost anything to implement on a sandbox site!

In your WordPress dashboard, go to Plugins → Add New and search for the WooCommerce plugin.

Click on Install Now to install the plugin, then Activate it. This will change our basic WordPress site into an eCommerce store.

Searching the WooCommerce plugin and installing it on your demo WordPress site

Next, we’ll configure our WooCommerce store.

For a demo store, we don’t need to set up everything if certain aspects don’t help you test your tracking implementation. For example, we’ll skip setting up the store details.

Skipping the store details setup on the eCommerce site

This will take us to our WooCommerce store. Here, we’ll see some more setup options that will help us test the store’s function and tracking implementation.

Let’s start with the Personalize My Store option to set up the basic site layout.

Personalizing the demo eCommerce store in WordPress

Since this store doesn’t need to feature real products, we’ll populate it with sample items by clicking Import products.

Importing sample products to the demo eCommerce website

You can test any page view, add-to-cart, or purchase functions with these just like real products on your main site.

The second step is to Create a custom homepage.

Creating a custom homepage for the demo eCommerce website

For now, we can skip the logo and store notice configurations since they’re less important for testing the website and tracking functions. Click Complete task.

Next, click on Set up Payments.

Setting up payments for the eCommerce website on WordPress

This is essential to testing whether the “commerce” part of your eCommerce site is working correctly. Adding a payment option allows us to follow the user experience from the ordering process to the checkout page. 

There are multiple options available to collect payments online with Stripe, Paypal, Klarna, and Mollie. If your main site uses any of these, you probably want to set them up here.

You can also choose to have “customers” pay on delivery or via bank transfer.

For simplicity’s sake, we’ll just use the Cash on Delivery option on this demo site (since no extra configurations are necessary for this option).

Selecting the Cash on delivery option to collect payments on the demo store

You can also add tax rates to purchases if you plan on tracking customer cost and your actual revenue separately (which is a good idea, business-wise).

Click Set up tax and simply add your store location and country.

The WooCommerce plugin gives us the option to Install Jetpack and WooCommerce Tax if we want to automate our sales tax calculations. 

However, the existing configurations are enough for us to start testing our tracking. So if you don’t want to set this up, you can select the I don’t charge sales tax option and move to the next step.

Selecting the I don’t charge sales tax option for the demo store

Lastly, click Set up shipping to make sure that you can track shipping costs separately from your product revenue.

Under this menu, you can set shipping costs separately for your country and the rest of the world.

Setting shipping costs for different destinations for the demo store

You can skip all the other payment and shipping configurations for your sandbox eCommerce site.

Next, we’ll select the default currency for this site. In your dashboard, go to WooCommerce → Settings → General → Currency options and select your Currency.

Setting the Currency options for the demo store

Now that our WooCommerce store is configured, the last step is to select a theme for the site. 

Go to Appearance → Themes on your WordPress dashboard. This will bring you to the theme store. 

Browse and select any pre-built theme from the options available. If there’s one that matches your main site, you might want to pick that one. Then, Install and Activate the theme.

Selecting and installing a theme for the demo eCommerce website

At this point, we’ll have a demo eCommerce website set up, including a theme and some sample products.

We can quickly test our store functionality by adding products to the cart and checking out. If everything is working correctly, the store will place our order successfully.

This brings us to the last and most important step of this guide—installing Google Tag Manager so that we can track these orders. 

Installing Google Tag Manager On Our Demo Website

There are several ways to install Google Tag Manager and access the Data Layer. However, in this example, we’ll install it using a WordPress plugin.

So let’s go to Plugins → Add New and search for Google Tag Manager for WordPress. Install and Activate it just like you did with the WooCommerce plugin.

Selecting and installing Google Tag Manager for WordPress on the demo store

To start tracking data, you’ll need to connect your sandbox site to your Google Tag Manager account.

So go to Settings → Google Tag Manager in the WordPress dashboard, and add your Google Tag Manager ID from your account.

For your Container code placement, select the experiment-friendly option Codeless injection and click Save Changes.

Adding Google Tag Manager ID and selecting Codeless injection for Google Tag Manager integration

Finally, to access the Data Layer, go to Settings → Google Tag Manager.

Then, click on the Integration tab and select WooCommerce. Here, check the box for the Track enhanced e-commerce option.

Selecting the Track enhanced e-commerce option to access the data layer of the demo store

You can now access the Data Layer from your browser’s Console using the dataLayer command.

Accessing the data layer using Console on the demo store web page

I’ve created a deployable link to help you with a faster installation of this demo eCommerce website using Sandbox. All you’ll need to do is click on the Build option after signing into your Sandbox CMS account.

FAQ

How can I set up a demo eCommerce website using Sandbox CMS?

To set up a demo eCommerce website, you can use Sandbox CMS, which provides a cost-effective and quick solution. Follow these steps:

1. Register for a Sandbox CMS account (free or premium).
2. Once you have an account, create a new WordPress instance through Sandbox CMS.
3. This will take you to your WordPress installation, where you can proceed with the setup.

How do I install and configure the WooCommerce plugin on my demo WordPress site?

To install the WooCommerce plugin:

1. Go to your WordPress dashboard and navigate to Plugins → Add New.
2. Search for the WooCommerce plugin, click on “Install Now,” and then activate it.
3. Once activated, your basic WordPress site will be transformed into an eCommerce store. To configure the WooCommerce plugin, you can personalize your store layout, import sample products, and set up payments, taxes, and shipping costs.
However, for testing tracking implementations, you can skip certain configurations that are not relevant to your needs.

Is there a faster way to set up this demo eCommerce website using Sandbox CMS?

Yes, a deployable link is provided to assist you with a faster installation of the demo eCommerce website using Sandbox CMS. Simply sign into your Sandbox CMS account and click on the “Build” option after accessing the link.

Summary

And that’s it! This is how you can set up a demo eCommerce website using Sandbox CMS. 

Using this demo store, you can test your website functionalities and install tracking using Google Tag Manager. It is a great way to enhance the shopping experience for your target audience and increase website conversions. 

Want to put your sandbox website to use? Give setting up a relative click variable in GTM a try and pull more contextual data from every user action that you track.

Do you test your websites before going live? How do you create testing environments for eCommerce websites? Let us know in the comments below!

Julian Juenemann

Julian is the web analytics instructor and the owner of MeasureSchool. He has 10+ years of experience in teaching analytics tools such as Google Analytics, Google Tag Manager and Looker Studio. He founded MeasureSchool to help marketers with the data-driven way of digital marketing.

Related Posts

WooCommerce Google Analytics 4 Tracking blog featured image

WooCommerce Google Analytics 4 Tracking Guide

Eric Huguenin

Google Analytics 4 Cookieless Tracking blog featured image

Demystifying Google Analytics 4 Cookieless Tracking

Eric Huguenin

Google Tag Manager Lookup Table Variable blog featured image

How to Use Google Tag Manager Lookup Table Variable

Usman Qureshi

Subscribe
Notify of
guest
5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Daniel
Daniel
3 years ago

Hi julian thank you for the article and the video. Could you please explain why when you installed gtm you chose the codless injection option?

Daniel
Daniel
3 years ago

I understand, however this is relevant only for the noscript part (right?) which will fire only in cases where the browser does not support javascript (that’s like less then 2% of the users?)

Ercan
Ercan
3 years ago

That was very useful. Thank you so much! I think adding the Google Analytics tag in GTM would be a valuable addition to the article.

Chiril
Chiril
3 years ago

Thank you Julian for this very useful article. I just wanted to mention one observation. After installing the GTM plug-in and using the “codeless injection” for the GTM <noscript>, it seems that Tag Assistant shows a non-standard implementation (blue gtm tag). As per GTM installation guide, <noscript> part should be inserted immediately after the opening of <body>, in this instance the <noscript> is not the first script after the opening <body> tag, so maybe this is what causes Tag assistant to show the blue non-standard implementation tag. I’ve tried to check in the wordpress settings If I could manually insert… Read more »

NOW IT'S TIME TO

Start Measuring Like A Master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.

Ready to take your digital marketing to the next level?

Subscribe to our newsletter and stay ahead with our latest tips and strategies.