Google Tag Manager SDK

Google Tag Manager (GTM) allows for rule-based configuration and insertion of dynamic variables to pass data from your website to Attentive.

Within Google Tag Manager, you have a few different objects to leverage:

  • Tags – code that fires
  • Triggers – rules that dictate when a tag should or shouldn’t be fired

  • Variables – dynamic elements that insert data when tags are triggered. Variables come in multiple forms:

    • Pulled from pre-configured dataLayer
    • Configured to leverage elements on the page
    • Custom JavaScript

The great thing about GTM is that you’ve likely already configured it for an existing partner integration. In addition, it can be managed by a non-technical team, so implementation won’t be blocked by the need to loop in a dev team.

Attentive can leverage this first-party data within our own configuration. The easiest method is for us to work backwards through existing configurations to see what's being used for other customers, mirroring variable configurations into our code format. If that's not possible, there's a guide below for how to do this yourself.

Install the base tag

We already have a guide for integrating Attentive with GTM here.

Install event tags for product views

  1. Go to tagmanager.google.com and open the relevant container/workspace for your business.
  2. Navigate to Tags on the left-hand side of the page.
  3. Click New.
  4. On the top-left, replace Untitled Tag with Attentive - Product Pages.
  5. Click the Tag Configuration area of the screen.
  6. Select Custom HTML in the tag type list.
  7. Insert the following snippet of code.
    Note: We’ll replace [placeholder]with variables later. 
<script>
window.attentive.analytics.productView(
    {
        items:[
            {
                productId: '[placeholder]',
                productVariantId: '[placeholder]',
                name: '[placeholder]',
                productImage: '[placeholder]',
                category: [placeholder],
                price: {
                    value: '[placeholder]',
                    currency: 'USD',
                },
                quantity: 1,
            }
        ], 
        user: {
            phone: '[placeholder]'
        }
    }
)
</script>
  1. Click Save.
    You’re prompted to either Save Tag or Add Trigger.
  2. Click Add Trigger.
  3. Select the relevant trigger for this event tag.
    Note: Ideally, you’ll have a Product Page trigger already configured. If you don’t, we can offer support to help build the trigger in GTM. This process isn’t very complex. It involves finding a value/object in the dataLayer that indicates the page is a product page.
  4. Click Save.
  5. Click Variables on the left-hand side of the page, and take note of the names of those that match up to the code snippet in step 7.
  6. Go back to the tag that you’ve configured, replacing [placeholder]with {{Variable Name}}.
    Note: Similar to step 10, you likely already have variables created for your existing third-party partners. If the variable we need doesn’t exist, you can create a new one by finding the missing data point on-site and then creating the variable within GTM. If you require assistance with this, your Attentive CSM can help.

Sample of what the final code snippet could look like:

<script>
window.attentive.analytics.productView(
    {
        items:[
            {
                productId: '{{Product ID}}',
                productVariantId: '{{Product Variant ID}}',
                name: '{{Product Name}}',
                productImage: '{{Image URL}}',
                category: '{{Category}}',
                price: {
                    value: '{{Product Price}}',
                    currency: 'USD',
                },
                quantity: 1,
            }
        ],
        user: {
            phone: '{{User Phone}}'
        }
    }
)
</script>

Install event tags for add to cart or purchase events

Above we covered how to configure for product views. You can follow the same configuration flow here, with the difference being how each tag is triggered.

Examples:

  • Configure a trigger to only fire purchase events on your order confirmation page.
  • Configure a trigger to only fire add to cart events when someone adds an item to their cart.

Following are snippets of code for add to cart and purchase events.

Add to cart

<script>
window.attentive.analytics.addToCart(
    {
        items:[
            {
            productId: '[placeholder]',
            productVariantId: '[placeholder]',
            name: '[placeholder]',
            productImage: '[placeholder]',
            category: '[placeholder]',
            price: {
                value: [placeholder],
                currency: 'USD',
            },
            quantity: 1,
            }
        ],
        cart: {
            cartId: '[placeholder]',
            cartCoupon: '[placeholder]',
        },
        user: {
            phone: '[placeholder]'
        }
    }
)
</script>

Purchase

<script>
window.attentive.analytics.purchase(
    {
        items:[
            {
            productId: '[placeholder]',
            productVariantId: '[placeholder]',
            name: '[placeholder]',
            productImage: '[placeholder]',
            category: '[placeholder]',
            price: {
            value: '[placeholder]',
            currency: '[placeholder]'
            },
            quantity: 1,
         }
        ],
        cart: {
            cartId: '[placeholder]',
            cartCoupon: '[placeholder]',
        },
        order: {
            orderId: '[placeholder]'
        },
        user: {
            phone: '[placeholder]',
            email: '[placeholder]',
        }
    }
)
</script>