General Information

To integrate the Garderobo A.I. widget using Google Tag Manager (GTM), you need to follow these steps, which involve creating a custom HTML tag in GTM, setting up triggers for when the widget should be initialized, and ensuring proper handling of cart and favorite products.

Creating a Custom HTML Tag in GTM

1. Go to GTM: Log into your Google Tag Manager account and select the container where you want to implement the widget.

2. Create a New Tag:

   • Click on Tags in the left-hand menu, then click New.

   • Name your tag, for example, "Garderobo - Init"

3. Add Custom HTML Code: In the Tag Configuration section, choose the Custom HTML tag type and paste the following code:

<script>
  var widgetScript = document.createElement('script');
  widgetScript.onload = function () {    
    _garderoboWidget.then(function(widget) {
       widget.init('<API_KEY>', {lang_code: 'en', user_id: '<user_id>'});
       widget.setCartProducts(cartProductsArray, '/cart/');
       widget.setFavoritesProducts(favoritProductsArray);
       
       widget.registerCallback.addToCartEvent(function(sizeId, data) {
           // Handle Add to Cart
           cartProductsArray.push(sizeId);
           widget.setCartProducts(cartProductsArray, '/cart/');
       });
       
       widget.registerCallback.addToFavorites(function(productId, state, data) {
           // Handle Add to Favorites or Remove from Favorites
       });
    });
  };
 
  widgetScript.src = 'https://widget.garderobo.ai/widget.js';
  document.head.appendChild(widgetScript);
</script>

Setting Up the Triggers

You will need to create a trigger to execute this tag when the appropriate page is loaded.

Create a New Trigger:

• In the Triggers section of the tag configuration, click on + to add a new trigger.

• Select Page View as the trigger type.

• Choose the All Pages option or specify a custom trigger for specific pages where the widget should appear (e.g., for product pages, cart pages, etc.).

Implementing Cart Products Initialization

To initialize the cart with products already added to it, you can pass an array of product IDs dynamically into the widget. This should be done within the same custom HTML tag.

Add the following code to set the cart items:

_garderoboWidget.then(function(widget) {
    var cartProductsArray = [...] // Get a list of item IDs added to the cart
    widget.setCartProducts(cartProductsArray, '/cart/');
});

Implementing Favorite Products Initialization

To initialize the favorite products, use the following script:

_garderoboWidget.then(function(widget) {
    var favoritProductsArray = [...] // Get a list of product IDs added to favorites
    widget.setFavoritesProducts(favoritProductsArray);   
});

Creating Event Listeners for Add to Cart and Add to Favorites

If you want to handle user actions like adding products to the cart or favorites, you need to create additional scripts to listen for these events.

• Add to Cart Event: When a user clicks the "Add to Cart" button in the widget, you can handle the action as follows:

_garderoboWidget.then(function(widget) {
    widget.registerCallback.addToCartEvent(function(sizeId, data) {
        // Add the item to the cart
        cartProductsArray.push(sizeId);
        widget.setCartProducts(cartProductsArray, '/cart/');
    });
});

• Add to Favorites Event: When a user clicks on the "Favorites" icon, you need to process this event to either add or remove products from the user's favorites.

_garderoboWidget.then(function(widget) {
    widget.registerCallback.addToFavorites(function(productId, state, data) {
        // Add or remove from favorites based on the state
    });
});

Publishing the Changes

After configuring your tag and triggers, publish the changes to GTM. You can use Preview Mode to test the integration before deploying it live.

Final Notes

By setting up this integration via GTM, you can:

• Easily manage the widget code without directly editing the website’s HTML.

• Adjust or update widget configurations quickly through GTM, without needing a developer for every change.

• Track and customize the user experience by dynamically initializing cart and favorites data, as well as handling specific events related to product interactions.

For a more customized solution, you can also integrate GTM’s variables and custom triggers to fine-tune the widget's behavior based on different user actions or page conditions.