Tutorial: Setup a virtual Web Analytics practice site in 15 minutes using Local

Setup a virtual website for free in just 15 minutes, so you play all you like with JavaScript and Tag Management

When you want to practice with JavaScript, Tag Managers, or digital analytics implementations (like Google Analytics 4), a practice site comes in handy. This tutorial walks you through the steps to setup a preconfigured WordPress e-commerce site that runs locally on your computer

Why a local practice website?

It is the ideal playing ground to:

  • Practice and develop your skills, also those you currently do not need (yet) in your role
  • Learn to implement digital analytics tools and Tag Managers without having a real website
  • Have a free play area where you can initially validate digital analytics designs before instructing developers

Prerequisites:

  • Basic knowledge of JavaScript, CSS and HTML. WordPress sites are in PHP, but you'll will be fine without any PHP knowledge
  • A code editor like Visual Studio Code, Brackets or Sublime Text (with PHP7 support)

In case you do not have a code editor yet, install Visual Studio Code (VScode) before continuing. I recommend Visual Studio Code because of its wide adoption and large number of plugins and integrations available

Setup steps

You can easily setup your virtual (local) WordPress e-commerce with Local using these steps:

  • Download and install Local
  • Create a Local account while running the installation wizard
  • After you complete the installation and open Local, you should see the Local home screen. We will only use a few features: the main menu, open the folder location, open the website and open the WordPress admin area.
  • Local home screen
  • Add a new site. In the Local home screen: "Menu" > "Add a New Site" or Ctrl+N and walk through the steps
  • The site name does not matter much, as you will only run it locally on your pc. You can use for example 'demosite'. Note that the website has a .local extension
  • You also need to setup a WordPress Admin username password. Use details you can easily remember (or note them down) as you need these details in later steps. The username and password do not need to be strong, since you only run it locally.
  • Once the site is created, we can start configuring it. Open the WordPress Admin section from the Local home screen (WordPress admin button) and login
  • We will start with installing the "WooCommerce" plugin, as this is useful for our e-commerce demo site. In the WordPress Admin section click "plugins" in the left-side menu. Click "add new" and search for "WooCommerce". Install this plugin. Activate it once the installation is complete. Points of attention for the installation wizard:
  • You can provide some fictive details when creating your WooCommerce account
  • In the "Business Details" step: click "continue without installing" if you get an error. You may need to navigate one step back and open this step again to see the "continue without installing" option
  • In the "Choose a Theme" step of the wizard: scroll to the bottom and click "skip this step"
  • After the WooCommerce plugin is installed, we need to enable the payment options. This allows us to complete the purchase process on our demo site. Go to "WooCommerce" > "Settings" from the left menu in the WordPress admin section. Open the tab "payments", enable the three payment methods (Direct bank transfer, Check payments & Cash on delivery) and save your changes.
  • Now the WooCommerce plugin is configured, we can add a theme to the site. Click "Appearance" > "Themes" in the left menu of the WordPress admin section. Click "Add New" in the next screen
  • Search for the "Storefront" theme in the 'Add New Theme' section. Install and Activate the theme "storefront" (see image)
  • Select the Storefront theme
  • When the theme activation is complete, you have a new option in the "Appearance" submenu: "storefront". Open this option ("Appearance" > "Storefront")
  • In the Storefront section keep the checkboxes "Create a homepage using Storefront's homepage template" and "Add example products" enabled and click "let's go"
  • Once the storefront setup is finished, click the "Publish" button at the top of the left side menu. Your local virtual e-commerce store is now setup

Open your local WordPress site

Now the virtual e-commerce store is setup, you can easily run it on your pc. Just open the Local home screen and click "Open Site" (see first image). You need to do this everytime you would like to run your site

Adding scripts, tags and JavaScript to the pages

To add scripts (like GTM) to the site, we need to modify the code of the pages. We can easily do this through a code editor

  • We start with opening the folder location. Go back to the Local home screen and click the "open folder location" icon (see first image)
  • Copy the path in a file explorer and navigate to the subfolder "app" > "public" > "wp-content" > "themes" > "storefront". Copy the full folder path
  • Open the folder in your code editor. In Visual Studio Code: go to "File" > "Open Folder..." and paste the full path and open this folder
  • Now we can make any modifications to the pages we like. Save the files and reload the page in your browser, to see that the changes are immediately applied
  • For Example: we can easily add a sample JavaScript file and add it in the footer of each page. In Visual Studio Code: open the "js" folder and create a new subfolder, e.g. "play-area". Add a new .js file to this folder, e.g. "hello-world.js". Add some simple code and save the file. Code example:
  • console.log('hello-world');
  • You should now have something that looks like this:
  • Added a new JavaScript file
  • The last step is to load this script on every page. We can do this by loading it in the footer. This may not be the best way to do it, but it is easy, and it works for our play area. To do this, open the file "footer.php", include the code, and save the file. Code example:
  • <?php
    wp_register_script(
       'log-hello-world',
       get_template_directory_uri() .
       '/assets/js/play-area/hello-world.js' );
    wp_enqueue_script( 'log-hello-world' );
    ?>
  • Include the JavaScript file in the footer
  • In this code example "log-hello-world" is the reference to the file (you can pick any name you like) and "/assets/js/play-area/hello-world.js" is the file reference
  • If you now go back to your local site and refresh the page, you see that "hello-world" is written to the Developer Tools Console (F12) on page load
  • When practicing, you also may want to make changes to the page templates themselves. You can find these under the subfolder: "app" > "public" > "wp-content" > "plugins" > "woocommerce" > "templates"
  • You also may want to use PHP variables in your JavaScript code. To do this in an easy manner, you can use the script tag and copy values from PHP variables. For example: on the "thankyou.php" page you can log the transaction ID to the console using this example script:
  • <script>
       var transactionId =
         '<?php echo $order->get_order_number(); ?>';
       console.log('transactionId: ' + transactionId);
    </script>

And there you have it! Your local play area where you can practice with Tag Management and JavaScript. Enjoy coding and practicing!

In case you have questions or comments with regards to this tutorial, feel free to reach out on LinkedIn

  • Was this article helpful?