Other Installations for Commerce

Instructions on how to install Commerce with AMP, Blogger, Google Tag Manager, phpBB, tumblr, TypePad, vBulletin, Wordpress, xenForo, and Wix.

Skip to Section: 

AMP

Blogger

Google Tag Manager

phpBB

tumblr

TypePad

vBulletin

Wordpress

xenForo

Wix

AMP

Accelerated Mobile Pages (AMP)is Google's solution that improves site speed and performance for mobile devices. AMP sets specific style and content requirements to slash load times and improve mobile display — these pages load 10 times faster and use 10 times less data than standard mobile pages.

These optimizations can also increase clickthrough rates. Since Google prioritizes AMP pages in search results, non-AMP pages often appear lower on the results page.

Install Instructions: 

1) Copy this AMP code to your clipboard.

<script​ ​async​ ​custom-element​=​"amp-link-rewriter" src​=​"https://cdn.ampproject.org/v0/amp-link-rewriter-0.1.js"​></script>

2) Paste the code on your pages.

This code should be inserted inside the ​<head>...</head>​ section of your pages, above any other AMP scripts.

3) Find the API key for the site that you're using. 

4) Copy this code to your clipboard. Make sure you replace the bolded text below with your API key.

<amp-link-rewriter​ ​layout​=​"nodisplay"​> ​<script​ ​type​=​"application/json"​>
{
​"output"​:
"https://redirect.viglink.com?key=${apiKey}&u=${href}&type=ap&loc=SO URCE_URL&ref=DOCUMENT_REFERRER"​,
​"vars"​: {
} ​"apiKey"​: ​"YOUR API KEY HERE"
}
​</script> </amp-link-rewriter>

5) Paste the code on your pages.

This code should be inserted inside the ​<body>...</body>​ section of your pages.

6) You're done!

See the ​official AMP documentation​ if you'd like more information about the ​amp-link-rewriter component.

Blogger

1) Find the API key for the site that you're using. 

2) Copy this code to your clipboard. Make sure you replace the bolded text below with your API key.

<script type="text/javascript">
  var vglnk = {key: 'YOUR API KEY HERE'};
    (function(d, t) {
        var s = d.createElement(t);
            s.type = 'text/javascript';
            s.async = true;
            s.src = '//cdn.viglink.com/api/vglnk.js';
        var r = d.getElementsByTagName(t)[0];
            r.parentNode.insertBefore(s, r);
    }(document, 'script'));
</script>

3) On your blogger dashboard, click on the name of the blog.

Screen Shot 2022-10-14 at 12.09.53 PM

4) Select Layout from the menu on the left.

Screen Shot 2022-10-14 at 12.10.57 PM

5) Click Add a Gadget that's closest to the bottom. 

6) From the gadget list, under basics, select the HTML/JavaScript gadget.

7) Paste the code in content (leave Title empty). Click Save.

8) You're done! 

Google Tag Manager

1) Find the API key for the site that you're using. 

2) Copy this code to your clipboard. Make sure you replace the bolded text below with your API key.

<script type="text/javascript">
  var vglnk = {key: 'YOUR API KEY HERE'};
    (function(d, t) {
        var s = d.createElement(t);
            s.type = 'text/javascript';
            s.async = true;
            s.src = '//cdn.viglink.com/api/vglnk.js';
        var r = d.getElementsByTagName(t)[0];
            r.parentNode.insertBefore(s, r);
    }(document, 'script'));
</script>

3) Select your account from Google Tag Manager home page and click New Tag.

Screen Shot 2022-10-14 at 12.18.28 PM

4) Click the box to choose a tag type to begin the setup and select Custom HTML as the Tag type.

Screen Shot 2022-10-14 at 12.32.51 PM

5) Paste the code from step 2 into the text box.

Screen Shot 2022-10-14 at 12.33.03 PM

6) Choose a Trigger to make the above tag fire.

7) Select either All Pages on Page View or create a new trigger if this does not exist, or if you only want this tag to fire on select pages. If using an existing tag, skip to step 10.

8) Click the box to choose a trigger type and select Page View from the list.

9) Select either All Page Views or Some Page Views. If selecting Some Page Views, you can stop the loading of the //Commerce code on select pages. Now click Save.

Screen Shot 2022-10-14 at 12.39.14 PM

10) Finally, on the main Tag page, name your newly created Tag and then press save.

11) You're done! 

 

phpBB

Please visit phpBB.com for instructions. 

tumblr

1) Find the API key for the site that you're using. 

2) Copy this code to your clipboard. Make sure you replace the bolded text below with your API key.

<script type="text/javascript">
  var vglnk = {key: 'YOUR API KEY HERE'};
    (function(d, t) {
        var s = d.createElement(t);
            s.type = 'text/javascript';
            s.async = true;
            s.src = '//cdn.viglink.com/api/vglnk.js';
        var r = d.getElementsByTagName(t)[0];
            r.parentNode.insertBefore(s, r);
    }(document, 'script'));
</script>

3) Go to the Tumblr customize page and open the Theme menu.

4) Click Use custom HTML at the bottom of the theme palette (if you haven't customized your theme).

Screen Shot 2022-10-14 at 1.59.11 PM

5) Paste the code just above the </body> tag.

Screen Shot 2022-10-14 at 2.02.50 PM

6) Click Save at the top of the page.

7) You're done!

TypePad

1) Find the API key for the site that you're using. 

2) Copy this code to your clipboard. Make sure you replace the bolded text below with your API key.

<script type="text/javascript">
  var vglnk = {key: 'YOUR API KEY HERE'};
    (function(d, t) {
        var s = d.createElement(t);
            s.type = 'text/javascript';
            s.async = true;
            s.src = '//cdn.viglink.com/api/vglnk.js';
        var r = d.getElementsByTagName(t)[0];
            r.parentNode.insertBefore(s, r);
    }(document, 'script'));
</script>

3) Go to your TypePad dashboard. Click the Design link.Screen Shot 2022-10-14 at 2.28.41 PM

4) On the design page, click the Content link.

Screen Shot 2022-10-14 at 2.28.52 PM

5) Find the blog footer module, and click the pencil icon.

Screen Shot 2022-10-14 at 2.29.03 PM

6) Click Advanced, paste the code at the bottom of the HTML text box. Click OK.

Screen Shot 2022-10-14 at 2.32.22 PM

7) Click the Save Changes button.

8) You're done! 

vBulletin

Please visit vbulletin.org for instructions. 

Wordpress

Please visit wordpress.org for instructions. 

xenForo

Please visit xenForo.com for instructions. 

 

Wix

1) Click Settings on your Wix site dashboard.

2) Scroll to the bottom of the page to the Advanced section and click Custom Code.

3) Copy this code to your clipboard. Make sure you replace the bolded text below with your API key.

<script type="text/javascript">
  var vglnk = {key: 'YOUR API KEY HERE'};
    (function(d, t) {
        var s = d.createElement(t);
            s.type = 'text/javascript';
            s.async = true;
            s.src = '//cdn.viglink.com/api/vglnk.js';
        var r = d.getElementsByTagName(t)[0];
            r.parentNode.insertBefore(s, r);
    }(document, 'script'));
</script>

4) Click Add Code in the Head section of the Custom Code page. 

5) Paste the Commerce Javascript code on your clipboard in the Paste the code snippet here field.

6) Name this code Sovrn Commerce.

7) We recommend adding this code to all pages. This will ensure that the Commerce JavaScript can convert links throughout your site into affiliate links.

8) Click Apply.

9) On the Custom Code page, ensure that the Enabled slider is turned on.