Main Page

We offer the integration of our widgets on your website's homepage. You can choose from the following widgets:

Popular Products

This widget highlights best-selling items based on user interactions such as clicks, views, cart additions, and purchases.

Personalized Recommendations

This widget provides a curated selection of products tailored to the user, based on their activity and preferences.

Integration Script via Google Tag Manager (GTM)

To integrate Garderobo widgets on your website using Google Tag Manager (GTM), follow these steps. The main idea is to initialize the widgets in the specified <div id="garderobo"></div> container once the main page is loaded.

1. Create a Custom HTML Tag for Widget Initialization

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, e.g., "Garderobo - Init Main".

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

<script>
   _garderoboWidget.then(function(widget) {
       widget.initMain(document.getElementById('garderobo'));
   });
</script>

2. Set Up Triggers for Widget Initialization

You need to create a trigger for when the main page is loaded. This trigger will ensure that the widget's initialization happens at the right time.

1. 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.

   • Create a custom trigger to target only the main page (e.g., using the URL or page path).

2. Create a Trigger Dependency (Ensure "Garderobo - Init" Tag Fires First): To ensure that the "Garderobo - Init" tag fires before this tag, follow these steps:

   • Go to the Tag Sequencing section within the trigger setup.

   • Enable Tag Sequencing and select the "Garderobo - Init" tag as the fire before tag. This ensures the widget is initialized first.

3. Handle Widget Style Initialization

Garderobo A.I. provides pre-defined styles for the widgets, which will be automatically loaded as a .css file during the initialization process. This ensures that all widgets are displayed according to the agreed layout and style. You do not need to add these styles manually; they are managed by the initialization process.

4. Finalizing the Tag and Publishing

After configuring the tag and trigger, click Submit to publish the changes in GTM.

Test the Integration: Before publishing the tag live, use Preview Mode in GTM to check that the widget initializes correctly on the main page and the widget styles load properly.

Final Notes

• Widget Initialization: The widget script is initialized only after the previous "Garderobo - Init" tag has run, ensuring proper sequence and functionality.

• CSS Styles: The widget's styles are managed by Garderobo A.I. and are automatically loaded during the initialization process, so no additional steps are needed for styling.