Google Tag Manager implementation

Google Tag Manager is a simple tool for managing tags and JavaScript codes inserted into a website. With it, you can easily add and remove codes from external partners without interfering with the site’s code. See how to use this integration method.

The following instructions apply to shops that use e-commerce in GA4.

Step 1 Loading script

Add the Load script as custom HTML and set it to run on every page of your shop.
Download it here.

Note: your-shop-ID: 49, → 49 should be replaced by the shop id provided by the 100SHOPPERS manager.

Step 2 Container ID

Activate Container ID as the default variable:

Step 3 Transaction script 

Add the order registration script as a custom tag. Set a custom event purchase as the triggering rule.

Configure the rule

Tag configuration – Custom HTML code

Script to use

Pay attention to the data the script has to return, e.g. productId, quantity or gross.

<script type="text/javascript">
if (typeof bb != "undefined") {

var dlv = function(key){ return google_tag_manager[{{Container ID}}].dataLayer.get(key) };
  if (dlv("ecommerce.items").length) {
    var bbData = [];       

    for (var i=0; i < dlv("ecommerce.items").length; i++) {
      bbData.push({
        productId: dlv("ecommerce.items")[i].item_id,
        quantity: dlv("ecommerce.items")[i].quantity,
        commissionId: 844,
        gross: dlv("ecommerce.items")[i].price,
      });
    }

    bb('order', { orderId: dlv("ecommerce.transaction_id"), products: bbData });
  }
}
</script>

Note: commissionId: 844, → 844 should be replaced by the commission id provided by the 100SHOPPERS Manager.

Implementation test 

Once the scripts have been placed and correctly configured in Google Tag Manager, send the information to the 100Shoppers Manager, which will run a test transaction to validate the integration.