Set Up a Web Container in Google Tag Manager

Setting up a client-side Google Tag Manager (GTM) container on your website lets you track tags directly in your website's code. Plus, it makes it simpler to handle consent, so it's easier to follow the rules and respect what users want with their data.

However, potential limitations like browser-based privacy measures or ad-blocking extensions can impact data collection accuracy. Implementing server-side tagging can help mitigate these client-side limitations. 

Setting up a client-side GTM container enhances the reliability and consistency of conversion metrics. However, the initial setup process might be a bit more involved and require some extra resources. If you're unsure, reach out to your developers and give your setup a good test run to ensure it's working as best as it can.

Before you start

Set up your Google tools

You'll need to set up several Google tools to create a client-side GTM container. Here's what you'll need:

• A GTM account with a web container. You'll need to copy and record its container ID, formatted as GTM-XXXXXX. Need help with setup? Here's a great place to start.
• A Google Analytics account with your website URL as the web property. You'll need to copy and record your measurement ID, formatted as G-XXXXXXXXXX. Learn how to set up Google Analytics for your site.

Create your website

If you're not comfortable with coding or don't have access to your website's backend, ask a developer for help.

You can set up your website using a website builder, content management system (CMS), or custom coding. Just remember to choose a method that lets you inject code or has native GTM capabilities, based on your comfort level and expertise
You'll also need to copy and record your website's URL. Your URL should start with http:// or https://.

1. Add the tag template to your Google Tag Manager

1. In Google Tag Manager, select your web container to open its workspace.
2. In the left-hand menu, select Templates and choose Search Gallery for tag templates.
3. Choose Reddit Pixel and select Add to workspace. 
   Make sure you choose the template by Reddit and not one by a third-party tag like Stape.

   
4. When prompted, select Add.

2. Set up triggers

Before creating tags, set up a Google Tag Manager trigger for each conversion event you'd like to share. There are several types of triggers you can create:

All these methods require some technical skill and may require access to your website's backend. If that's not in your wheelhouse, ask the right person on your team for help.

• Custom Event (recommended): Pass data from your data layer to dynamically populate event metadata and match keys for tags. Learn how to set up your data layer for the Reddit Pixel.
• Page View: Set up page view triggers and specify your URL path conditions for when you expect the event to occur. We recommend creating JavaScript variables to pass event metadata and match keys as variables for your tags.
• Form Submission: Share conversion events when a user submits a form on your site, like your lead or sign-up form. We recommend creating JavaScript variables to pass event metadata and match keys as variables for your tags.
• Click: Share parameters when a user interacts with an element on your site, like clicking a button to add an item to their cart. We recommend creating JavaScript variables to pass event metadata and match keys as variables for your tags.

(Optional) Create JavaScript variables

Creating JavaScript variables in GTM lets you pass parameters for event metadata and match keys. This is recommended if you're not using custom event triggers.

This requires some technical skill. If that's not in your wheelhouse, ask the right person on your team for help.

1. In the workspace of your container, select Variables in the navigation menu and select New. 
2. Set a name for the variable. We recommend following the <Parameter> - JS format.
3. For the variable configuration, select Javascript Variable. If there are multiple fields that may contain the value you're looking for, choose Custom JavaScript instead.
4. Provide the global variable name or JavaScript code to return the data from your site.
5. Save your changes to create the variable.

Set up triggers

Do you learn better by watching? Watch one of our video walkthroughs:

• View Content
• Add to Cart
• Custom Event

Before creating your tags, create a Google Tag Manager trigger for each conversion event you'd like to share.

1. In the workspace of your container, select Triggers in the navigation menu and select New.
2. Set a name for the trigger. We recommend following the <Conversion name> format.
3. For trigger type, choose a trigger type and set when the trigger should fire.

   Conversion event	Best	Better	Good
   Page Visit	PageVisit custom event
   View Content	ViewContent custom event	Page view	Button clicks
   Search	Search custom event	Form submission	Button clicks
   Add To Cart	AddToCart custom event	Form submission	Button clicks
   Add To Wishlist	AddToWishlist custom event	Form submission	Button clicks
   Purchase	Purchase custom event	Page view	Form submission
   Lead	Lead custom event	Form submission	Page view
   Sign Up	SignUp custom event	Form submission	Page view
   Custom	CustomEvent custom event

4. Save your changes to create the trigger.
   Reference

   Trigger	Trigger type	Trigger fire	Event name	Recommended condition for built-in variables
   Custom Event	Custom Event	Some custom events	your-data-layer-event	Event equals your-data-layer-event
   Form Submission	Form submission	Some forms	N/A	Form Classes contains your-form-class
   Page View	Initialization	Some initialization events	N/A	Page Path contains /your-path/
   Click	Click - Just Clicks (for only links) Click - All elements (for any element)	Some clicks	N/A	Click Classes contains your-button-class Click ID equals your-button-id

3. Install your web container onto your website

If you're setting up the Reddit Pixel and Conversions API (CAPI) together, see our server container instructions.

This step is only required if you don't have a native tool in your server solution. If you have a native tool, follow the steps that it provides. If you're not experienced with code or don't have access to your website, you may need to ask a developer for help.

If your website solution doesn't have tooling to set up GTM or Google Analytics, you can manually set this up on your website.

At the beginning of the <head> tag, add the GTM script:

<script>
  (function(w, d, s, l, i) {
    w[l] = w[l] || [];
    w[l].push({
      'gtm.start': new Date().getTime(),
      event: 'gtm.js'
    });

    var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s),
        dl = l !== 'dataLayer' ? '&l=' + l : '';
    j.async = true;
    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
    f.parentNode.insertBefore(j, f);
  })(window, document, 'script', 'dataLayer', '[Web container ID]');
</script>

After the <head> tag but before <body> tag, add the GTM <noscript>:

<!-- Google Tag Manager (noscript) -->
<noscript>
   <iframe src="https://www.googletagmanager.com/ns.html?id=[Web container ID]" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->

4. Set up conversion events

You can easily share conversion events with the Reddit Pixel by tagging them with your GTM account. Here's how to do it. 

5. Publish your container

When finished with your changes, select Submit or Publish to make your container live.