How to create a Demo Website for Practicing GTM

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.

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

Here’s an overview of what we’ll cover:

So let’s dive in!

Setting Up a Demo eCommerce 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 go for 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 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.

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

Importing sample products to the demo eCommerce website

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 website and tracking functions. Click Complete task.

Next, click on Set up payments.

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. 

Setting up payments for the eCommerce website on WordPress

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 for 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 the most important step of this guide—installing Google Tag Manager so that we can track these orders. 

Installing Google Tag Manager On Our Demo eCommerce 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. And 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 to click on the Build option after signing into your Sandbox CMS account.

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. 

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

JOIN US!

Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
guest
0 Comments
Inline Feedbacks
View all comments

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.