Set Up the Data Layer for Google Tag Manager

A data layer is a Javascript object that transfers information from your website to your Google Tag Manager (GTM) container. By setting up keys and values in the data layer, you can dynamically populate event metadata and match keys for tags. This ensures accurate conversion events.

If you'd prefer to reference a global variable on your site instead, you can create a JavaScript variable instead. While using the data layer lets you structure and standardize data management, JavaScript variables can be a simpler alternative for straightforward use cases. Choose the method that best fits your needs and technical expertise.

1. Add data layer code to your web page

Create a script to pass data to the data layer: 

<script>
window.dataLayer = window.dataLayer || [];
</script>

2. Set up data layer variables

Add the event name and extra parameters that you'd like to pass to the data layer. We recommend passing email for better attribution and conversion ID for proper event deduplication if using both Reddit Pixel and Conversions API. If you're setting up Add to Cart or Purchase events, we also highly recommend sharing product ID, product name, and product category. 

Reference

Event values

Conversion event	Value
Page Visit	‘PageVisit'
View Content	‘ViewContent'
Search	‘Search'
Add To Cart	‘AddToCart'
Add To Wishlist	‘AddToWishlist'
Purchase	‘Purchase'
Lead	‘Lead'
Sign Up	‘SignUp'
Custom	‘CustomEvent'

Parameters

The suggested values are for Shopify sites. If you're using a different platform, your values may look different. To figure out the right values to provide, look at the documentation of your website or ask a developer for help.

Key	Suggested values
event	‘AddToCart'
conversionID	event.id
email	customer.email
phoneNumber	event.data.checkout.phone
quantity	event.data?.cartLine?.quantity
transactionValue	event.data?.cartLine?.cost?.totalAmount?.amount
currency	event.data?.cartLine?.cost?.totalAmount?.currencyCode
productID	event.data?.productVariant?.sku
productName	event.data?.productVariant?.title
productCategory	event.data?.product?.title

Examples

The following examples are for Shopify sites. If you're using a different platform, your code may look different. To figure out the right values to send to the data layer, look at the documentation of your website or ask a developer for help.

Purchase

analytics.subscribe("checkout_completed", (event) => {
    window.dataLayer.push({
        event: "Purchase",

        // Match keys
        conversionId: checkout.order.id,
        email: checkout.email,
        phoneNumber: checkout.phone,

        // Event metadata
        currency: event.data?.checkout?.currencyCode,
        transactionValue: event.data?.checkout?.totalPrice?.amount,

        product: event.data?.checkout?.lineItems?.map(item => ({
            ID: item?.variant?.sku,
            category: item?.title,
            name: item?.variant?.title
        }))
    });
});

AddToCart

analytics.subscribe("product_added_to_cart", (event) => {
    window.dataLayer.push({
        event: 'AddToCart',

        // Event metadata
        itemCount: event.data?.cartLine?.quantity,
        transactionValue: event.data?.cartLine?.cost?.totalAmount?.amount,
        currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,
        productID: event.data?.cartLine?.merchandise?.sku,
        productCategory: event.data?.cartLine?.merchandise?.product?.untranslatedTitle,
        productName: event.data?.cartLine?.merchandise?.untranslatedTitle,
        });
});

Page Visit

analytics.subscribe("page_viewed", (event) => {
    window.dataLayer.push({
        event: "PageVisit",
        email: event.data.checkout.email,
        phoneNumber: event.data.checkout.phone,
    });
});

Search

analytics.subscribe("search_submitted", (event) => {
    window.dataLayer.push({
        event: "Search"
    });
});

ViewContent

analytics.subscribe("collection_viewed", (event) => {
    window.dataLayer.push({
        event: "ViewContent"
    });
});

analytics.subscribe("product_viewed", (event) => {
    console.log("ViewContent");
    console.log(event);
    window.dataLayer.push({
        event: "ViewContent"
    });
});

2. Create variables in Google Tag Manager

1. In the workspace of your web container, select Variables in the navigation menu and select New. 
2. Set a name for the variable. We recommend setting it to the name of your data layer variable.
3. For variable configuration, choose data layer variable.
4. Provide the data layer variable name. For example, for key: value, you would set this to key. This name must exactly match the key name for your variable (e.g., key, not Key).
5. (Optional) If you added dots in your key name (e.g., product.title), set the data layer version to Version 1. Otherwise, keep this on Version 2.
6. (Optional) Set a default value. If the variable you pass doesn't have a value, this will allow the event to still be shared.
7. Save your changes to create your variable.

3. Add the variables to your Pixel tag

Finish the setup by adding your variables to your Pixel tag. This will dynamically populate your parameters and ensure accurate conversion events.

You can add your variable to your field by using Add variable or setting the field to {{[Your variable name]}}.