How to QA Shopify Store with GTM Container In Preview Mode

See how to verify your new tags and variables work as expected.

If you have not followed our complete guides yet for the complete setup and install then please be sure to read these before reviewing this article:

Once you've successfully imported our pre-built container to your GTM account, you will want to do the following:

  1. Enable Preview Mode in GTM
  2. Determine what tags you want to fire via GTM: AdWords remarketing (?), Facebook (?), Google Analytics (?), other marketing tags (?). Based on the answers to these then move on to the next step where you'll walk through each page. 
  3. Ensure you've followed the guides for AdWords Remarketing, Conversions, and Facebook if needed
  4. Page by Page QA: Collection Pages
  5. Page by Page QA: Product Pages
  6. Page by Page QA: Add to Cart
  7. Page by Page QA: View Cart
  8. Page by Page QA: Thank You Page

Enable Preview Mode in GTM

Inside of GTM, after you've imported our container, click in Preview in the top right-hand corner of the page.

Page by Page QA

Now that your GTM account is in preview mode, you can go to your website and verify each page fires successfully by viewing the browser console at the bottom of the screen:

 

Pages you need to review:

  1. Collection page
  2. Product page
  3. Add to Cart
  4. View Cart
  5. Checkout (if on Shopify Plus)
  6. Thank You Page

Collection Page

You should see product impression data in the dataLayer that looks something like this:

Collection page dataLayer

Notice the collectionView event on the left side of the preview mode and the dataLayer content on the right screen. 

Product Page

This page should have its own productDetailView event that looks like this:

ProductDetailView dataLayer

If any key dataLayer variables are empty like name, productId, or price then there is likely a conflict with your existing theme. 

Add to Cart

After you add to cart on your product pages you should see another custom event called addToCart that looks like the below:

Add to Cart dataLayer

View Cart/Checkout

If you don't have a standalone cart and rely on just a mini-cart only then this might not be a critical page. Here is a cart page completed with all dataLayer data required:

Checkout Page dataLayer

Thank You Page

The last page to test is the thank you page. In order to properly test this, you will need to place a test order (not view an existing order) and validate that all order data exists (revenue, order ID, etc). 

Be sure to double-check that you completed step 3 of the setup process by copying in the dataLayer into your checkout scripts:

Checkout Page Script Settings

That's it!

 

Back to Top 🔝