{"id":106736,"date":"2025-02-24T08:27:02","date_gmt":"2025-02-24T08:27:02","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/gtmtips-sort-custom-dimensions-by-index-number\/"},"modified":"2025-02-24T08:27:02","modified_gmt":"2025-02-24T08:27:02","slug":"gtmtips-sort-custom-dimensions-by-index-number","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=106736","title":{"rendered":"#GTMTips: Sort Custom Dimensions By Index Number"},"content":{"rendered":"


\n<\/p>\n

\n

Here\u2019s a hacky #GTMTips<\/a> tip for you. Have you ever had a Google Tag Manager<\/a> container, where you\u2019ve been updating your Google Analytics<\/a> tags over the years? And perhaps these tags (and, today, Google Analytics Settings variables<\/a>) have been updated with an ever-expanding list of Custom Dimensions? And perhaps this list of Custom Dimensions is sorted willy-nilly, because once you have 50+ rows, it just doesn\u2019t seem like a fun thing to do to go over each row and update them so that they are sorted by Custom Dimension index?<\/p>\n

No worries, then! I have a solution for you. It involves a little JavaScript snippet you need to execute in the web browser\u2019s JavaScript console, and it will sort the Custom Dimension fields for you!<\/p>\n


\n X<\/span><\/p>\n

\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n

\n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n

<\/span><\/p>\n

Tip 77: Sort Custom Dimensions by index number<\/h2>\n
\n

<\/p>\n

\"Sort<\/p>\n

<\/a><\/p>\n<\/div>\n

Here\u2019s what you need to do.<\/p>\n

    \n
  1. \n

    Browse to your Google Tag Manager container, and open the Google Analytics tag<\/strong> or Google Analytics Settings variable<\/strong> you want to modify.<\/p>\n<\/li>\n

  2. \n

    Make sure the tag or variable is in edit<\/strong> mode, meaning you can see each field as a text field that you can edit.<\/p>\n<\/li>\n

  3. \n

    Open the JavaScript console of your browser.<\/p>\n<\/li>\n

  4. \n

    Copy-paste the following snippet in the JavaScript console, and press enter to run it.<\/p>\n<\/li>\n

  5. \n

    Save the tag or variable.<\/p>\n<\/li>\n<\/ol>\n

    Here\u2019s the snippet, make sure you copy all<\/strong> of it (triple-clicking it should do the job):<\/p>\n

    \n
    var<\/span> el=document<\/span>.querySelector('[diff-field$=\"customDimensionSection\"]'<\/span>);var<\/span> rows=el.querySelectorAll(\".simple-table-row[data-ng-repeat]\"<\/span>);var<\/span> newRows=[];rows.forEach(function<\/span>(row){var<\/span> inputIdx=row.querySelectorAll('input[type=\"text\"]'<\/span>)[0<\/span>];var<\/span> inputVal=row.querySelectorAll('input[type=\"text\"]'<\/span>)[1<\/span>];newRows.push({idx:inputIdx.value,val:inputVal.value})});newRows.sort(function<\/span>(a,b){if<\/span>(parseInt<\/span>(a.idx)>parseInt<\/span>(b.idx)){return<\/span> 1<\/span>}if<\/span>(parseInt<\/span>(a.idx)parseInt(b.idx)){return<\/span>-1<\/span>}return<\/span> 0<\/span>});rows.forEach(function<\/span>(row,i){var<\/span> inputIdx=row.querySelectorAll('input[type=\"text\"]'<\/span>)[0<\/span>];var<\/span> inputVal=row.querySelectorAll('input[type=\"text\"]'<\/span>)[1<\/span>];inputIdx.value=newRows[i].idx;inputVal.value=newRows[i].val;inputIdx.dispatchEvent(new<\/span> Event(\"change\"<\/span>));inputVal.dispatchEvent(new<\/span> Event(\"change\"<\/span>))});\n<\/code><\/pre>\n<\/div>\n
    Just to clarify, being in edit<\/strong> mode should look like this:<\/p>\n
    \n
        <\/p>\n
        \"Edit<\/p>\n
        <\/a><\/p>\n<\/div>\n
    And you can open the JavaScript console of you browser handily with a shortcut key combination:<\/p>\n