Guides

Website personalisation tag options

Website personalisation: JavaScipt integration

Suggest Edits

Enabling the website personalisation tag is the first thing you need to do to enable Ometria's onsite functionality.

Adding the website personalisation tag unlocks access to the three main JavaScript libraries:

Typically the tag is added once to a layout or a global template such that all pages within the site will have access to the website personalisation libraries.

<script src="https://{{domainkey}}-{{storefrontid}}.store-{{locationkey}}.ometria.services/graphenehc.js"></script>

Positioning

It's important to think about where to put your tags.

Some of the options are discussed in more detail below.

1. Simple

This is the recommended approach.

The most straightforward approach is to add the tag in the <head> section:

<head>

   <script src="https://{{domainkey}}-{{storefrontid}}.store-{{locationkey}}.ometria.services/graphenehc.js"></script>

</head>

Then call the APIs immediately after the required DOM elements within the page:

<body>
<!-- ... template generated html ... -->
<div id="Content"><!-- Content will go here --></div>
<script>
   // note: we can call the API immediately
   $g.fetch({
       template        : "category",
       success         : function(response) {
           document.querySelector("#Content").innerHTML = response.templates.category.html;
       }
   });
</script>
ProsCons
The APIs will be ready to use much sooner in the life cycle of the page, reducing flickering and ensuring a snappy, responsive page.

Doesn't rely on the DOM loading and so content can be inserted much earlier.

Website features will load much more quickly		The first time the library is loaded it will have a small blocking effect on the page

2. Defer

Another common approach is to add the tag in the <head> section and add the defer attribute.

This might be a good choice if your site is light on JavaScript and doesn't have many third party libraries.

<head>
   <script src="https://{{domainkey}}.store-{{locationkey}}.ometria.services/graphenehc.js" defer></script>
</head>

ProsCons
The JavaScript will immediately start loading in the background without blocking.The library is only available to use once the DOM is ready.

The call to the library functions need to be wrapped in a DOMContentLoaded event.

If there are a lot of other scripts on the page then it may take longer for the DOMContentLoaded event to be available, so it may delay the time taken before Ometria can be called, delaying the rendering of content to the page.
<script>
document.addEventListener("DOMContentLoaded", function () {
   // note: the loading of other scripts may delay this event firing
   $g.fetch({
       template        : "category",
       success         : function(response) {
           document.querySelector("element_selector").innerHTML = response.templates.category.html;
       }
   });
});
</script>

3. Delay

You can also insert the tag lower down into the layout.

🚧

Warning

This is only appropriate if non-critical data needs to be added, e.g., adding recommendations to a product detail page that appear below the fold, but in most cases this approach is not recommended.

<script src="https://{{domainkey}}.store-{{locationkey}}.ometria.services/graphenehc.js"></script>
<script>
   // note: we can call the API immediately
   $g.fetch({
       template        : "category",
       success         : function(response) {
           document.querySelector("element_selector").innerHTML = response.templates.category.html;
       }
   });
</script>
</body>
ProsCongs
Because the tag is inserted much lower down the page, the loading of the script shouldn't cause any blocking.By delaying the loading of the script you will be, by definition, delaying the running of the script.

If there are many other synchronously loaded third party scripts then this will further delay the loading of the script.

Will likely cause flickering as the delay in loading content becomes noticeable.

Updated 2 days ago