Main Page Platform Collages
Gardrobo A.I. offers a seamless solution for embedding dynamic and visually engaging collages into your website. These widgets, curated through our platform, empower you to showcase products in a unique and interactive way, enhancing customer engagement and driving conversions.
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
Go to GTM: Log into your Google Tag Manager account and select the container where you want to implement the widget.
Create a New Tag:
Click on Tags in the left-hand menu, then click New.
Name your tag, e.g., "Garderobo - Init Main".
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.initPlatform(document.getElementById('garderobo'), {"tag_name": <collages_tag>});
});
</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.
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).
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.
Last updated