Embedding widgets on the website without using CMS and interfering with the website’s code. Use GTM template to embed the widget.

Google Tag Manager (GTM) is a simple tool for managing tags and JavaScript codes inserted into a website. It allows you to easily add and remove codes from external partners without interfering with the site code. See how to use this method to implement the 100Shoppers widget.

To use this method, you must have an active Google Tag Manager account and a published container.

1. Adding a new tag

Log in to your GTM account and go to the Tags tab, then click on the New button. Type in its name and click on Tag Configuration. In the list of tags, select Discover More Tags in the Template Gallery, then search for 100Shoppers Where To Buy Widget Script and add it to your workspace.

2. Basic configuration

  1. Document element ID. Implementation via GTM inserts a floating button on your page which launches a widget by default. If you want the widget to trigger some element of your page instead of the floating button, enter its ID into Document element ID field. Otherwise, leave this field blank.
  2. Widget configuration ID. Enter the ID of your widget in this field. You can find it in the 100Shoppers panel.
  3. Product EAN. Enter the EAN code of the product for which you want to generate the widget. Note! If your site uses a variable data layer (dataLayer) that stores the EAN codes of the products described on your site, you can define the appropriate variable in GTM and insert it into the Product EAN field. This is crucial for widget automation.

IMG

3. Additional settings

  1. Show product information. Choose if you want the product details such as name and picture to be shown in the widget.
  2. Maximum price and Minimum price. In these fields you can define maximum and/or minimum price according to which the offers will be filtered. If you set e.g. the maximum price to 50 PLN, offers with a higher price will not be displayed in the widget. If you want to show all offers regardless of their price, leave these fields empty.
  3. Additional user parameter. In these fields you can enter any data you want us to save for the transaction. You can read more about abpar parameters here.
  4. Element ID to display when widget has no offers. If no offers are found for a given widget, a default message will be displayed stating that there are no offers for this product. If you would like to replace this default message with your own content (custom message, graphic, ad code), you need to add such content to your page, and provide its ID in this field.
  5. Floating button text. The floating button that launches the widget has the text “Buy online” by default. If you would like to change it, enter your own call to action in this field.

IMG

4. Adding a display rule

Finally, you need to set the display rule for the widget. If you only want to insert the widget on one specific subpage using this method, after clicking Select Rule, click the plus button, then enter a name for the rule and click Configure Rule. In the list of rule types, select Page Display. Select Some page display and set its parameters. Save the rule.

IMG

If you have the tag configured and display rules set up, all that’s left is to save the new tag and publish it.

Other ways to display the widget:

  • Add the script into the webpage code
  • JSON
  • Multivariate