GTM

Use this class for all things GTM.

Installation

Note: This class is pre-installed and loaded asynchronously with Genesis out of the box.

You will need to have a GTM container set-up with the proper triggers, variables, and tags to benefit the usage of this.

Please see GTM Setup here.

Example Usage

.js

Initialize the GTM object:

Preferred asynchronous initialization:

(async () => {
    const {default: GTM} = await import('extensions/gtm');

    const gtm = new GTM(this.pageContext);
    gtm.init();
})();

Functions

sendImpressions

This will send impressions to GTM (event: impressions).

It assumes the element has the following attributes:

• data-gtm-id
• data-gtm-list
  • Optional and can be omitted if needed, but this will need to added to a parent element for all the products
• data-gtm-name
• data-gtm-position
  • Optional and can be omitted if needed, but a parent element will need to be a gtm-list
• data-gtm-price

sendPromos

This will send promotions to GTM (event: view_promotions).

If you need to send your own Promotions, the following is an example of what the promotion data should look like for each member in the array.

{
    creative: 'creative',
    creative_name: 'creative',
    id: 'id',
    name: 'name',
    position: 'position',
    promotion_id: 'id',
    promotion_name: 'name'
}

If you already have the proper attributes on the element, you can utilize promotData(promo) to return it in this format.

eventClick

This will send a Custom Event to GTM.

It assumes the Product Link Element has the following attributes:

• data-gtm-action (Recommended - 'Click')
• data-gtm-category (Recommended)
• data-gtm-label
• data-gtm-value

Example

<a class="js-gtm-event-click" href="www.somelink.com" data-gtm-category="My Category" data-gtm-action="Click" data-gtm-label="Some Label">Hi</a>

promoClick

This will send a Promotion Click event to GTM (event: promotion_click)

It assumes the Promo Link Element has the following attributes:

• data-gtm-promo-creative
• data-gtm-promo-id
• data-gtm-promo-name
• data-gtm-promo-position

Example

<a href="www.somelink.com" class="js-gtm-promo-link" data-gtm-promo-id="hero-banner-2" data-gtm-promo-name="Hero Banner 2" data-gtm-promo-position="1" data-gtm-promo-creative="hero_style_2">Hi</a>

sendEvent

This function takes in 1 parameter event object.

{
    action: 'action',
    category: 'category',
    event: 'event', // event from an eventlistener
    noninteractionHit: true|false,
    label: 'label',
    link: 'link',
    value: 'value'
}

This will send a Custom event to GTM (event: ga_event)

Example

Javascript Example:

this.sendEvent({
    action: eventLink.getAttribute('data-gtm-action') || '',
    category: eventLink.getAttribute('data-gtm-category') || '',
    event: event,
    noninteractionHit: false,
    label: eventLink.getAttribute('data-gtm-label') || '',
    link: link,
    value: eventLink.getAttribute('data-gtm-value') || ''
});

Example not using the function, but using the DataLayer

var dataLayer = dataLayer || [];

dataLayer.push({
    event: 'ga_event',
    ga_event_action: 'Create',
    ga_event_category: 'Wishlist',
    ga_event_label: '',
    ga_event_noninteraction_hit: false,
    ga_event_value: ''
});

Extra Additions

The following are some data pieces that can be added at the merchant request, but are not out of the box.

Brand

Make sure you have a custom field for Brand before starting.

Example/ Setup

You will need to assign this custom field to load on each product listing where applicable.

Example MVT - data tag

<mvt:capture variable="l.settings:product:gtm_data">
    data-gtm-name="&mvte:product:name;" data-gtm-id="&mvte:product:code;" data-gtm-price="&mvte:product:price;" data-gtm-brand="&mvte:product:customfield_values:customfields:brand;"
</mvt:capture>
<div class="g-also-like__product-card g-carousel__slide lazyload js-gtm-impression" &mvt:product:gtm_data;></div>

Example MVT - Product Page

"brand": "&mvte:product:customfield_values:customfields:brand;"

Category

Make sure you have a custom field for GTM Category before starting.

Setup

Creating the Marketing Feed

To automate this process, create a new Marketing Feed:

Code: gtm_category

Name: Update GTM Category Product Custom Field

Feed Module: Template Based Feed

Template: Product

Once created:

• Assign customfields to the Page Template
• Update the Template Based Feed Options to the following:
  • Mode: Product
  • Load: Active
  • Encoding: None
  • Custom Fields: Bring over GTM Category
  • Advanced Mode: Yes

Marketing Feed Templates

