Wednesday, November 22, 2023
HomeManagementPublish a site where you can easily try Google Tag Manager!

Publish a site where you can easily try Google Tag Manager!

Triggered by the appearance of GA4 and Google tags, the number of opportunities to hear keywords for “Google Tag Manager” has increased recently. With the number of detailed updates related to tags in GA4 increasing, there are more times when I want to confirm the behavior of this function. On the other hand, it is risky to implement on a site in operation just to check the behavior, and there are not many sites that can be easily tested.

Therefore, SEM Technology has opened the “GTM Trial Shop”, a site where you can easily try out the behavior of Google Tag Manager.

Disadvantages of studying Google Tag Manager

In recent years, the amount of information to refer to when studying Google Tag Manager has increased. For example, my book Introduction to Technology for Digital Marketers is one of them.

On the other hand, the current situation is that there are few places where input information can be output, that is, environments where knowledge can be practiced and put into use. There is also a reason for the idea that “people who have their own site should do it on their own site”. However, there is a risk in modifying the analysis tools and Google Tag Manager that are already in operation. Furthermore, if you want to check with some data layer variables added, you will need to modify the site side, which will take time.

In summary, I can say that even if you really want to try Google Tag Manager, it is difficult to try it casually .

About the newly launched GTM Trial Shop

The GTM Trial Shop launched this time is a site where you can easily try out Google Tag Manager. Access the settings page of this site, enter the Google Tag Manager container ID, and save it. It is stored in storage, and the specified Google Tag Manager container will be loaded when you load the page of this site from now on.The entered container ID is only stored and used in the browser’s local storage, so this site will be loaded. You don’t have to worry about other users using it.

In other words, create a new Google Tag Manager container, set up the GTM Trial Shop, and you have your very own GTM test site.

Furthermore, since it supports not only GTM but also Google tags (old gtag), it can be used to check the behavior of the new Google tags.

The page structure mimics an EC site

This site has a page structure that mimics a common EC site as much as possible. In particular,

  • Product category page
  • Search results page
  • Product detail page
  • Shopping cart (right sidebar only)
  • Payment information input screen
  • Purchase completion page

There are pages like These pages are made to look like real e-commerce sites, but they are actually built as static sites. Therefore, there is no need to test while thinking about what to do with the cancellation procedure. There is also a screen for inputting payment information and shipping address information, but you can proceed to the next step regardless of what information you enter, so you can test without trouble.

On the other hand, even if you perform the “add product to cart” operation, you do not actually add the product to the cart, so you need to be careful that the operation and behavior do not match.

Allows additional JavaScript to be executed

This site feature allows you to automatically install Google Tag Manager on your site as well as run additional JavaScript code on specific pages. For example, when trying to implement an EC site, there are many cases where you want to test with the transaction information output in the data layer for the purchase completion page.

By specifying the JavaScript code from “JavaScript code for individual pages” on the setting page of this site, you can execute the specified JavaScript on a specific page. The timing of execution is before loading Google Tag Manager, so it is the ideal timing to initialize the data layer variables (since only the data layer variables have already been initialized in the global area, the data layer variables need not be initialized).

Let’s use this function to implement JavaScript code to set data layer variables individually on the purchase completion page, product detail page, etc. But again, you should be aware that this site is a static site. In other words, there is no function to automatically output product information corresponding to the product you are actually browsing or the product you are purchasing, so you need to enter a completely fixed value (on the contrary, this is not for testing purposes. (It also means a lot of freedom.)

GTM Trial Shop site map

The page list of this site is listed in the “Pages” list in the global navigation, but I will write out the page list at the time of writing this article.

  • top page
  • Category page
  • Keyword search result page
  • Favorite product page
  • Product detail page
  • Payment information input page
  • Purchase completion page
  • Blog list page
  • blog post page
  • Inquiry form page
  • Inquiry completion page
  • About this site (static page)
  • Settings page


We hope that this project will be used by many people involved in Google Tag Manager, and for that reason, if you find this site useful, please recommend it to your colleagues and acquaintances.

Also, at the moment, we intend to have the minimum necessary functions, but there are still many contents that we would like to add. Since the development of this ” GTM Trial Shop ” is being developed in an open source project on Github, requests for additional functions can be submitted via Github Issue, and contributions to this project are also welcome. I would like to ask for your cooperation.


What is UI/UX?

What is LTV?

Leave a reply

Please enter your comment!
Please enter your name here

Recent Posts

Popular Posts

Most Popular

Recent Comments