Google Tag Manager

With GTM, you can add and update AdWords, Google Analytics, Firebase Analytics, Floodlight, and 3rd party or custom tags from the Tag Manager user interface instead of editing site code. This reduces errors and frees you from having to involve a developer when configuring tags.

Please refer to the following steps to have Google Tag Manager enabled on your StoreHippo powered store.

Setting up Google Tag Manager (GTM)

(Please skip this step if you already have GTM Code)

Go to Google Tag Manager to create an account and click Sign up.
The following window will appear to set up your account.
Mention your account name and select the provided checkbox. Click Continue.
Now create a container for your site in the account.
Fill up the Container name and choose where to use the container. Click Create.
Click Yes on the pop up of Google Tag Manager Terms of Service Agreement.
Now we have the code snippet of GTM.
Copy the GTM id and click OK.

Configure GTM on StoreHippo

Follow these simple steps to configure Google Tag Manager on StoreHippo.

Go to Settings > Site Settings in StoreHippo Admin Panel.
Mention your GTM id which you got from the previous step.

Verifying GTM

- After you have configured your store on GTM, you can verify it that it is going well.

- Go to Google Tag Manager and select your container name. The following window will appear:

Note: You can add new tags by clicking on Add a new tag. A window will appear where you can add the tags by choosing from over 50 tag types.
For more information, refer Google Tag Manager overview (https://support.google.com/tagmanager/answer/6102821?hl=en).

Supported GTM Events

StoreHippo fires the following events as part of the standard implementation. The Ecommerce event implementation is done as per the GTM's enhanced ecommerce guidelines (please refer: https://developers.google.com/tag-manager/enhanced-ecommerce).

productImpressions
productClick
productDetail
addToCart
removeFromCart
checkout
Purchase
pageView (custom)

Page View Event

As StoreHippo uses the Single Page Application (SPA), the GTM does not trigger pageview event on every page change. StoreHippo explicitly triggers pageView event on every page change.

Adding a Custom Event manually

Google Tag Manager provides a globalvariabledataLayer,that can be used to trigger custom events.

dataLayer.push({'event': 'event_name'});

dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
}];

StoreHippo is an event-based platform, so every user action or internal action is events based. So you can put your custom code in the event handlers. You can define these event handlers in Startup Widgets. For example, to add an event when an item is added to cart, you can use the following snippets.

window.ms.bind('ms.entity.carts.add_product_success', function (event) {
    var product = event.data.data.product;
    dataLayer.push({
        'event': 'addToCart',
        'ecommerce': {
            'currencyCode': ms.user.currency.name,
            'add': {                                // 'add' actionFieldObject measures.
                'products': [
                    {                        //  adding a product to a shopping cart.
                        'name': product.name,
                        'id': product.sku,
                        'price': product.price,
                        'brand': product.brand,
                        'category': product.category,
                        'quantity': 1
                    }
                ]
            }
        }
    });
});

You can find more information about StoreHippo events and how to use them in the Startup Widgets topic.

StoreHippo Help Center