Web Tracking Code

This document guides you step by step on how to add tracking code to a website to capture user data and send it to PangoCDP, including User Cookie info, User Activities, Traffic Source, and more.

Overview

PangoCDP provides the <Code tracking> snippet that you can embed into your website. Through this snippet, Pango can capture website data such as user cookie information, user interaction data (e.g. page views, clicks on elements with tracking events, and information about the user’s traffic source).

1. Create a Measurement ID in Google Analytics 4 (GA4)

Measurement ID is an identifier used in Google Analytics. To create one, follow the steps below:

Create a Measurement ID - See the instructions here
Copy the newly created Measurement ID to use in step Web Tracking Code

2. Create a Facebook Pixel

Create a Facebook Pixel - See the instructions here
Copy the Pixel ID to use in step - Web Tracking Code

3. Add the Pango tracking code to the website

Copy the code below and add it to your website <head> code </head>.

<script>window.dataLayer=window.dataLayer||[],dataLayer.push({measurementId:"MeasurementID",fbPixelId:"FacebookPixelId",orgId:"OrganizationID",enableGA4:!0,enableMetaPixel:!0,userId:"InternalUserId"}),function(b,d,e,a,g){b[a]=b[a]||[],b[a].push({"gtm.start":new Date().getTime(),event:"gtm.js"});var f=d.getElementsByTagName(e)[0],c=d.createElement(e);c.async=!0,c.src="https://www.googletagmanager.com/gtm.js?id="+g+("dataLayer"!=a?"&l="+a:""),f.parentNode.insertBefore(c,f)}(window,document,"script","dataLayer","GTM-M6MNVJG")</script>

Note: You need to update the following information:

Measurement ID (copied in step #1. Create a Measurement ID in GA4)
Facebook Pixel ID (copied in step #2. Create a Facebook Pixel)
Organization ID: This ID is provided by the Pango team
Internal User ID: The user ID on the website (e.g. phone number or email)

4. Event Tracking

Recommended events in Google Analytics 4

View the list of recommended events from Google Analytics 4 here

Enhanced E-Commerce

View the list of measurement events in Google Analytics 4 for e-commerce here

Client Tracking Events

select_item

Use this event to track when a user selects an item from a list. The select_item event should be sent with the selected item included in the parameters, as shown below.

dataLayer.push({
    'event': 'pangoTrack',
    'eventAction': 'select_item',
    item_list_id: "related_products",
    item_list_name: "Related products",
    ecommerce: {
        items: [{
            item_id: "SKU_12345",
            item_name: "Stan and Friends Tee",
            affiliation: "Google Merchandise Store",
            coupon: "SUMMER_FUN",
            currency: "USD",
            discount: 2.22,
            index: 0,
            item_brand: "Google",
            item_category: "Apparel",
            item_category2: "Adult",
            item_category3: "Shirts",
            item_category4: "Crew",
            item_category5: "Short sleeve",
            item_list_id: "related_products",
            item_list_name: "Related Products",
            item_variant: "green",
            location_id: "L_12345",
            price: 9.99,
            quantity: 1
        }]
    }
})

view_item

Use the view_item event to measure product detail views whenever a user views a product detail page.

dataLayer.push({
    'event': 'pangoTrack',
    'eventAction': 'view_item',
    ecommerce: {
        items: [{
            item_id: "SKU_12345",
            item_name: "Stan and Friends Tee",
            affiliation: "Google Merchandise Store",
            coupon: "SUMMER_FUN",
            currency: "USD",
            discount: 2.22,
            index: 0,
            item_brand: "Google",
            item_category: "Apparel",
            item_category2: "Adult",
            item_category3: "Shirts",
            item_category4: "Crew",
            item_category5: "Short sleeve",
            item_list_id: "related_products",
            item_list_name: "Related Products",
            item_variant: "green",
            location_id: "L_12345",
            price: 9.99,
            quantity: 1
        }]
    }
})

view_item_list

Use the view_item_list event when a user is presented with a list of items. The event should include the items array parameter containing the displayed items.

dataLayer.push({
    'event': 'pangoTrack',
    'eventAction': 'view_item_list',
    item_list_id: "related_products",
    item_list_name: "Related products",
    ecommerce: {
        items: [{
            item_id: "SKU_12345",
            item_name: "Stan and Friends Tee",
            affiliation: "Google Merchandise Store",
            coupon: "SUMMER_FUN",
            currency: "USD",
            discount: 2.22,
            index: 0,
            item_brand: "Google",
            item_category: "Apparel",
            item_category2: "Adult",
            item_category3: "Shirts",
            item_category4: "Crew",
            item_category5: "Short sleeve",
            item_list_id: "related_products",
            item_list_name: "Related Products",
            item_variant: "green",
            location_id: "L_12345",
            price: 9.99,
            quantity: 1
        }]
    }
})

add_to_cart

Measure when an item is added to the shopping cart by sending the add_to_cart event with the related items included in an items array.

dataLayer.push({
    'event': 'pangoTrack',
    'eventAction': 'add_to_cart',
    ecommerce: {
        items: [{
            item_id: "SKU_12345",
            item_name: "Stan and Friends Tee",
            affiliation: "Google Merchandise Store",
            coupon: "SUMMER_FUN",
            currency: "USD",
            discount: 2.22,
            index: 0,
            item_brand: "Google",
            item_category: "Apparel",
            item_category2: "Adult",
            item_category3: "Shirts",
            item_category4: "Crew",
            item_category5: "Short sleeve",
            item_list_id: "related_products",
            item_list_name: "Related Products",
            item_variant: "green",
            location_id: "L_12345",
            price: 9.99,
            quantity: 1
        }]
    }
})

remove_from_cart

To measure when a user removes an item from the shopping cart, send the remove_from_cart event.

dataLayer.push({
    'event': 'pangoTrack',
    'eventAction': 'remove_from_cart',
    ecommerce: {
        items: [{
            item_id: "SKU_12345",
            item_name: "Stan and Friends Tee",
            affiliation: "Google Merchandise Store",
            coupon: "SUMMER_FUN",
            currency: "USD",
            discount: 2.22,
            index: 0,
            item_brand: "Google",
            item_category: "Apparel",
            item_category2: "Adult",
            item_category3: "Shirts",
            item_category4: "Crew",
            item_category5: "Short sleeve",
            item_list_id: "related_products",
            item_list_name: "Related Products",
            item_variant: "green",
            location_id: "L_12345",
            price: 9.99,
            quantity: 1
        }]
    }
})

add_to_wishlist

You can also measure when an item is added to a wishlist by sending the add_to_wishlist event with the related items in an items array.

dataLayer.push({
    'event': 'pangoTrack',
    'eventAction': 'add_to_wishlist',
    ecommerce: {
        items: [{
            item_id: "SKU_12345",
            item_name: "Stan and Friends Tee",
            affiliation: "Google Merchandise Store",
            coupon: "SUMMER_FUN",
            currency: "USD",
            discount: 2.22,
            index: 0,
            item_brand: "Google",
            item_category: "Apparel",
            item_category2: "Adult",
            item_category3: "Shirts",
            item_category4: "Crew",
            item_category5: "Short sleeve",
            item_list_id: "related_products",
            item_list_name: "Related Products",
            item_variant: "green",
            location_id: "L_12345",
            price: 9.99,
            quantity: 1
        }]
    }
})

view_cart

When a user views the cart, send the view_cart event with all items in the cart.

dataLayer.push({
    'event': 'pangoTrack',
    'eventAction': 'view_cart',
    ecommerce: {
        items: [{
            item_id: "SKU_12345",
            item_name: "Stan and Friends Tee",
            affiliation: "Google Merchandise Store",
            coupon: "SUMMER_FUN",
            currency: "USD",
            discount: 2.22,
            index: 0,
            item_brand: "Google",
            item_category: "Apparel",
            item_category2: "Adult",
            item_category3: "Shirts",
            item_category4: "Crew",
            item_category5: "Short sleeve",
            item_list_id: "related_products",
            item_list_name: "Related Products",
            item_variant: "green",
            location_id: "L_12345",
            price: 9.99,
            quantity: 1
        }]
    }
})

begin_checkout

Use the begin_checkout event to measure the first step of the checkout process. The event should include one or more items defined using the relevant fields. At this stage, coupons can be applied to the entire order by adding them to the event, or to individual items by adding them to the appropriate fields within the items array.

dataLayer.push({
    'event': 'pangoTrack',
    'eventAction': 'begin_checkout',
    currency: "USD",
    value: 7.77,
    coupon: "SUMMER_FUN",
    ecommerce: {
        items: [{
            item_id: "SKU_12345",
            item_name: "Stan and Friends Tee",
            affiliation: "Google Merchandise Store",
            coupon: "SUMMER_FUN",
            currency: "USD",
            discount: 2.22,
            index: 0,
            item_brand: "Google",
            item_category: "Apparel",
            item_category2: "Adult",
            item_category3: "Shirts",
            item_category4: "Crew",
            item_category5: "Short sleeve",
            item_list_id: "related_products",
            item_list_name: "Related Products",
            item_variant: "green",
            location_id: "L_12345",
            price: 9.99,
            quantity: 1
        }]
    }
})

add_payment_info

Send the add_ payment_info event when a user submits their payment information. If available, include the payment_type parameter with this event to indicate the selected payment method.

dataLayer.push({
    'event': 'pangoTrack',
    'eventAction': 'add_payment_info',
    ecommerce: {
        currency: "USD",
        value: 7.77,
        coupon: "SUMMER_FUN",
        payment_type: "Credit Card",
        items: [{
            item_id: "SKU_12345",
            item_name: "Stan and Friends Tee",
            affiliation: "Google Merchandise Store",
            coupon: "SUMMER_FUN",
            currency: "USD",
            discount: 2.22,
            index: 0,
            item_brand: "Google",
            item_category: "Apparel",
            item_category2: "Adult",
            item_category3: "Shirts",
            item_category4: "Crew",
            item_category5: "Short sleeve",
            item_list_id: "related_products",
            item_list_name: "Related Products",
            item_variant: "green",
            location_id: "L_12345",
            price: 9.99,
            quantity: 1
        }]
    }
})

add_shipping_info

When a user moves to the next step in the checkout process and provides shipping information, send the add_shipping_info event. Use the shipping_tier parameter to specify the user’s selected shipping option, such as “Ground,” “Air,” or “Next-day.”

dataLayer.push({
    'event': 'pangoTrack',
    'eventAction': 'add_shipping_info',
    ecommerce: {
        currency: "USD",
        value: 7.77,
        coupon: "SUMMER_FUN",
        shipping_tier: "Ground",
        items: [{
            item_id: "SKU_12345",
            item_name: "Stan and Friends Tee",
            affiliation: "Google Merchandise Store",
            coupon: "SUMMER_FUN",
            currency: "USD",
            discount: 2.22,
            index: 0,
            item_brand: "Google",
            item_category: "Apparel",
            item_category2: "Adult",
            item_category3: "Shirts",
            item_category4: "Crew",
            item_category5: "Short sleeve",
            item_list_id: "related_products",
            item_list_name: "Related Products",
            item_variant: "green",
            location_id: "L_12345",
            price: 9.99,
            quantity: 1
        }]
    },
    user_data: {
        email_address: '[email protected]',
        phone_number: '1234567890',
        address: {
            first_name: 'john',
            last_name: 'smith',
            city: 'menlopark',
            region: 'ca',
            district: '',
            ward: '',
            postal_code: '94025',
            country: 'usa'
        },
        'form_key': '',
        'form_name': '',
        'form_vs': '', //form version,
        'cf': '' //custom field
    },
    'cdpData': {
        properties: {
            'gender': 'male',
            'birthYear': '2000'
        }
    }
})

purchase

Measure purchase transactions by sending the purchase event with one or more items, identified using the relevant fields.

dataLayer.push({
    'event': 'pangoTrack',
    'eventAction': 'purchase',
    ecommerce: {
        transaction_id: "T_12345",
        affiliation: "Google Merchandise Store",
        value: 25.42,
        tax: 4.90,
        shipping: 5.99,
        currency: "USD",
        coupon: "SUMMER_SALE",
        items: [{
                item_id: "SKU_12345",
                item_name: "Stan and Friends Tee",
                affiliation: "Google Merchandise Store",
                coupon: "SUMMER_FUN",
                currency: "USD",
                discount: 2.22,
                index: 0,
                item_brand: "Google",
                item_category: "Apparel",
                item_category2: "Adult",
                item_category3: "Shirts",
                item_category4: "Crew",
                item_category5: "Short sleeve",
                item_list_id: "related_products",
                item_list_name: "Related Products",
                item_variant: "green",
                location_id: "L_12345",
                price: 9.99,
                quantity: 1
            },
            {
                item_id: "SKU_12346",
                item_name: "Google Grey Women's Tee",
                affiliation: "Google Merchandise Store",
                coupon: "SUMMER_FUN",
                currency: "USD",
                discount: 3.33,
                index: 1,
                item_brand: "Google",
                item_category: "Apparel",
                item_category2: "Adult",
                item_category3: "Shirts",
                item_category4: "Crew",
                item_category5: "Short sleeve",
                item_list_id: "related_products",
                item_list_name: "Related Products",
                item_variant: "gray",
                location_id: "L_12345",
                price: 20.99,
                promotion_id: "P_12345",
                promotion_name: "Summer Sale",
                quantity: 1
            }
        ]
    }
})

generate_lead

Measure the action of users submitting a form on the page, using cdpData.properties for variables that are not defined in user_data.

dataLayer.push({
    'event': 'pangoTrack',
    'eventAction': 'generate_lead',
    user_data: {
        email_address: '[email protected]',
        phone_number: '1234567890',
        address: {
            first_name: 'john',
            last_name: 'smith',
            city: 'menlopark',
            region: 'ca',
            postal_code: '94025',
            country: 'usa'
        },
        'form_key': '',
        'form_name': '',
        'form_vs': '', //form version,
        'cf': 'cf_01=Value || cf_ts_02=Value || cf_ls_01=["tag1", "tag2"]',
    },
    'cdpData': {
        properties: {
            'gender': 'male',
            'birthYear': '2000'
        }
    }
});

// Timestamp: cf_ts_01, cf_ts_02,...
// Boolean: cf_b_01, cf_b_02
// Double: cf_d_01, cf_d_02
// Long: cf_l_01, cf_l_02
// ListL: ["tag1", "tag2"] : cf_ls_01, cf_ls_02, cf_ls_03
// Text: cf_01, cf_02, cf_03

select_promotion

To indicate that a user has clicked on a promotion, send the select_promotion event with this promoted item included as an item parameter.

dataLayer.push({
    'event': 'pangoTrack',
    'event': 'select_promotion',
    creative_name: "Summer Banner",
    creative_slot: "featured_app_1",
    location_id: "L_12345",
    promotion_id: "P_12345",
    promotion_name: "Summer Sale",
    'ecommerce': {
        'items': [{
            'item_name': 'Tri Blend Android T-Shirt', //One of item_id or  item_name is required for product or impression data. 
            'item_id': '123',
            'promotion_id': '12345',
            'price': '15.25',
            'item_brand': 'Google',
            'item_category': 'Apparel',
            'item_variant': 'Gray',
            'promotion_id': 'p1',
            'promotion_name': 'p1 name',
            'creative_name': 'creative name',
            'creative_slot': 'right',
            'location_id': 'l_11',
            'index': 1,
            'quantity': 1
        }]
    }
});

view_promotion

E-commerce supports measuring both the number of impressions and the number of clicks for internal promotional campaigns, such as banners displayed to promote sales.

Promotion impressions are typically measured on the initial screen view by sending the view_promotion event along with item parameters to specify the promoted items.

dataLayer.push({
    'event': 'pangoTrack',
    'event': 'view_promotion',
    creative_name: "Summer Banner",
    creative_slot: "featured_app_1",
    location_id: "L_12345",
    promotion_id: "P_12345",
    promotion_name: "Summer Sale",
    'ecommerce': {
        'items': [{
            'item_name': 'Tri Blend Android T-Shirt', //One of item_id or  item_name is required for product or impression data. 
            'Item_id': '123',
            'promotion_id': '12345',
            'price': '15.25',
            'item_brand': 'Google',
            'item_category': 'Apparel',
            'item_variant': 'Gray',
            'promotion_id': 'p1',
            'promotion_name': 'p1 name',
            'creative_name': 'creative name',
            'creative_slot': 'right',
            'location_id': 'l_11',
            'index': 1,
            'quantity': 1
        }]
    }
});

custom_event

Measure custom events based on the specific needs of your website. Important note: {{custom_event}} and the property variables must match the regular expression [A-Za-z0-9_-]

dataLayer.push({
    'event': 'pangoTrack',
    'eventAction': '{{custom_event}}',
    user_data: {
       always_use: true, //PangoCDP will be identify user, default identify for only generate_lead event
       email_address: '[email protected]',
       phone_number: '1234567890',
    },
    'cdpData': {
        properties: {
            'objectType': 'banner',
            'objectId': 'banner1'
        }
    }
})

PreviousENG Version NextData Ingestion APIs

Last updated 19 days ago

Was this helpful?

hashtagOverview

hashtag1. Create a Measurement ID in Google Analytics 4 (GA4)

hashtag2. Create a Facebook Pixel

hashtag3. Add the Pango tracking code to the website

hashtag4. Event Tracking

hashtagRecommended events in Google Analytics 4

hashtagEnhanced E-Commerce

hashtagClient Tracking Events

hashtagselect_item

hashtagview_item

hashtagview_item_list

hashtagadd_to_cart

hashtagremove_from_cart

hashtagadd_to_wishlist

hashtagview_cart

hashtagbegin_checkout

hashtagadd_payment_info

hashtagadd_shipping_info

hashtagpurchase

hashtaggenerate_lead

hashtagselect_promotion

hashtagview_promotion

hashtagcustom_event