Skip to main content
All CollectionsIntegrationsOther Integrations
Installation Guide: Google Tag Manager
Installation Guide: Google Tag Manager
Updated over a month ago

This guide will help you quickly set up Google Tag Manager and implement Retention’s Grow and Reclaim scripts.

The following topics will be covered:

  • Setting up a Google Tag Manager account

  • Where to find your Retention scripts

  • Implementing Grow

    • Collection Script

    • Revenue Tracking Script

    • Suppression Script

  • Implementing Reclaim

    • Viewed Product & Add to Cart Scripts

    • Checkout Started Script (For Klaviyo merchants only)

  • Setting up Collection Rules

    • Implementing a Base Script

    • Delayed Collection Triggers (Timers & Page views)


How to set up a Google Tag Manager account

If you don't have a Google Tag Manager account yet, please refer to these straightforward instructions from Google to set up your account. Make sure to complete this step before moving on.


Where to find your Retention.com scripts

1. From your Retention.com Dashboard, click Code Script. Then, click View Your Script.

2. Check the box next to the script you want to install, and then click Copy Code </>. You’ll see a green box in the top right-hand corner telling you the code was copied to your clipboard.

Remember: You can’t check multiple boxes for scripts or you will get an error message. You can only copy one at a time.


Implementing Grow

Install the Collection Script

1. Log in to Google Tag Manager. Click New Tag.

2. You can give the tag a title at the top. Click the pencil image in the Tag Configuration section.

3. Click Custom HTML under Custom.

4. From your Retention dashboard, find and copy the "Collection" snippet from the "Code Script" section.

5. Paste the Collection script into the HTML box.

6. In the Tag Configuration container under "Advanced Settings", please ensure the "Tag Firing Options" is set to "Once Per Page".

7. Next you will need to choose a trigger at the bottom to make the tag fire. Click the pencil icon in the Triggering section.

8. Choose a trigger, such as page views on all pages.

⚠️ Note for SPA/React sites: You should set your Triggers for All Pages as well as All History Events:

9. Once you have chosen a trigger, click Save in the top right.


Install the Revenue Tracking Script

The purpose of this script is to capture order information for new Grow contacts that land on your site. This script is typically used on the order status page to track the success of these contacts. Once the data is collected, the dashboard will display the week-over-week success of Grow contacts from Retention.com.

1. Log in to Google Tag Manager. Click New Tag.

2. Give the tag a relevant title at the top (Recommended practice is to include Retention and the name of the script). Click the pencil image in the Tag Configuration section.

3. Click Custom HTML under Custom.

4. From your Retention dashboard, find and copy the "Revenue Tracking" snippet from the "Code Script" section and paste it into the tag HTML.

You are required to update the highlighted parameters in the code with the appropriate values from your Google Tag Manager data layer.

🔑 We require dynamic data for the following fields:

  • order_number

  • order_amount

  • order_email

5. Next, you will need to choose a trigger to make the tag fire. Click the pencil icon in the Triggering section.

6. Click on the "+" on the right of the page to create a new trigger

7. Give the trigger a relevant title at the top, then click the pencil image in the Tag Configuration section.

8. Select "Custom Event" from the Other triggers list.

9. Fill in the Event Name field with the event thats linked to a customer successfully purchasing from your site. This event will also have the data required for the Revenue Tracking Script from Step 4 above.

👀 If you are having trouble determining what event to use or how to find an event name, please use the Google Tag Manager "preview" or "debug" mode. For more information please click here.

10. Save the new trigger and tag.


Install the Suppression Script

The suppression script excludes contacts actively subscribing to your mailing list through website forms or popups. Adding this script will prevent duplicate entries and ensure you avoid paying for contacts who naturally opt in.

If your site does not contain any forms(popup, newsletter, etc) where users can enter their email address to opt in to your mailing list, you can skip this section!

1. Log in to Google Tag Manager. Click New Tag.

