Custom dimensions settings

I like to set custom dimensions and need help in the start.
An example:
_paq.push([‘setCustomDimension’, customDimensionId = 9, customDimensionValue = ‘{{Page Hostname}}’]);
What will do actually number 9?

Hi,

9 is the number of the custom dimension you created in the custom dimensions settings in Matomo

I have installed the custom dimension plugin. Is there any good example how it is seen in real statistics?

When searching I noticed one example but how to know real statistics values in advance?

<script type="text/javascript">

  var _paq = _paq || [];

  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
 /*Source: https://req.co/blog/google-tag-manager-gtm-and-matomo*/
  _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);

  _paq.push(["setCookieDomain", "*.mydomain.com"]);

  _paq.push(['enableLinkTracking']);

  _paq.push(["setDomains", ["*.mydomain.com"]]);

  _paq.push(["enableCrossDomainLinking"]);

  _paq.push(['enableHeartBeatTimer']);

  _paq.push(['trackVisibleContentImpressions']);

  _paq.push(['setCustomDimension', customDimensionId = 9, customDimensionValue = '{{Page Hostname}}']);

  _paq.push(['trackPageView']);

  (function() {

    var u="//myinstance.innocraft.cloud/";

    _paq.push(['setTrackerUrl', u+'piwik.php']);

    _paq.push(['setSiteId', '{{Lookup - Hostname to MA SiteID}}']);

    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];

    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);

  })();

</script>

If I like to pull out Full name from input fields, how to do this using Custom dimensions plugin?