SyndiTag with Tag Managers

The SyndiTag can be easily configured in any tag manager you have deployed on your website.

If you are able to place an HTML element on the page outside of the tag manager, we strongly encourage you to leverage the Implement In-Line Content and Implement Hero Image Content documentation to take control over where content display on your website.

That said, here are three examples implementations which can be done using a tag manager.

Example 1

If you are able to place the HTML element in the page template, use this version of the SyndiTag:

<script type="text/javascript"> 
      (function (s, y, n, di, go) { 
        di = s.createElement(y); 
        di.type = 'text/java'+y; 
        di.async = true; 
        di.src = n + Math.floor(Date.now() / 86400000); 
        go = s.getElementsByTagName(y)[0]; 
        go.parentNode.insertBefore(di,go); 
      }(document,'script', "https://content.syndigo.com/site/siteid/tag.js?cv=")); //replace siteid with the unqiue id provided by syndigo
</script>

Example 2

If you prefer to handle the entire integration in the tag manager, you can add a couple lines to the integration code that will push the page identifier and the location where content should display on the page. The code below using the tag manager then you can use this

<script type="text/javascript">
      (function (s, y, n, di, go) { 
        di = s.createElement(y); 
        di.type = 'text/java'+y; 
        di.async = true; 
        di.src = n + Math.floor(Date.now() / 86400000); 
        go = s.getElementsByTagName(y)[0]; 
        go.parentNode.insertBefore(di,go); 
      }(document,'script', "https://content.syndigo.com/site/siteid/tag.js?cv=")); //replace siteid with the unqiue id provided by syndigo

//these lines set the pageid and location where content should go
    const p = document.createElement('syndigo-powerpage')
    p.setAttribute('pageid', 'somepageid') //replace somepageid with a variable that is your Product or page ID
    document.querySelector('.some-place-i-want-powerpage').appendChild(p) //replace "some-place-i-want-powerpage" with the HTML element to which you want to append content
</script>

Example 3

If you are unable to leverage the HTML and require the Syndigo team to inject the element into your page through our service, then use this version of the tag:

<script type="text/javascript"> 
      (function (s, y, n, di, go) { 
        di = s.createElement(y); 
        di.type = 'text/java'+y; 
        di.async = true; 
        di.src = n + Math.floor(Date.now() / 86400000); 
        go = s.getElementsByTagName(y)[0]; 
        go.parentNode.insertBefore(di,go); 
      }(document,'script', "https://content.syndigo.com/site/siteid/tag.js?cv=")); //replace siteid with the unqiue id provided by syndigo

    window.SYNDI = window.SYNDI || [];  
    SYNDI.push('pageid'); //replace pageid with a variable that is your Product or page ID

</script>

Follow these steps to create a new tag and assign the relevant trigger:

1. Create a new container version
2. Create a custom HTML tag
3. Replace siteid in the tag template with your SIteId provided by Syndigo
4. Select the method of integration from the examples above. Follow the comments in each example to ensure the script is correctly configured.
5. Associate a firing rule for all pages or the pages where you want Syndigo content to appear
6. Publish the new container.

The tag is now configured to display content.

If you would like to enable attribution reporting, you will need to configure an additional Custom HTML Tag and firing rule. You can enable Add to Cart or Conversion tracking using the following APIs:

window.SYNDI = window.SYNDI || [];
window.SYNDI.push({"type": "track", "event": "addToCart", qty:1, sku:"abc123", price:"1234.56", "customParam":"foobar"});

Replace all parameter values for qty, sku, price, and customParam with variables to dynamically populate the relevant data.

window.SYNDI = window.SYNDI || [];
window.SYNDI.push({ 
     "type": "track", 
     "event": "transaction", 
     "orderid": "12341234ASDF", 
     "total": "1201.456", 
     "items": [ 
         { 
             "sku": "1234123r4", 
             "price": "123.546", 
             "count": "123" 
         }, 
         { 
             "sku": "12asdfa4123r4", 
             "price": "12.546", 
             "count": "1", 
             "customParam1": "foo" 
         } 
     ], 
     "customParam2": "bar" 
});

Replace all parameter values for orderid, total, sku, price, count, and customParam1 with variables to dynamically populate the relevant data.

Set the appropriate firing rule (a click listener on the add to cart button OR page filter for the order confirmation page) and you're good to go.