2. Give the tag a relevant title at the top (Recommended practice is to include Retention and the name of the script). Click the pencil image in the Tag Configuration section.

3. Click Custom HTML under Custom.

4. From your Retention dashboard, find and copy the "Suppression" snippet from the "Code Script" section.

🔑 Optional: If you have access to the user's email entered on the site, you can pass it into our Suppression function using the following function call instead:

geq.suppress(emailEntered); // "emailEntered" is a string variable

5. In the Tag Configuration container under "Advanced Settings", please ensure the "Tag Firing Options" is set to "Once Per Event".

🚨 Each form or popup on your website will require its own unique trigger for this tag. Make sure to create a separate trigger for each form and configure it to activate only upon successful form submission before moving on to the next step.

6. Click the Triggering box at the bottom and select the triggers that pertain to this tag.

7. Click Save.


Implementing Reclaim

🚨 If you are not using our Grow product, please make sure to set up a tag for our base script before adding the Reclaim scripts. You can find the instructions for setting up the base script below.

You’ll need to use variables available in GTM to implement the Reclaim scripts. If you're unsure which variables to use or how to locate them, try using Google Tag Manager's 'preview' or 'debug' mode - the variables will be associated with certain 'events'. For more details, click here.

Install 'Viewed Product Reclaim' Script

1. Log in to Google Tag Manager. Click New Tag.

2. Give the tag a relevant title at the top (Recommended practice is to include Retention and the name of the script). Click the pencil image in the Tag Configuration section.

3. Click Custom HTML under Custom.

4. Copy and paste the script below into the HTML box.

Note - You will be required to update the "vpitem" variable in the code below with all the appropriate product information.

The following fields are recommended*:

  • Name of Product

  • Price

  • ProductID

  • Categories (if applicable)

  • ImageURL

  • Brand (if applicable)

*Please add/remove as required.

The Google Tag Manager preview tool might be beneficial in retrieving dynamic product information from your product pages.

<script type="text/javascript">
var vpitem = {
productID: {{update_with_value}},
productName: {{update_with_value}},
imageURL: {{update_with_value}},
price: {{update_with_value}},
url: window.location.href,
brand: {{update_with_value}},
hostname: {{Page Hostname}},
};

if (window.location.href.includes('vge=true')) {
console.log('Viewed Product Reclaim', vpitem);
}

if (typeof geq !== 'undefined' && typeof geq.event === 'function') {
geq.event('Viewed Product Reclaim', vpitem);
}

</script>

5. Under "Advanced Settings", locate "Tag Sequencing". Select the checkbox for "Fire a tag before __ fires".

🔔 If you are using our Grow product, please select the "Collection Script" tag as the prerequisite tag to fire before this tag. If you are not using the Grow product, select the "Retention Base Script" that you previously created in this section.

For instructions on how to set up the Retention Base Script tag, please refer to the section in this guide below.

6. You will need to choose a trigger at the bottom to make the tag fire. Click the pencil icon in the Triggering section.

7. Click on the "+" on the right of the page to create a new trigger

8. Give the trigger a relevant title at the top, then click the pencil image in the Tag Configuration section.

9. Select "Window Loaded" from the Page View list of triggers

10. Choose the "Some Window Loaded Events" option and set up specific triggers that activate when a user visits your product page.

Typically, product pages are identifiable by specific terms like "product" in their URL or Page Path, setting them apart from other pages on your website. Your aim is to pinpoint and utilize these unique identifiers to accurately target your product pages.

In the screenshot below, two different triggers, Page Path and Page Hostname, are used to validate if a user has landed on a product page.

The above is simply an example of how to trigger this tag—you can also use a custom event or any other trigger type to activate it.

11. Save your trigger and your tag. The script has now been added and will be triggered whenever a user lands on a product page. You can verify if the script is functioning correctly via the Google Tag Manager Preview Tool.


Install 'Add to Cart Reclaim' Script