Clear out the Header and Footer Template. Those will not be necessary.

Iterator Template

<mvt:if expr="NOT ISNULL l.settings:record:customfield:category_path">
    <mvt:exit />
</mvt:if>

<mvt:assign name="l.settings:record:category_path_category" value="''" />

<mvt:if expr="NOT ISNULL l.settings:record:canonical_category">
    <mvt:do file="g.Module_Library_DB" name="l.success" value="Runtime_Category_Load_Code_Cached( l.settings:record:canonical_category, l.settings:record:category_path_category )" />
</mvt:if>

<mvt:if expr="ISNULL l.settings:record:category_path_category">
    <mvt:do file="g.Module_Library_DB" name="l.success" value="CategoryList_Load_Offset_Product_Assigned( l.settings:record:id, 0, 1, 'active', 1, l.next, l.settings:record:category_path_category )" />
    <mvt:assign name="l.settings:record:category_path_category" value="l.settings:record:category_path_category[1]" />
</mvt:if>

<mvt:comment>
|
|   There is no category to start from, exit.
|
</mvt:comment>

<mvt:if expr="NOT l.settings:record:category_path_category">
    <mvt:exit />
</mvt:if>

<mvt:do file="g.Module_Root $ '/modules/component/cmp-cssui-breadcrumbs.mvc'" name="l.settings:record:category_parents_count" value="CategoryList_Load_PathToRoot( l.settings:record:category_path_category, l.settings:record:category_parents )" />

<mvt:assign name="l.settings:record:customfield:category_path" value="''" />

<mvt:if expr="l.settings:record:category_parents_count GT 0">
    <mvt:foreach iterator="parent_cat" array="record:category_parents">
        <mvt:assign name="l.count" value="miva_array_insert_var( l.settings:record:customfield:category_path, l.settings:parent_cat:name, 1 )" />
    </mvt:foreach>
<mvt:else>
    <mvt:assign name="l.count" value="miva_array_insert_var( l.settings:record:customfield:category_path, l.settings:record:category:name, -1 )" />
</mvt:if>

<mvt:assign name="l.settings:record:customfield:category_path" value="miva_joinstring( l.settings:record:customfield:category_path, '|', 'trim' )" />
<mvt:item name="customfields" param="Write_Product_ID( l.settings:record:id, 'gtm_category', l.settings:record:customfield:category_path )" />

Create a Scheduled Task to run the feed atleast once a day. Depending on the merchant's schedule of adding/ activating new products, you should adjust the timing accordingly.

Example

You will need to assign this custom field to load on each product listing where applicable.

Example MVT - data-tag

<mvt:capture variable="l.settings:product:gtm_data">
    data-gtm-name="&mvte:product:name;" data-gtm-id="&mvte:product:code;" data-gtm-price="&mvte:product:price;" data-gtm-category="&mvte:product:customfield_values:customfields:gtm_category;"
</mvt:capture>
<div class="g-also-like__product-card g-carousel__slide lazyload js-gtm-impression" &mvt:product:gtm_data;></div>

Example MVT, Product Page

<mvt:if expr="l.settings:product:customfield_values:customfields:gtm_category">
    <mvt:assign name="l.settings:product:gtm_categories_count" value="miva_splitstring( l.settings:product:customfield_values:customfields:gtm_category, '|', l.settings:product:gtm_categories, 'trim' )" />
    <mvt:do file="g.Module_Library_Utilities" name="l.null" value="QuickSortArray( l.settings:product:gtm_categories, '', 1 )" />
    <mvt:assign name="l.settings:product:ga4_categories" value="''" />
    <mvt:assign name="l.settings:product:ga_category" value="''" />
    <mvt:foreach iterator="gtm_category" array="product:gtm_categories">
        <mvt:assign name="l.settings:param" value="'item_category'" />
        <mvt:if expr="l.pos1 GT 1">
            <mvt:assign name="l.settings:param" value="l.settings:param $ l.pos1" />
        </mvt:if>
        "&mvtj:param;": "&mvtj:gtm_category;",
        <mvt:assign name="l.null" value="miva_array_insert_var( l.settings:product:ga_category, l.settings:gtm_category, 1 )" />
        <mvt:if expr="l.pos1 EQ 5">
            <mvt:foreachstop />
        </mvt:if>
    </mvt:foreach>
    <mvt:assign name="l.settings:product:ga_category" value="miva_joinstring( l.settings:product:ga_category, '/', 'trim' )" />
    "category": "&mvtj:product:ga_category;"
</mvt:if>