Injecting Code for the Mobify Tag and Service Worker
The Mobify Tag and Service Worker are required to create a tag-loaded PWA with the Mobify Platform.
In exceptional circumstances, it may not be possible to add the Mobify Tag and Service Worker before development begins.
Though the preferred solution is always to add the Mobify Tag and Service Worker, complex workarounds are possible:
1) Charles allows the Mobify Tag and Service Worker to be injected
2) Chrome Local Override allows only the Mobify Tag to be injected
3) Tag Injector allows only the Mobify Tag to be injected
Using Charles, an HTTP Proxy Application
The preferred workaround for local development is to use Charles, a paid Windows, Mac and Linux application, to add the Mobify Tag and Service Worker to responses from the website under development.
- Download, install and run Charles.
Import Rewrite Settings
Save the example Charles configuration on your computer.
Import it into Charles:
Tools > Import/Export Settings > Choose File > Import
Open www.example.com in your browser.
View source. The Mobify Tag is MISSING!
In Charles, enable proxying for your computer:
Proxy > macOSX Proxy
⌘+Shift+R, www.example.com and view source again. The Mobify Tag is THERE!
Configure Charles to serve HTTPS
Open https://www.example.com. It is unsecure! ☢️
Help > SSL Proxying Settings > Install Charles Root Certificate
Add the Certificate to your Login Keychain:
Open the Certificate:
Trust the Certificate, you will need to enter your password:
Back in your browser, refresh https://www.example.com. It should now be secure! 🔒
Configure Charles for your Website
Copy your Mobify Tag from cloud.mobify.com:
In Charles, configure the rewrite rule for your website:
Tools > Rewrite
Click the “Mobify Tag” rewrite rule to open its settings.
Double click the
www.example.comlocation. Change the host.
<head>, add your Mobify Tag:
In Charles, configure the SSL Proxying Rules for your website:
Proxy > SSL Proxying Settings
Open your site, view source and confirm your Mobify Tag is present!
Inject the Service Worker
Open http://www.example.com/service-worker-loader.js in your browser. The Service Worker is already in place! The example Charles configuration automatically injects the Service Worker for the example website.
To inject the Service Worker into your website, configure the map remote rules in Charles:
Tools > Map Remote
Double click the entry for
Change the “Map From” host to match your site.
/service-worker-loader.json your site in your browser. You should see the Service Worker here too!
Chrome Local Override
The Local Override functionality was introduced in Chrome 65. It allows us to modify the HTML content returned from the server. It’s a simple process and this guide will walk you through on how to install Mobify Tag locally.
Select Source, then select Overrides, click “Select folder for overrides” Your later changes will be stored in this folder.
Create a folder on your machine and select the folder
You will see a purple dot on the file icon, that means the file is successfully overriden.
Refresh the page and you are good to go!
For more information, visit Google Developer Guide.
The Tag Injector is a development proxy server that you can use to inject the Mobify Tag into a website. The Tag Injector cannot inject the Service Worker into a site.
Build the Tag-Injected URL
To use it, you build a tag injector URL that embeds the target website URL. The supported URL patterns are:
So to use the tag injector with
www.example.com you’d build a url as follows:
Open the above URL in Chrome and View Source ⌥⌘U. You will see the Mobify tag has been injected into the target website.
The tag that is injected is does not do anything by default. In order to activate it you need to preview using it. If you have a local development environment serving up your code locally, you can preview against that, otherwise you’ll need to push a bundle up to Cloud.