1. Log in to Google Tag Manager. Click New Tag.

2. Give the tag a relevant title at the top (Recommended practice is to include Retention and the name of the script). Click the pencil image in the Tag Configuration section.

3. Click Custom HTML under Custom.

4. Copy and paste the script below into the HTML box.

Note - You will be required to update the "atcitem" variable in the code below with all the appropriate product information.

The following fields are recommended*:

  • Name of Product

  • Price

  • ProductID

  • Categories (if applicable)

  • ImageURL

  • Brand (if applicable)

*Please add/remove as required.

The Google Tag Manager preview tool might be beneficial in retrieving dynamic product information from your product pages.

<script type="text/javascript">
var atcitem = {
productID: {{update_with_value}},
productName: {{update_with_value}},
imageURL: {{update_with_value}},
price: {{update_with_value}},
url: window.location.href,
brand: {{update_with_value}},
hostname: {{Page Hostname}},
};

if (window.location.href.includes('vge=true')) {
console.log('Add to Cart Item:', atcitem);
}

if (typeof geq !== 'undefined' && typeof geq.addToCart === 'function') {
geq.addToCart(atcitem);
}

</script>


5. Under "Advanced Settings", locate "Tag Sequencing". Select the checkbox for "Fire a tag before __ fires".

🔔 If you are using our Grow product, please select the "Collection Script" tag as the prerequisite tag to fire before this tag. If you are not using the Grow product, select the "Retention Base Script" that you previously created in this section.

For instructions on how to set up the Retention Base Script tag, please refer to the section in this guide below.

6. You will then need to choose a trigger at the bottom to make the tag fire. Click the pencil icon in the Triggering section.

7. Click on the "+" on the right of the page to create a new trigger

8. Give the trigger a relevant title at the top, then click the pencil image in the Tag Configuration section.

9. Select "Custom Event" from the "Other" list of triggers.

10. Fill in the Event Name field with the event thats linked to clicking on the "add to cart" button on your product pages. You can additional trigger features to ensure this code fires on product pages only.

If you are having trouble determining what event to use or how to find an event name, please use the Google Tag Manager "preview" or "debug" mode. For more information please click here.

11. Save your trigger and your tag. The script has now been added and will be triggered whenever a user adds an item to their cart from a product page. You can verify if this script is functioning correctly via the Google Tag Manager Preview Tool.


Install 'Checkout Started Reclaim' Script (Available for certain ESPs)

1. Log in to Google Tag Manager. Click New Tag.

2. Give the tag a relevant title at the top (Recommended practice is to include Retention and the name of the script). Click the pencil image in the Tag Configuration section.

3. Click Custom HTML under Custom.

4. Copy and paste the script below into the HTML box.

Please review the code thoroughly, as it contains comments with actionable steps that must be completed for the code to function correctly.

// Step 1: Copy and Paste the function below - no modifications needed

function createCheckoutAbandonmentPayload(cartId, cartAmount, currency, lineItems, checkoutUrl) {
return {
cart_id: cartId || "",
cart_amount: cartAmount || "",
currency: currency || "",
extra: {
line_items: lineItems.map(function(item) {
var lineItem = {};

// Assign properties if they exist
if (item.Quantity) lineItem.quantity = item.Quantity;
if (item.RowTotal) lineItem.line_price = item.RowTotal;

var product = {};
if (item.ProductName) product.title = item.ProductName;
if (item.ProductID) product.id = item.ProductID;
if (item.ProductURL) product.url = item.ProductURL;

if (item.ItemPrice) product.price = { amount: item.ItemPrice, currencyCode: currency || "" };
if (item.SKU) product.sku = item.SKU;
if (item.ImageURL) product.image = { src: item.ImageURL };

// Add the product only if it has data
if (Object.keys(product).length > 0) lineItem.product = product;

return lineItem;
}),
checkout_url: checkoutUrl || ""
}
};
}

// Step 2: Build the necessary variables required for the payload
// *NOTE* You are required to assign the variable values to the appropriate dynamic data from your platform

var cartId = {{ cart_id_value }}; // Replace with actual cart ID
var cartAmount = {{ cart_amount_value }}; // Replace with actual cart amount
var currency = "USD"; // Replace with actual currency code if different
var checkoutUrl = {{ checkout_url_value }}; // Replace with actual checkout URL
var lineItems = {{ all_cart_items }}; // Replace with actual cart items

// The "lineItems" variable above will contain all the products in the users cart
// *NOTE* The formatting for this variable is very specific - please ensure its an array of objects with the following layout and values:

[
{
"ProductID": "string", // The unique identifier for the product (e.g., "24757")
"SKU": "string", // The stock keeping unit (e.g., "LUX-SAT-PNL-BURG")
"ProductName": "string", // The name of the product (e.g., "*FR* LUXE Satin Drape Panel by Eastern Mills")
"Quantity": number, // The quantity of the product (e.g., 1)
"ItemPrice": number, // The price per item (e.g., 21.99)
"RowTotal": "string", // The total price for the row (e.g., "21.99")
"ProductURL": "string", // The URL for the product (e.g., "https://www.eventdecordirect.com/catalog/...")
"ImageURL": "string", // The URL for the product image (e.g., "https://static.eventdecordirect.com/images/...")
"ProductCategories": ["string"] // An array of categories the product belongs to (e.g., ["Event Curtains", "Drapes"])
},
// Separate products by commas
]

// Step 3: Create the payload with the variables above and call the Retention function
var payload = createCheckoutAbandonmentPayload(cartId, cartAmount, currency, lineItems, checkoutUrl);

if (typeof geq !== 'undefined' && typeof geq.event === 'function') {
geq.event("Checkout Started Reclaim", payload);
}

5. Under "Advanced Settings", locate "Tag Sequencing". Select the checkbox for "Fire a tag before __ fires".

🔔 If you are using our Grow product, please select the "Collection Script" tag as the prerequisite tag to fire before this tag. If you are not using the Grow product, select the "Retention Base Script" that you previously created in this section.

For instructions on how to set up the Retention Base Script tag, please refer to the section in this guide below.

6. You will then need to choose a trigger at the bottom to make the tag fire. Click the pencil icon in the Triggering section.

7. Click on the "+" on the right of the page to create a new trigger

8. Give the trigger a relevant title at the top, then click the pencil image in the Tag Configuration section.

9. Select "Custom Event" from the "Other" list of triggers.

10. Fill in the Event Name field with the event thats linked to clicking on the "checkout" button on your site. You can additional trigger features to ensure this code fires on product pages only.

If you are having trouble determining what event to use or how to find an event name, please use the Google Tag Manager "preview" or "debug" mode. For more information please click here.


Implementing the Retention Base Script


There are two main scenarios where implementing our base script as a standalone tag is necessary:

  1. Using Reclaim Without the Grow Product: If you are only signed up for Reclaim and not using our Grow product, the base script must be implemented separately as it needs to run before any Reclaim code scripts.

  2. Applying collection rules for the Grow Product: If you are using our Grow product and wish to apply custom rules for capturing new contacts (e.g., triggering scripts after a specific number of page views or after a certain duration on a page), the base script should be set up accordingly.

Below, we provide step-by-step instructions on how to add the base script and implement collection rules.

Install the Retention 'Base Script'

  1. You can locate the base script by going to the Retention Dashboard, from the left navigation menu select "Code Script", click "view your Script" in the Top right hand menu.

  2. Select the checkbox next to "Collection." The "Base Script" is the first script located above the line <script>geq.page()</script>. Copy it to your clipboard.

  3. Log in to Google Tag Manager. Click New Tag.

  4. You can give the tag a title at the top then click the pencil image in the Tag Configuration section.

  5. Click Custom HTML under Custom.

  6. Paste the Base Script into the HTML box.

  7. In the Tag Configuration container under "Advanced Settings", please ensure the "Tag Firing Options" is set to "Once Per Page".

  8. Add a Trigger to fire this Tag on All Page Views. This script will not collect new contacts.

9. Save the tag and test to ensure the script is loading on every page your site.



Implementing Collection Rules

Collection rules are settings that determine when data collection should occur for website visitors. By default, data is collected after a visitor views one page, but these parameters can be adjusted to better identify high-quality contacts.

For example, you can set rules to collect data after a specific number of page views or based on the time spent on a page.

🚨 Please ensure you have installed the "Retention Base Script" before moving on to the next section.

Install the "Collection" Script

1. Log in to Google Tag Manager. Click New Tag.

2. Give the tag a relevant title at the top (Recommended practice is to include Retention and the name of the script). Click the pencil image in the Tag Configuration section.

3. Click Custom HTML under Custom.

4. Copy and paste the script below into the HTML box.

<script>geq.page()</script>

5. Under "Advanced Settings", locate "Tag Sequencing". Select the checkbox for "Fire a tag before __ fires". Additionally, ensure the "Tag Firing options" is set to "Once per page".

6. Assign the appropriate triggers to the tag to ensure it activates when Retention needs to collect new contacts. This could include settings such as firing on every page, specific pages, or after a certain number of page views, depending on your requirements.

7. Save the tag



How to Exclude Traffic by Referral Source

1. To exclude traffic by referral source, start by creating a new trigger. Click the plus sign in Triggering.

2. Click the plus sign.

3. Name it “Exclude” and then the source name (ex. Exclude Taboola). Click in the Trigger Configuration box. Choose Custom Event as the trigger type.

4. Give the event a name (Taboola). Change it to Some Custom Events and then choose Referrer, does not contain and then the name of the source, which would be Taboola in this example. Then, click Save at the top.

5. Once the trigger is saved, click New Tag.

6. Name the tag “Exclude Taboola,” or whatever the source name is. Click in the Tag Configuration box, and choose Custom HTML.

7. Locate the tag for the "Collection Script" and click in the Triggering box.

8. Choose the Exclude Taboola trigger you created, and click Save.

Collect contacts after X Page Views


To fire a trigger after a certain number of page views, you’ll need to first create a new variable.

1. Click Variables and then New.

2. Click in the Variable Configuration box, and choose 1st Party Cookie.

3. Name the variable Cookie - Page Count at the top and the Cookie Name Page Count. Then, under Format Value, put Convert null to as zero and Convert undefined to as zero, and click Save.

4. You’ll then need to create a Custom HTML Tag to read the value in the variable. To do that, go through the Tag steps again: New Tag > Tag Configuration > Custom HTML. Paste the HTML code you create that includes the variable and number of page views you set in the box.

5. You’ll need to add a trigger for the Tag to fire, so click the Triggering box > plus sign > Trigger Configuration > Page View.

6. Name the trigger (ex. Page View Trigger). Select Some Page Views. Then, set these conditions:

Page Count > greater than > 1 (adjust the variable to whatever you used and the number to how many pages you want them to view before it fires).

Remember: The number used here needs to match the one in the custom HTML code you used.

7. Click Save.

8. Locate the tag for the "Collection Script" and click on the "Triggering" box.

9. Select the "Page View Trigger" you created earlier as the trigger for this tag.

10. Save the tag.

Collect contacts after X Seconds on a Page

  1. Click Triggers then click New to create a new trigger.

  2. Give the tag an appropriate name - in this case we used "30 Second - Timer".

  3. Set up the trigger with the following settings:
    - Trigger type should be Timer
    - Set up the interval in ms to your desired time
    - Set up the conditions for the trigger to something generic to ensure it runs on every page. Example: Page URL contains your website name.

  4. Save the trigger.

  5. Locate the "Collection Script" tag and set the trigger to the timer you created in the steps above.


Did this answer your question?